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) != 0Which can be optimized in JavaScript to:
m & -m & m / 2At 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.
- draw a pixel
- move forward
- turn
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.
FRONTFEST MOSCOW It was an honour to be invited to Fronfest Moscow 2017 with the little family to give my first workshop; implementing a Twin-stick shooter using ES6 and Canvas, and to continue my CODE🎙ART series of talks + live coding aiming to inspire new web developer artists. on November 18th, 2017
VOLTRA VOLTRA: Grinding the Universe, a gritty JavaScript demo, winner of the 1024 bytes demo competition at the Assembly 2017. on August 6th, 2017
BREATHING EARTH Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks. on June 26th, 2017
JS1K 2015 INVITATION JS1k 2015, the yearly 1kb JavaScript contest, is around the corner and kuvos asked a couple of optimizer extraordinaires to open the show. Hopefully this little invitation will tingle the spider sense of talented developers and code golfers in time for them to submit high quality entries to JS1k 2015. on January 28th, 2015
THREAD The "10 print" maze generator in 15 bytes of x86 assembler. on December 19th, 2013
MATRAKA DEMOJS 2012's winner 1k intro with 3D graphics and music, written in JavaScript and packaged into a self extracting PNG image. See and hear for yourself! Remember, everything you're about to see and hear fits in 1024 bytes. Watch out, the music is quite loud on June 30th, 2012
256B.HTM ROUND 2 The second edition of the 256B.HTM contest allowed 3 entries per author. Mine ranked 1st, 2nd and 4th out of 43. Only a few points shy of a total take over! on September 2nd, 2002
EQUALIZER A little intro for the famous Equalizer BBS made in 4kb for MSDOS on April 23rd, 1997
Let's talk
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.