Game-off: Day 22

Sadly I haven't heard anything from our artist at all, so I'm assuming we won't be getting any help from the art department on this project. That said, I decided to start taking the visuals a little more seriously (as if that wasn't obvious from my last few posts!) I first changed the "Player" rectangle to a nice deep indigo purple. But that wasn't enough.

Then I began to investigate options for drawing ellipses with the canvas API. (Note: context2d is getting ellipse soon, but no user agents support it yet.) I found a relevant post on StackExchange which linked to this interesting document: http://www.tinaja.com/glib/ellipse4.pdf The post also included some code that I sniped. ;)

With an ellipse function available, I started to animate it. First by adding a slight rocking motion with rotation, and second by stretching the ellipse slightly vertically, which gives it the appearance of a circle laying on its side in an unstable gyroscopic spin. Then I added a line that spans the diameter of the circle, to provide some context for the rotation. A small dome cap and "hover beam" complete the look of an animated vector flying saucer from the 1950's!

I also adjusted the colors of the dangling poly, and rope. The rope also looks better with a bit of stroke. Dimming the lights also adds to the ambience, so that's a nice touch.

Finally, it still runs acceptably well on iPhone 4S!

Notably, the flying saucer does not cast a shadow. ;) That's because circle shapes are not yet supported for shadow projection. These should be a lot easier than polygons, because I just have to calculate the tangent lines from the circle shape. And I already do that for the lightbulbs! (Also needs support for line segments for shadow projection.)