javascript turtle graphics

Friday 03 December 2010 at 22:51

Over Thanksgiving I was able to get a somewhat tested implementation of 2d turtle graphics in javascript -- the model is tested but the views that render into the canvas aren't really tests. The code is here:

http://github.com/dobbs/turtle

I was even able to re-create the von Koch snowflake code that was the starting point for this post:

http://dobbse.net/thinair/2008/12/logo-fractals-recursion.html

Here's the same fractals written in javascript with two implementations...

fractal.js

drawLine() is a reasonable port of the original logo code and fractalLine() is a generalization that lets me illustrate the similarity between the von Koch snowflake and the peano curve.

The drawings do not animate yet... they're just a different api over the HTML5 canvas. But I'm frankly blown away at the ridiculous simplicity of the implementation: move() calculates the change in x and y by just taking the sine and cosine of the turtle's direction! So on top of the way turtles enable people to play with differential geometry (incredibly high-level mathematics made trivial by effective use of computing), the implementation is a beautiful application of very simple trigonometry -- a unit circle at work inside a simple state machine. There are some exciting lessons around an amazingly small amount of code... both in the von Koch and peano example and inside the turtle itself.

I think my next steps will be to create a player that will animate the drawing step-by-step and then to enable in-browser editing of the scripts. No idea when I'll be able to make time for either of those little projects. But this feels like a nice start.

Oh, and if you happen to be visiting here with a browser that supports the HTML5 canvas element, you can see the von Koch snowflake and Peano curves illustrated below using my javascript turtle graphics.

an image of the von Koch snowflake on the left and peano curve on the right