By way of the Glue chat comic (interesting ideas, by the way), I came across John Palmer’s excellent posts on spatial interfaces and spatial software. Mmm. As a productivity nerd and a hobbyist toolmaker (there are probably ten or so personal tools I’ve been using over the past several years that I’ve never blogged about, but that’ll change soon), I’m very, very interested in these kinds of ideas. Particularly in using 3D interfaces for productivity. I’ve thought a bit about doing that in VR, but I hadn’t really considered building tools in 3D even outside of VR.
No concrete ideas yet, just little threads leading off to various areas that I’m interested in exploring (todo lists, website/blog engines, writing/outlining tools, etc.).
At this point the plan is to use Three.js for prototyping some ideas to see if it’s viable. My initial sense is that for the kinds of tools I’m interested in, I’ll probably need a good way to render/edit text from within Three.js, and it looks like rendering to a canvas and then using the canvas as a texture will work. Anyway, more to come.
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).
