Hypocycloid demo

[lainz]

Theory
https://mathworld.wolfram.com/Hypocycloid.html

Here is the working code for Pascal
https://github.com/bgrabitmap/demo/blob/master/hypocycloid/umain.pas

I've ported it from JavaScript
https://codepen.io/enxaneta/pen/WQPdvV

[Boleeman]

Sorry to bother you Lainz but I get this error when compiling at line 230 I get an error umain.pas(230,27) Error: identifier idents no member "InvalidateBitmap"
BGRAVirtualScreen1.InvalidateBitmap(BoundingBox(modifyBox));


Actually I solved the problem by replacing it with BGRAVirtualScreen1.Invalidate;
Are you perhaps using the Dev version of BGRABmp?

Also when downloading the files individually from Github using Firefox browser I got a stream error. I ended up downloading the whole demo zip file and then extracting the Hypocycloid demo.

After running the Hypocycloid demo I was impressed. Looks fanstasic. Not sure if the pen could be changed to a rainbow type to add more color effects to it. I have been wanting to learn how to convert javascript to Lazarus. There are heaps of great javascript codes that produce great graphics. Would be nice to learn how to port them. Anyhow I will play with your Hypocycloid demo. Thanks for the conversion.

There is a really COOL Javascript that does Sutcliffe Pentagons at https://github.com/tex2e/p5js-pentagon
Codeproject has C++ source at https://www.codeproject.com/Articles/214536/Generative-Art-Case-Study-Sutcliffe-Pentagons
An example of what it looks like is at https://tex2e.github.io/p5js-pentagon/

[lainz]

Hi, yes it uses dev-bgrabitmap and dev-bgracontrols.

I did v0.1, @circular did v0.2 and v0.3, improving the speed redrawing only the moving parts.

[lainz]

There is a really COOL Javascript that does Sutcliffe Pentagons at https://github.com/tex2e/p5js-pentagon
...
An example of what it looks like is at https://tex2e.github.io/p5js-pentagon/

I've used p5js, here:
https://openprocessing.org/sketch/576536

Mostly named 'Processing', is easy to use. To convert to Pascal we need to create the same functions first, to make it easy...

[Boleeman]

Ah yes I have seen the fractal circles you made/converted to Lazarus. Quite impressive.

Love all things graphics, especially fractals.

[TRon]

There is a really COOL Javascript that does Sutcliffe Pentagons at https://github.com/tex2e/p5js-pentagon
Codeproject has C++ source at https://www.codeproject.com/Articles/214536/Generative-Art-Case-Study-Sutcliffe-Pentagons
An example of what it looks like is at https://tex2e.github.io/p5js-pentagon/

There you go (fpc version only). Only thing missing now is a GUI

edit: forgot to forward procedure drawFractal after rearranging procs before upload. Updated the attachment and should be fixed now.

[Boleeman]

Wow TRON can't believe it (watering at the mouth, Sutcliffe Pentagons in Lazarus). Fantastic.

Can't believe it. Wow again!

[lainz]

There is a really COOL Javascript that does Sutcliffe Pentagons at https://github.com/tex2e/p5js-pentagon
Codeproject has C++ source at https://www.codeproject.com/Articles/214536/Generative-Art-Case-Study-Sutcliffe-Pentagons
An example of what it looks like is at https://tex2e.github.io/p5js-pentagon/

There you go (fpc version only). Only thing missing now is a GUI

edit: forgot to forward procedure drawFractal after rearranging procs before upload. Updated the attachment and should be fixed now.

Awesome =)
We can include this in lazpaint?

[TRon]

@Boleeman:
Yes, it does exactly what you wrote (now removed from your post  ) like the original does: https://github.com/tex2e/p5js-pentagon/blob/master/js/main.js#L117

It is literally a literal copy of that code, except that FPC misses a few functions that I had to 'emulate'. It was a nice exercise converting JavaScript to Pascal and reminded me again why I dislike js. The moment you analyze the Pascal version you can see what a mess it becomes. The use of classes/objects (whatever they are called in js) in the original code is/was completely unnecessary imho.

But basically if you add some sliders to a form, let them change the settings using their events, copy the code from the main program entry into some form method, you should be able to interact by creating a simple GUI for it. If you do so it also becomes more clear how to refactor the lot into something that is more usable for a Lazarus form (you can copy the TFPImage to a visible canvas once the image has rendered). I couldn't be arsed to do so as my main objective was js to pascal. Next time you should be able to do so yourself by taking a peek to what I did 

[TRon]

We can include this in lazpaint?

Sure but I would encourage to refactor and use a bgrabitmap in that case (that is what lazpain uses, not ?). As for the rest, if the license of the original code allows you to to do so (I was unable to find a license) then feel free and go ahead and copy-paste to your heart's desire. That is exactly what paying forward means: re-use and show off in your project and in case possible improve things.

[lainz]

We can include this in lazpaint?

Sure but I would encourage to refactor and use a bgrabitmap in that case (that is what lazpain uses, not ?). As for the rest, if the license of the original code allows you to to do so (I was unable to find a license) then feel free and go ahead and copy-paste to your heart's desire. That is exactly what paying forward means: re-use and show off in your project and in case possible improve things.

Thankyou!

[lainz]

Ah yes I have seen the fractal circles you made/converted to Lazarus. Quite impressive.

Love all things graphics, especially fractals.

I love all graphics stuff too, and also fractals =)
Nice to know other people here that like graphics like me.

If you have some graphics to share to include into LazPaint add them here:
https://forum.lazarus.freepascal.org/index.php/topic,64708.msg492242/topicseen.html

[TRon]

We can include this in lazpaint?

Sure but I would encourage to refactor and use a bgrabitmap in that case (that is what lazpain uses, not ?). As for the rest, if the license of the original code allows you to to do so (I was unable to find a license) then feel free and go ahead and copy-paste to your heart's desire. That is exactly what paying forward means: re-use and show off in your project and in case possible improve things.

Thankyou!

You're more than welcome. Thank you for considering to ask and for your contributions.

Attached is a class helper for TFPCustomCanvas. I've rewrote everything using normal procedures and encapsulated that into a helper. Should be easier to make (practical) use of it now and perhaps more adaptable for your use case.

For someone with more knowledge on the Sutcliffe algorithm I want to ask if it is necessary to (explicitly) draw the root branch. The original (js) code does it but I failed to see the difference (but might be because I did not run into a particular case that does require for the root branch to be (explicitly) drawn).

Have Fun !


edit 2023.09.26:  Updated the attachment with a fixed version of the helper as the previous version was drawing branches using the wrong points resulting in graphics that can be perceived as missing a nesting iteration.

[Boleeman]

Hey TRON

I just did a comparison using the settings shown in the attached png image and there seems to be a difference in the detail.

The javascript version seems to have extra lines indicating that it has gone an extra recursion level, so either:

draw the root branch ?

OR

Go an extra recursion level?

Boy, I still can't believe the Sutcliffe fractal is becoming a reality in Lazarus. Having fun. Just amazing!

[TRon]

@baleeman:
Thank for noticing and reporting. Probably I was a little too enthusiastic with declaring the procedure variable parameter modifiers. I'll have to get back to the drawing board for that (unless someone else beats me to it). Can take a while as I'm currently working on some other things.