Curious for J1SK requirements

Sunday, March 23, 2014 » programming

For some years I have been following the J1SK competition and as for fun trying to analyse the submitted codes. Sometimes there is a really clever idea out using maths and generating very spectacular demos under 1024 bytes. On this year I have decided that am going to submit a demo as an experiment. My time was limited to one week (taking the evenings and once the middle of the night during one week) so what kind of demo could be come out first skipping the fact that the limitation is only 1024 bytes (16bit unicode values in Javascript) and I am on an entry level in Javascript. When it's ready then trying to descend the size of code using manual and automatic techniques. I was hearing earlier from the Dragon fractal so it seemed a possible choiche that could be realized during my planned time. First days I was doing some research and found the most of implementation using the classic iterated function system. The other clever solution is the folding the dragon method. That was I wanted to use to generate the dragon fractal. The construction of dragon fractal can be represented by a binary sequence where the 1 value means a left turn and the 0 value is right turn (more details about the generation here). The binary sequence can be generated by the next formula:

bool turn = (((n & -n) << 1) & n) != 0

This exactly gives the binary sequence (more details here on Wikipedia). Because I was still curious what other solutions are available, some hours later I've found a really usefull site Integer sequences where can be found a particular chapter (and still growing) telling different informations about dragon fractal (click here). On this site is a recursive formula that was introduced by Michael Somos. I have not seen that this is used in any other demos came to my hand so I have just decided make this formula more popular using this one:

a(n) = if( n%2, a(n\2), 1 - (n/2%2))

and it draws the classical dragon curve fractal. The demo redraws in every 10 milliseconds a new expanded curve using more steps by elapsed time.

To make the demo more playful I have added some limited random parameters to the curve generation and binded them to the different colors. The algorithm is simple: when based on generated value turning in a direction left or right and drawing the line in this direction the length of the line must be added to one coordinate (on X or Y axis). Because the turning is always 90 angle so the line drawing is always with one coordinate on fix axis (and the other coordinate on other axis is not changing). This changing is a variable that is added to the non-changing coordinate. When this variable is zero that gives the classical 90 angle dragon curve fractal (pressing red button on demo). When the variable can be given by Math.random()/10 that results the curve generated by clicking on green button. When the variable can given by Math.random()/100 (pressing brown button) and when it's Math.random() and added some random colors to each line gives the last curve (pressing blue button). As I mentioned the curve is redrawn recursively, the positive changing random values always give new coordinates to dragon curve as if it moves.

As I was ignoring at the beginning the size of the code, at the end I was using techniques to minifing the result. Before using automatizations I have shortened the changing names (e.g.: variables) and optimalized the sequence of instructions and there is a clever list on jscrush site that strongly recommended to be gone through. The automatizations were first the closure-compile and the mentioned jscrush sites.

To the submitted code and showing the demo click here.

Some useful links related to topic:

Fractal Tree | Another Dragon Curve | About Dragon curves | Language Specification | Integer Sequences