I love fractals and I saw neat golfed examples of what you can do with the canvas (e.g. this 128 bytes dragon’s curve), so I tried to create a simple dragon’s curve generation visualisation.
My attempt displays splittings of the initial segment as it gradually turns into a curve.
Here is the full code. To make it work, you need a fixed-size canvas whose id is
a (demo at the end).
Let’s break it down:
The first part create variables used during the generation:
cthe canvas’s context
Wthe canvas’s width
Hthe canvas’s height
All points are vectors, the
x is represented with the first element and
y with the second.
The starting point of the generation is a simple line, going from the first third to the last third of the canvas.
jis a general increment value
lthe length of the curve
ithe current index in the curve
I use four functions of the canvas’s context:
But with the following piece of code I can call
c and so on:
Next we define our interval which will act as the rendering loop. We store it in a variable to be able to stop it later, but this can be omitted.
The first part of the loop draw the current state, all lines between the points.
This erase everything in the canvas, giving us a fresh start.
We are drawing a path, i.e. a continuous line on the canvas. Those two instructions start and finish the line.
Now the fun part, let’s start by decomposing the loop:
We are iterating through the whole point array, from last to first, creating a new line each time.
j-- > 0 is simplified to
0 is falsy.
c.line part is inserted in the
We are only generating a new point at a time, in order to produce the growth animation.
To insert a new element in the array at position
i, we use the splice method:
We call a function that use the current and previous element to generate the new points.
d is the direction of the rotation, which alternate between
-1, depending on the current index.
The new element use the matrix transformation operation (defined here), but simplified to perform both rotation at the same time:
The actual formulas are:
xc = 1/2 * ( xa + ya + xb - yb ) yc = 1/2 * ( - xa + ya + xb + yb ) and xc = 1/2 * ( xa - ya + xb + yb ) yc = 1/2 * ( xa + ya - xb + yb )
d variable we can factor them.
Now we update our variables:
lis incremented, since we just added a new point in the array
igrow two by two and when it gets bigger than
l, it goes back to one
We increment the current index by two because, as we want to proceed the next element in the array, we just added a new one. And we never proceed the first element since the matrix operations are done on the
You can try it below (will only work on chrome, see below for more details):
Compatibility note: The name to number hack for the canvas context make this works only on chrome. The other browsers does not have the same ordering.
i.e. with Chrome, Firefox and Safari:
Using the snippet:
You can change de corresponding code with the following: