L-systems in JavaScript using Canvas

While playing with Scratch I was thinking about what kinds of things would make good Scratch projects. I have had an interest in L-systems for a long time now but never did more than read about them and look at the pretty pictures. I thought scratch might motivate me to do something in this area but I quickly realized with Scratch’s lack of data structures (besides the 2d drawing surface) and argument passing it would take all the fun out of doing an L-system implementation. Sure, people have come up with ways of drawing fractals in Scratch but these are fixed algorithms usually at a specific generation. I have not yet seen an L-system implementation in Scratch.

About a month later I went to the ajax experience conference and learned about the new HTML canvas element among other things. I wanted a project to get practice writing JavaScript, more experience with using jQuery, and to try out jQueryUI and canvas. L-systems seemed like a great project for this purpose.

Before I get to my project here is a real quick definition of what an L-System is. A Lindenmayer system (L-system for short), named after biologist Aristid Lindenmeyer, is a rewriting system. It takes a list of symbols and repeatedly generates a new list of symbols by following a set of rules. Each new list of symbols is called a generation. The symbols can be given a graphical representation to produce an image algorithmically. The beauty of L-systems is that with just a few symbols and rules amazingly complex images can be created. L-systems were developed to model plants but can also draw fractals. More information is available from the links above and from the lsystem.js documentation.

My project, L-system.html, is a serverless web application for exploring a number of plant and fractal models created with L-systems. You select a model, change its parameters such as angle or distance depending on the model, set the number of generations then press the play button to see it drawn.

Being able to adjust the parameters of a model helps to understand it. When you see a fractal of some reasonably high number of generations it is not always clear what process gives rise to it. Stepping through from the zeroth to first and second generation of a fractal really helps to visualize the rule that makes the fractal what it is.

L-system.html is not very fancy or even complete. The main purpose for me was learning canvas, jQuery, and jQueryUI. It makes use of two reusable JavaScript libraries that I wrote:

• lsystem.js – a L-system library that supports parametric or non-parametric, deterministic or non-deterministic, context sensitive or context free, and branching or flat models.
• turtle.js – A 2d turtle graphics library on top of the HTML canvas API.

Both of these are open source with a BSD license if you care to use them. They can be used together or independently. You can download the whole project. If you make improvements to them or have suggestions I’d love to hear about it.

The rest of this post covers what I discovered along the way.

First I have to say I’m impressed with canvas and its capabilities. Its not as full featured as most mature graphics libraries and there are a few features that are not supported on all browsers but it opens up another area to web applications (without having to resort to Flash) that was previously only found in desktop applications. People are doing cool things with it already. Support for IE is accomplished with explorercanvas from Google. I have tested my project on Firefox 2, IE 7, Opera 9.24 and Safari 3beta (on Windows) and it works well except that the save functionality doesn’t work in Safari or IE. Also I have noticed IE to be slower than the others but have not done any rigorous timing.

Thanks to Canvas Paint (a canvas implementation of Microsoft Paint) for the technique for saving canvas images.

L-system.html is an example of a serverless web application. Its an application because it is interactive and does something at least a little interesting or useful. Its a web application because it runs in a web browser. Serverless is a somewhat new category of web application. It basically means that none of the application behavior is running on a server. A web server may be serving the HTML and related resources but there is no servlet, or PHP script, etc. A server may be providing raw data or persisting data (like the Amazon S3 service) but this is just data storage or acquisition and often the servers or services are not even owned by the creator of the application. In some cases the application can just be an HTML file on your local file system. L-system.html can run this way. An even cooler example of the kind of interesting things that can be done without a server is TiddlyWiki – a serverless wiki.

After working more with jQuery I’m convinced that this is the way I want to write JavaScript and to work with the DOM. However I’m not anywhere near as impressed with jQueryUI. It just doesn’t seem ready for prime time. I only wanted a few UI elements: a slider, a dialog, a progress control and a color picker. There is no progress control or color picker in jQueryUI although there are plugins for color pickers and maybe a progress control as well. I thought it would be best to stick to the official UI widgets. I struggled to learn the UI widgets and get them to work the way I wanted. I needed to read the source as well as the documentation to figure them out.

The first problem I ran into was with the slider on on IE 6 and 7. I found a bug report that said the problem was fixed in the latest. After downloading the latest from the SVN source repository the problem was indeed fixed.

I wanted to be able to move the slider with the right and left arrow keys and to show that the slider had focus. I know that jQueryUI doesn’t have full accessibility support yet, but keyboard support seemed like it should work for a control like slider. I noticed some code to turn on keyboard support when webforms (not sure what that is) is present. This helped me figure out how to get it working the way I wanted. You can tab to or click on the slider to give it focus and then use the arrow keys to move the slider.

One thing that bugs me about some ajax apps is that they break the back button. I really wanted to get back button history working with jQuery in this project. At the ajax experience conference I saw the history plugin demonstrated and it looked so easy. So far my attempts to get it working have failed. The history plugin seems like it would be easy to use with the tab control but i’m not using the tab control. Then I read that the new tab control in jQueryUI doesn’t work with the history plugin. There is a mention that the history plugin needs to be rewritten but no time frame for when it will be available. Since I’m not using tabs it may be possible to get the current history plugin working but I haven’t figured it out yet.

My next problem was with the dialog control. I found that I could end up with multiple copies of the dialog displayed. I decided to try the latest version from SVN like I did with the slider. I did manage to solve my problem by using the new dialogInit method. (There may have been another way.) The trouble is that at the time I got the latest version of dialog the mouse management was rewritten which broke the slider and resizing of dialogs. As of this writing they still are not fixed. There may be some set of source versions that will solve both my slider and dialog problems but I don’t have time to find it. So at this point the sliders do not move with the mouse (you get a JavaScript error). I’ll just have to wait for the jQueryUI mouse implementation to get finished.

I noticed that some of the jQueryUI documentation (at least the examples) are in advance of the current 1.0 release. For example, the dialogInit method was shown in one of the dialog examples even thought it is not in the 1.0 release.

There is no progress control in the jQueryUI so I made my own. The next step will be to learn how to turn it into a plugin.

Along the way I found a number of useful tools and practices for writing JavaScript

• Firebug is a very good tool. I knew that already but with this project I used the profiler for the first time. The profiler is very easy to use and helped me to improve the performance of the L-system algorithm. I also used the console log, which Firebug lite makes work cross browser.
• I’m using JSLint from an ant task and it has found some problems. I described the technique for ant integration here.
• I used jsdoc-toolkit to generate the library documentation. This tool is very easy to use and produces nice results. Since the JavaScript is going to get minified anyway I think it is a good idea to keep the documentation in the source.
• For testing the 2 library modules I used jsunit. Actually I only used the assertion functions from the core. This looks like it could be a good tool but I need to learn more about how to use it effectively.
• I use just the CSS library from YUI.
• To build the final html as well as the aggregated and minified resources I use ant, yui compressor, and STST. One thing I noticed is that yui compressor catches some JavaScript problems that JSLint did not.

After I was just about done with this project I discovered that someone else created a canvas L-system implementation LSys/JS. Although it doesn’t support as many kinds of L-systems it does allow you to enter your own. Also it does not have a reusable library layer.

If you have read this far without trying it out you should take a look at L-system.html now. If you want to add your own L-system models you can download the project and modify the lsystem.html file. If you come up with a cool model leave a comment with a link to it.