Wait/Loading Animation

Complete 2D
Site Map Feedback

Tutorial:

←Previous Index Next→
Up Button Noise Wait Wall

The previous tutorial demonstrated the manipulation of hue. This tutorial will use a hue chosen to complement this web site, to render a complete 2D Wait/Loading animation.

The following animation is drawn, it is not a downloaded html image: This browser doesn't support the canvas element :-( As with all of these tutorial pages, you can see how the image is drawn simply by viewing the source for this page on your browser.

An RGB value is declared to suit the site. t is mixed with Foreground (now simply controlling transparency) and the pixel is now blended according to the RGB weightings: 

var Shade={'Red' : 0xEE, 'Green' : 0xCC, 'Blue' : 0x66};
var t=Distance ? Unsigned(((Distance<Middle ? -dx : dx)*sdy+dy*sdx)/Distance) : 0.5; // unit Dot Product using (0,-1) as the second vector
t=Upper(t,3); // use the top third and spread the gradient out over those values
var Foreground=t*Antialias(Distance, Distance<Middle ? Middle : Radius) // Outer Edge
                *Antialias(Distance<Middle ? Hole : Middle, Distance); // Inner Edge
var Background=1-Foreground;
var i=4*(c.width*y+x); // locate the point (x,y) in the imgData array
imgData.data[i+0]=imgData.data[i+0]*Background+Shade.Red  *Foreground;
imgData.data[i+1]=imgData.data[i+1]*Background+Shade.Green*Foreground;
imgData.data[i+2]=imgData.data[i+2]*Background+Shade.Blue *Foreground;
Now the shaded area is from the white regions, this is now changed to the Upper function.

Since Shade is defined in byte values [0,255] there is no need for the 255 scaling when creating the pixel data, that scaling is now provided by the Shade values.
The Lower function was previously used to have short black sections revolving.

This produces a complete Wait/Loading Animation but it can be improved with a little 3D lighting... The next tutorial will develop a spherical background to mix with the existing animation.