I have recently begun to study a couple different ideas to ease the pain of more complex animations using the HTML5 canvas element. Primarily, I have been focusing on layering – stacking individual transparent canvas elements – to achieve a robust effect and help manage individual objects without having to redraw the entire pane with every refresh. In the orbit example above, the center sphere and background are drawn statically on the bottommost layer, while the animation of the satellites is calculated and drawn on a second layer. By clicking on the demo, you can toggle the visibility of the animation layer. If you cannot see the animation at all, you may want to consider picking up a real web browser: Firefox or Chrome are always good options.
(more…)

For quite some time now, I’ve been trying to figure out the best way to get lines to “move” in AS3. By this, I don’t mean simple rotation and skewing of an existing line, but actually changing the line structure: length, thickness, etc. The challenge first became noteworthy when I was working on my Tower Defense code, and I wanted to have a laser-esque tower that would shoot constantly at an enemy rather than launching projectiles. In other words, I wanted the origin point of my segment to be stationary while the other end of the segment follows the targeted creep. Based on some old Java graphics experience I have, my first thought was to re-render (literally create and destroy) the Sprite object housing the laser on a timer or Event.ENTER_FRAME. However, this immediately proved to be a poor decision, since it caused a horrible flicker, just like a Java applet that was animating without double buffering. So, needless to say, I needed to dig a little deeper into the core of the AS3 Graphics object.
(more…)