An itsy bitsy Dragon curve renderer in 121 bytes.
<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>
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
m & -m & m / 2
At each step, the curve takes a π/2 turn. Dealing with exact fractions of
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.
- draw a pixel
- move forward
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 experiments
There are many experiments and projects like DRAGON PUNCH to discover other here.
- MUSIC FOR TINY AIRPORTS AT WEB AUDIO CONFERENCE The Web Audio Conference 2018, held in September 19-21 in Berlin was a great mix of researchers, web developers, artists and performers presenting their projects. I had the chance to provide a deep dive into music for tiny airports, explaining how to generate hours and hours of music in a handful of bytes.
- MUSIC FOR TINY AIRPORTS 2/1 🛫 Celebrating the 40 years anniversary of Brian Eno's "Ambient 1: Music for Airports" with an homage written in 256 bytes with the Web Audio API.
- THEY COME AT DUSK 👺 A survival horror game for JS1k 2018, where you run away from dead miners as you hear your heart beat. Turn around using the arrow keys until all you hear is beeeeeeeep.
- ART×JS AT FFCONF ART×JS was the closing talk at FFconf 2016. The goal was to bring new developer artists to the web by abusing standards and developing a visual understanding of mathematics.
- THREAD The "10 print" maze generator in 15 bytes of x86 assembler.
- TILT SHIFT A very fast & simple tilt-shift effect in Canvas.
- 256B.HTM The first edition of the 256B.HTM contest allowed 5 entries per author. Mine ranked 1st, 10th, 19th and 29th out of 63.
Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking, workshop or performance opportunity.