Wait/Loading Animation

Mixing
Site Map Feedback

Tutorial:

←Previous Index is Next→
Up Button Noise Wait Wall

The previous tutorial developed a lit sphere drawing which will be used as a background for the Wait/Loading animation in this tutorial.

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.

Here the background sphere is drawn first as it was in the previous tutorial, then the foreground is blended in a way that maintains the specular highlights in the background. The maximum value for the pixel RGB element wins:

      imgData.data[i+0]=Math.max(imgData.data[i+0], imgData.data[i+0]*Background+255*Shade.r*Foreground);
      imgData.data[i+1]=Math.max(imgData.data[i+1], imgData.data[i+1]*Background+255*Shade.g*Foreground);
      imgData.data[i+2]=Math.max(imgData.data[i+2], imgData.data[i+2]*Background+255*Shade.b*Foreground);

These tutorials end at the index which presents this animation with checkboxes which toggle different parts of the process on and off as well as a few 'effects' that draw interesting variations. Be sure to scroll down to the extra text at the bottom of the index describing some of the effects in more detail.