Wait/Loading Animation

Direction
Site Map Feedback

Tutorial:

←Previous Index Next→
Up Button Noise Wait Wall

The spinning ring is starting to look like a Wait/Loading Animation but with the tools now developed to antialias inner and outer edges, the ring can be split in two. This tutorial will do that and have the two rings spin in opposite directions:

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.

Splitting the ring is done by defining a Middle radius where the split will be: var Middle=Hole*2; and extending the Antialias calls to have both an inner and outer edge at Middle. The decision about which edge is being Antialiased is simply a comparison with Middle, for example for an outer edge: Distance<Middle ? Middle : Radius

The only lines that are developed are the equations forming t and Foreground as shown: 

var t=Distance ? Unsigned(((Distance<Middle ? -dx : dx)*sdy+dy*sdx)/Distance) : 0.5; // unit Dot Product using (0,-1) as the second vector
var Foreground=Antialias(Distance, Distance<Middle ? Middle : Radius) // Outer Edge
              *Antialias(Distance<Middle ? Hole : Middle, Distance); // Inner Edge
but the result is very dramatic.

The dot product produces a gradient that spreads from zero to one around the circle, but the aesthetic effect of such a gradient isn't as good as a shorter line revolving. Shortening a gradient is done by selecting a fraction of either the top or bottom of the range and shading from zero to one within that fraction using the functions that were introduced earlier in these tutorials: 

function Lower(n,t) {return t>1/n ? 1 : t*n;} // if n=5, returns the lower fifth spread out to [0,1]
function Upper(n,t) {return t<(n-1)/n ? 0 : (t-(n-1)/n)*n;} // if n=5, returns the upper fifth spread out to [0,1]
A good-looking Wait/Loading animation is achieved with a third of a circle rotating: 
      t=Lower(3,t); // use the lower third and spread the gradient out over those values

In the next tutorial, the power of Unit Intervals will be used to vary the hue being drawn.