javascript

The Dragon Curve

Tuesday, October 21st, 2008 | Tech | No Comments

My front page needed something to distinguish it a bit from the sea of internet homepages and the obvious thing was a fractal. After hunting around a little on the Wikipedia list I opted for the Dragon Curve.

The dragon curve or Heighway dragon is one of the many named space-filling (you can see it has Hausdorff dimension 2 in the list) curves and happens to look quite nice while being slightly less well-known. You can generate it either by recursively adding detail to a straight line (as is often done for the Koch curve and Sierpinski triangles) or by taking the limit set of an iterated function system (like for the Mandelbrot set).

Of course it would have been a bit boring to just slap up an image, and I felt it would be cool to have something that actually used the refinement algorithm to construct the dragon curve on screen, so with the help of jQuery and jQuery.svg, I made a little Javascript and SVG (sorry, IE users) implementation that performs the first 14 iterations.

The result is here and the Javascript code here.

Tags: , , , ,

Meta

Search