Wait/Loading Animation Hole
Site Map Feedback
Tutorial: ←Previous Index Next→		Button Noise Wait Wall

A spinning animation has been developed but it needs more shaping to look like a Wait/Loading animation. This tutorial will put a hole in the middle of the circle to make it look like a spinning ring.

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 but be aware that this page draws two canvases (the extra one shows the jaggies).

As with the outer edge of the circle, the radius needs defining (for this edge it will be called Hole) and there is no need to draw pixels within the hole so they can be clipped out:

  var Hole=Radius/3;
//if(Distance>Radius) continue; replace with:
  if((Distance>Radius)||(Distance<Hole)) continue;

This will again produce a hole with jaggies, but now they're around the inner edge:

The following picture is drawn, it is not a downloaded html image: This browser doesn't support the canvas element :-(

The antialiasing function must be used, this time with the direction of the slope reversed which is achieved by swapping the parameters: Antialias(Hole, Distance). That means there are now two calls to Antialias which both return Unsigned Unit Intervals so they can be mixed simply by multiplying them together.

var Foreground=Antialias(Distance, Radius) // Outer Edge
              *Antialias(Hole, Distance); // Inner Edge

That's a little closer - but now that there are techniques for antialiasing inner and outer edges it is time to split this ring in to two and have those two rings spinning in opposite directions! The next tutorial will start to look a lot more like a Wait/Loading animation...

• ←Previous
• Index
• Next→