Ok, I’ve never suspected I would love this so much ahah ! But once you enter the world of fractals… you’ll always want more.
My first playground is a fractal that looks like a leaf. Not any leaf, a fern leaf. This comes from Michael Barnsley work upon fractals. It demonstrate an example of an iterated function system. A fractal is the union of several copies of a geometric model, each being transformed by a function. Usually represented on 3 dimensions, they are often computed and drawn in 2D. The canonical example is the Sierpiński triangle.
Barnsley’s fern uses 4 affine transformations.
|ƒ2||0.85||0.04||−0.04||0.85||0||1.60||0.85||Successively smaller leaflets|
|ƒ3||0.20||−0.26||0.23||0.22||0||1.60||0.07||Largest left-hand leaflet|
|ƒ4||−0.15||0.28||0.26||0.24||0||0.44||0.07||Largest right-hand leaflet|
This table up here is not immutable, try to tweek it’s values and see what happens :)
Anyway, to begin with, I need to draw. and to draw I can use a canvas.
Let define the starting points and position.
For a defined serie, I’ll draw a point, a dot, and between each iteration, I’ll copy it’s values, then transform it according to the function and the given values in the table up above. Let’s say I’ll draw 150’000 dots.
Let’s code the drawPoint function. I’ll use the fillRect method to depict and draw the point in the canvas.
Let’s see the nextPoint method. This is the method that will implement the maths. This is the method you’ll want to tweak.
We could be done. But unfortunately, I need to make my point to be visible and proportionnaly dispatch within my canvas. If I stop here, I won’t see anything but disappointment. To map the point with the canvas I’ll create a map method. And because I don’t care I’ll use a prototype x) and update the draw function accordingly.
Isn’t that cool ?? ahah :D Try some mutations and see what happens :)
The code is available here.