Wait/Loading Animation Direction 




Tutorial:



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: 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 theAntialias
calls to have both an inner and outer edge atMiddle
. The decision about which edge is being Antialiased is simply a comparison withMiddle
, for example for an outer edge:Distance<Middle ? Middle : Radius
The only lines that are developed are the equations forming
t
andForeground
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 Edgebut 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<(n1)/n ? 0 : (t(n1)/n)*n;} // if n=5, returns the upper fifth spread out to [0,1]A goodlooking 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.