The most simple JavaScript fractals

I present the community a JavaScript page that allows you to build, draw, create simple fractal figures based on self-similarity. This is actually my first experience using HTML / CSS / JS. With extensive programming experience, I still missed web development. And since, in my opinion, the most convenient way to learn how to program is to make a project, here it is my fractal HelloWorld .









The general idea is simple. Take any line consisting of segments, that is, piecewise linear. Let's call it baseline. Then each of the segments is replaced by a copy of the baseline, scaled and rotated accordingly. Then each of the segments of the resulting line is replaced, and the process continues until you get bored. I will illustrate in the pictures. Example baseline:

')





First iteration:







The second:







The program allows you to create and modify the baseline: add and delete vertices, move them, immediately see what happens. In addition, to replace the segment with a copy of the baseline can be different. You can, for example, before replacing reflect the base line relative to one of the axes (the one that connects the start and end points). Of course, it would be possible to reflect a relatively perpendicular axis, but I implemented only the first option. Whether or not the reflection is indicated by the baseline color:











And some pictures:











Finally, a few words about the code. Of course, after C ++ / Matlab / Python, I was quite surprised at the representation of objects in JS. And the absence of classes, and global variables. In the end, I concluded the whole code in two functions. The first created the fractal object and was made according to the following scheme using a closure:

function fracObject() { //     var own = {}; //    var that = {}; // ...    ... //     return that; } 

I don’t know how to add inheritance to this, how to correctly use this. But this is in the future, for this project, inheritance would be superfluous. The second function is loaded after body.onload and implements user interaction.



Link to the project in GitHub: https://github.com/nordwinder/frac-js



And to those who read to the end, I wish beautiful fractals.



UPD: Replaced the recursive call with a normal, albeit more complex function. It seems to me, it became faster to work. In addition, now no more than 10 thousand segments are drawn at a time. Then there is a small pause - the browser to handle the event, to see if the user is gone. Added progress bar and cancel button. Now, the browser should not hang even on the most complex and confusing lines.