I recently saw this video about the dragon curve in Jurassic park and being the completely incorrigible nerd that I am, I figured “How hard can it be to build that thing”. In javascript. Cause fuck it, I guess.

The best explanation I found on how to actually generate it was this wikipedia article. More specifically there is a very elegant iteration function system that doesn’t even involve the complex plane (from my limited research, that complex plane seems to be pretty unavoidable when dealing with fractals)

Pictured: Math

But because I’m terrified of matrix transformations I wanted to solve it another way. Basically: the way you would physically fold some paper (as explained in the video above)

Pictured: Not Math

The general rule is this: Turn every line-segment into a 90 degree corner, alternating between “turning” right and turning left. So with an array “lines” starting with an original one that I arbitrarily put somewhere, every iteration does the following:

rotate_point just does this:

The more mathematical-minded among you will notice this does exactly what the matrix-transformation does, but with steps in between.

Try it out below!