HTML Canvases and Lindenmayer Systems
I recently noticed that there is a canvas feature that has been implemented in most modern browsers (unsurprisingly not IE7). The canvas allows you to draw things using javascript which is a really nice feature. It opens up several possibilities for interactive applications in a way that runs reasonably quickly and doesn’t involve many pictures. I came across a website that had used the canvas for what is called a lindenmayer system. I have just take the idea from this website and I coded a version myself. If you look at the code we have implemented it fairly differently although the systems are obviously pretty similar.
It was quite fun to make, I had done a project that parsed a small expression in VB a couple of times so I knew how to implements that and the rest was just using the functions of the canvas system to rotate and draw lines. I have put my implementation below, you can give it a formula, tell it how many iterations to do and there is also a scaling option. The script has a go at scaling but it isn’t very good, all it does is scale it inversely proportional to the number of iterations so 2 iterations is half size, 4 iterations is a quarter etc. This will not work in Internet Explorer.
Please post any interesting formulas that you find. The script has no error checking so I would avoid putting in stupidly big iterations since it will never complete and might lock up your browser.
October 30th, 2007 at 2:17 pm
f[f+++f---][---f+++f]
Lovely bit of programming
January 22nd, 2008 at 11:13 pm
I too created a canvas based L-system.
You can read about it and try it out here.
The big differences: you can’t input your own model - you would have to modify the javascript. It supports more kinds of L-systems (but not 3D)