Three Processing.js Examples

The past few days I have been working on a few projects using Processing.js's JavaScript Api. All three of them deal with using html ui widgets (textfields and buttons for the most part) to interact and control the graphics. The code is all easily accessible from the demo pages themselves, and is under Creative Commons attribution licensing, but I can relicense it under something more permissive if necessary.

Let me know if there are any questions.

Bubbles

This is a really simple application that simply draws bubbles. (Note: I accidently threw a framerate in there, and it shouldn't be there, since it really only renders once per click.) A bunch of text fields allow users to customize the range of colors the bubbles can be, the background color, the number of bubbles, and the size of canvas. Runs pretty well in non-beta browsers (works fine in the current release version of Camino).

Superspace

Another simple application, that shows how buttons can interact with Processing.js applications. Shows rectangles bouncing merrily around in a partially constrained area. Works just fine in non-beta browsers (again, meaning the current release version of Camino.)

Processed Tower Defense

This is by far the most complex of the processing.js examples I have put together, and is an aspirant to the Tower Defense genre of games. The version online now is something I wrote yesterday, and still has some work to be done, but has some neat functionality as well. At the moment, you can't really play it, but you can play around with it. You can build towers, click on towers to see their range, manually spawn creeps (doesn't occur automatically yet), score/gold/lives/etc updated in real time, creeps walk to exit and when they reach it you lose a life, and you can fire missiles (click "Launch Small Missile", then move the cursor into the canvas and you'll have a range radius painted around your cursor), and a few other things. The user interface is kind of neat, but certainly requires more work.

Code wise, I did a rewrite after my first three or four hours of hacking at it, and its a fairly flexible design. I'll need to write another entry just looking at the interesting parts of its implementation. Next up are implementing towers firing and doing damage, and automatic spawning of creep. After that, there are a lot of things, but giving creeps some movement jitter, simple animations for things (creep death, launching a missile), more than one tower, etc.

This one runs in Camino, but is very slow and jerky. Basically the UI turns into a awful mire of failure. On FireFox 3 B5 it runs perfectly though.

Anyway, these examples are for everyone to learn from, ignore, remix, or otherwise do with as they please. Enjoy.