Experiment - HTML5 Canvas Nebula
How it Works
This is a simple demonstration of a nebula effect using the HTML5 Canvas element. The effect is created by layering three images, derived from a larger single bitmap source, that fade in and out while increasing in scale. The non-repeating nature of the effect is created by having a larger bitmap than the view area and choosing a random texture offset.
Overall, I think the effect is quite nice, although I've probably spoilt it by describing how it works!
Performance
Drawing large, scaled and transparent bitmap images is never going to be conducive to fast performance on a software renderer like Canvas. In this demo, I cheat by generating the animation onto a smaller hidden Canvas, then copying this canvas onto the large visible one. Because there is no sharp detail, the scaling up looks reasonable. Roll-on hardware accelerated Canvas.
The Image
As you can see, the nebula image is a fine example of awful programmer graphics, but because its parts are always drawn as semi-transparent, the garish colours and detail blend nicely.
blog comments powered by Disqus
