The animation I did for the Center for Cartoon Studies Animation for Cartoonists workshop over the course of a week during this summer.

We did the whole process; coming up with ideas and workshopping them, storyboards, animatics, audio and final production. It went too fast — I miss all the great people and energy.

Thanks Scott and Jennifer and all the students and staff for making it a great workshop!

Play It!

There are a couple caveats (warning some nerdy content ahead):

Tunneling Effect

On the iPad the game runs at around 22 frames per second at its peak, not nearly as good as around 40 on a laptop, though it is enough for gameplay even if it can get choppy at times when there’s a lot of stuff whizzing around.

Unfortunately I’m only testing for collisions when the objects are rendered so it’s quite possible with lower framerates to have a bullet flying out of your ship first get rendered on one side of the asteroid you’re trying to pulverize and in the next frame get rendered on the other side letting it sail undamaged into your ship.  This is called the tunneling effect.  This is not a problem on a laptop or desktop because the framerates are high.  Since we’re sampling less per second (~22 verses ~40) a moving object is drawn less times though it’s traveling the same distance.  In other words if an asteroid travels from the top of the screen to the bottom of the screen in one second, on your computer it will most likely get drawn 40 times during that trip and on an iPad it will get drawn only 22 times leaving larger gaps between the drawings.  These larger gaps leave more of a chance for things to slip through and not collide when your eyes say they should have.

I’m considering augmenting the collision detection to remove the tunneling effect but it will need extra math which means slower framerates, at least initially.  It might be a better use of my time to pump framerates up.

Buggy Touch Events

There’s a bug with the iPad’s implementation of touch events in Javascript: if you have two fingers on the screen and raise one of them, a “touchend” event gets fired containing a reference to both fingers even though the second one hasn’t been raised.  If you then raise the second one, a “touchend” event is not fired.

It drove me nuts trying to figure this out and I haven’t been able to work around it.

What this means for the game is that using two fingers at the same time will get frustrating fast as the control you’re holding down will stop working periodically.  I suggest tapping for the best experience instead of holding.

Oh, this does not happen on the iPhone in case you were wondering, it works as expected! I have sent a bug report to apple (with a sample html page) and hopefully they already have a fix that’s not available yet or they will fix it for a future release.

On a side note, why aren’t Apple’s bug lists searchable by the public?  They must get reams of dupes.

In any case, let me know how it works!

Play It!

The source code is up on GitHub!

The Canvas element is super cool.  Basically all of the sprites in the game are simple paths defined by an array of points.  These points are translated, rotated and scaled based on their state at any given point in the game using the standard Canvas transformations.  Plus it gives it a nice retro feel.

Let me know what you think!

Here’s some cool links to things that helped me out with the game:

• Determining Whether A Point Is Inside A Complex Polygon.  Firefox does the wrong thing when it comes to isPointInPath(), the main Canvas method I used for collision detection; It doesn’t apply the current transformations before determining if there’s been a collision (and they won’t fix it for some reason).  I implemented this method to get around the problem but it works fast enough it could be used on all browsers.
• Metanet Software, the makers of the awesome flash game N, have made a couple of extremely useful tutorials on collision detection.  These describe some of the techniques I used in the game, in particular the grid based broad-phase they describe in their second tutorial.
• I used typeface.js ‘s convert tool to convert the awesome Vector Battle font into some JSON point data that could be easily used in the canvas.  Typeface.js is a neat library for easily embedding arbitrary fonts in the page.  On supported browsers it creates small canvas elements and renders the font inside based on the CSS.  I borrowed bits from the library to get the font rendering.

The LED Flowerpot!

This is a little project I built as a gift for the Wife for the combined 5-year being together anniversary/Valentine’s Day. I did most of the work on the weekends, soldering and gluing in the back yard out of sight from prying wifey eyes.

The circuit is not terribly complicated, it’s a modified version of Wilf Rigter’s Quad LED Fader circuit (specifically QLF6) I found on the BEAM robotics community server. It uses a 74C14 Schmitt triggered inverter chip as a bank of five oscillators fed into a LM339 quad comparator to generate four slow wave forms to drive four banks of LEDs. The 74C14 was provided by my good friend and chip dealer, Mr. Bunt. The major addition I made to the circuit was a voltage regulator to change its power supply to use a wall wart scavenged from a defunct answering machine that I haven’t seen in years. A 9-volt battery, its package being the ideal size to fit in the flowerpot base, unfortunately drained quickly with the number of LEDs I wanted to use.

Soldering the circuit itself onto the prototype board wasn’t much of a chore but as you can see, I do needs me some practice at circuit layout. The most irritating thing was wiring up all the LEDs. There’s 34 of the little buggers and each one had to be hot glued in and wired up to their brethren and the circuit. The result of which is the rat’s nest you see before you. I only have black wire, OK?

The prototype board rests on the sides of the pot, stuffed down below the “dirt’s” surface. The surface itself is made from a round cut from a cheap cutting board that was too crappy to actually use as a cutting board. Scraps left over from the same were hot glued to the sides of the pot to hold the surface at the desired depth.

The LEDs were hotglued into position before being wired up for action. First I had to make holes in the cutting board round to stuff the LEDs through. I originally intended to use a drill to create the holes, but quickly found that my smallest drill bit opened cavernous orifices compared to the width of the leads on your average LED. In the end I used a needle heated with a lighter to pierce the holes. Not only was the pierced diameter perfectly suited for LED leads, I found the process of holing plastic with a glowing-hot needle extremely satisfying for some strange reason. It did take a while though.

After the LEDs were in place and the circuit was working, the next step was to decorate the “dirt”. I used soil-colored foam turf I found at a model railroad store along with “scenic cement” to fix it in place. The added details were bits of bark and very small rocks I found in our real plant pots and about the yard; without them the scene didn’t look terribly realistic. Not that LEDs sprouting out of a fine soil-filled pot is firmly grounded in reality or anything.

When I turned from using a 9V battery fueling the circuit to a wall wart, I had intended to drill a hole in the side of the pot near the bottom to pass the power cable through. After a couple of attempts, the near hideous scratching of the pot’s green glaze and a paralyzing fear of causing it to shatter I decided to use the pot’s drain hole as mother natured intended. Its hole-ness beckoned to me. Besides the socket I had fit almost perfectly. Unfortunately the pot can’t rest on its base anymore; it requires I use a stand as you see in the first picture. The current stand is a opened leatherman knock-off because it was the first thing I had on hand that fit the bill. It was a poor knock-off so it makes a better stand anyway.

Since pictures don’t show off its glow-y goodness, here’s a video I took of it doing its thing (in the dark so you can see it better):

So where did I get the idea to do this? I was playing around with the circuit on a breadboard and a little garden of LEDs glowing and fading in and out when the wife came by and said “Ooooo! Mushrooms!”. The idea for the finished product was a short hop away from there.