startSection('head'); ?> endSection(); $templ->startSection('content'); ?>

Experiment - HTML5 Canvas Nebula

*** THIS BROWSER DOES NOT SUPPORT THE CANVAS ELEMENT ***

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.

The nebula image
blog comments powered by Disqus endSection(); require_once('page2.template.php'); echo $templ->renderSection('main'); ?>