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

The previous tutorials developed a reasonable Wait/Loading animation but only with monochrome shading. This tutorial introduces variable hue to the mix...exessively! It will be toned down in the next tutorial.

The following spectrum and animation are drawn, they are not downloaded html images:
0.0This browser doesn't support the canvas element :-(1.0

As with all of these tutorial pages, you can see how the images are drawn simply by viewing the source for this page on your browser.

The following routine is used to turn an Unsigned Unit Interval into a hue which passes like a rainbow from Red at zero through all the hues cycling back to Red at one. It sets an RGB value with the appropriate Unsigned Unit Intervals. Each of the Red,Green and Blue components vary with simplified clipped sine-waves over the range, mixing to produce each hue:

var Red  =1; // set by Hue2RGB(Hue)
var Green=1; // set by Hue2RGB(Hue)
var Blue =1; // set by Hue2RGB(Hue)
function Hue2RGB(Hue) { // Hue is in the range [0,1]
  if(Hue<1/3) {     //         _    _
    Red  =2-Hue*6;  //   Red: | \__/ |
    Green=Hue*6;    //        0 __   1
    Blue =0;        // Green: |/  \__|
  }else if(Hue<2/3) { //      0   __ 1
    Red  =0;        //  Blue: |__/  \|
    Green=4-Hue*6;  //        0 |  | 1
    Blue =Hue*6-2;  //         1/3 2/3
  }else{
    Red  =Hue*6-4;
    Green=0;
    Blue =(1-Hue)*6;
  }
  if(Red  >1) Red  =1;
  if(Green>1) Green=1;
  if(Blue >1) Blue =1;
}

The psychodelic animation is produced with different filters for the inner and outer rings. A radial spectrum is drawn for the background to show the antialiasing working in a demanding environment.

Hue2RGB((SpinJourney+Distance/c.width)%1); // Paint the background with a scrolling radial spectrum

The outer ring varies with SpinAngle, the inner ring varies with t.

Hue2RGB(Distance<Middle ? t : SpinJourney);

Now you have enough experience to play. SpinJourney, t and things like x/c.width Distance/c.width or y/c.height are great things to multiply random parts of the filters with just to see what happens! For example, try multiplying Foreground by t for an even more hypnotic look:

var Foreground=t*Antialias...

or multiply the values passed to Hue2RGB by any of the variables and see orbiting cresent moons, spirals and many other effects. Save the source for this page and play with it. Comment out the background pixel-drawing section to focus on the foreground and vice-versa.

This tutorial was an opportunity to get creative but to create a professional grade animation things need to be toned down and made more photo-realistic. The next tutorial uses a single hue and adds a photorealistic background.

• ←Previous
• Index
• Next→