DRAGON PUNCH

268 words ~ 2 mins

An itsy bitsy Dragon curve renderer in 121 bytes.

Source code

<body onload=with(c.getContext('2d'))for(m=8e4;m;rotate(--m&-m&m/2?11:-11))fillRect(0,0,1,1),translate(1,0)><canvas id=c>

Dragon curve

The dragon curve is a nice little space filling curve made of π/2 turns.

Drawing a tiny dragon

The easiest iterative way to draw the curve is to determine in which direction to turn at each step of the curve.

The direction of the turn is given by the expression:

(((n & −n) << 1) & n) != 0

Which can be optimized in JavaScript to:

m & -m & m / 2

At each step, the curve takes a π/2 turn. Dealing with exact fractions of Math.PI in JavaScript is verbose. Therefore the angle is approximated by the number 11 which is very close to π*3.5, in other words -π/2 module 2π.

The Canvas API works a bit like Logo and provides simple and compact methods to move, rotate, and draw which are perfectly suited to render the dragon curve.

Which becomes the following Canvas API calls:

fillRect(0,0,1,1);
translate(1,0);
rotate(angle);

Looping backwards is a bit more compact as you only need to check if the iterator is truthy.

All in all, the code is rather self explanatory but that's part of its charm.

Karma and all

This 121 bytes dragon punch was a nudge to JS1k 2014: Here be dragons for which I am part of the jury and waits for your submissions until the end of March 2014. As usual, this production is available on Pouet.net for comments.

Hope you liked this one.


Other recent projects

There are many experiments and projects like DRAGON PUNCH to discover other here.


Let's talk

Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking or performance opportunity.