Earlier this week I wrote a small Asteroids clone in JavaScript:
Instructions and the link to the game are on the project page.
FYI, here’s how I made the animated GIF: I used Quicktime Player to record a portion of the screen, then used ImageMagick to convert the .mov file to a series of PNGs:
convert asteroids.mov png/asteroids_%03d.png
I deleted the extra frames at beginning and end that I didn’t care about (unpausing the game, figuring out how to turn the recording off), then used ImageMagick again to make the GIF:
I’ve been playing around some more with the L-system code and modified it to animate the angle property and output each frame to a file. I also added some color and started using blending modes for the brushes. Once I clean up the code, I’ll post it to GitHub.
Anyway, here are some of the animation tests (I used Blender to put the frames together into an animation):
And the first one I did, which is a little too long and a little too fast:
I’ve been getting into procedural drawing and generative art some more, and last week I decided to try out L-systems. I ported some Processing code to Javascript and Canvas, then modified it and added controls so I could tweak the values and try things out. I also wrote a handful of additional brushes to get more interesting renders out of it (since plain lines can be kind of boring).
The algorithm isn’t entirely accurate — at least based off of the axioms and rulesets I plugged in from the Algorithmic Beauty of Plants book — but I like what I’m getting. I’ll do a second app sometime later with the correct algorithm.
Anyway, the code (which is kind of messy at the moment) is on GitHub. Sometime later I plan to add color selectors and more brushes. You can see the rest of these images in my sketches set on Flickr.
The code was pretty much just thrown together; if I were to use this in an actual app, it’d be much cleaner. And for some reason it doesn’t quite work in Safari 4, so you’ll need to use Firefox 3.5.
As for next steps, I’m going to try to rewrite the demo using Processing.js. I’m also planning to extend it to allow panning (so you can have a huge pedigree chart onscreen — some of the Flash-based pedigrees out there do the same thing), and I’m itching to do some kind of genealogy demo ala Snow Stack (Safari only).
