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

The last tutorial created an animation but it will get slower and slower! This tutorial will explain why and show how to avoid this issue:

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.

If you leave the last page open on your web browser, it is likely to get noticably slower in just a couple of minutes. Javascript creates objects in memory and leaves them there until it decides it's time to tidy up... This has bad side-effects on timer routines where the creation of one simple object (many times a second) can soon lead to the system slowing down noticably. The Javascript system is spending all its time 'garbage collecting' instead of doing what is needed. To avoid excessive garbage collection, re-use objects rather than allocating them every frame, or don't use them at all!

These tutorials aim to draw over any existing background. The place where the background would be drawn was filled with normal javascript code to clear the background to white:

  ctx.rect(0,0,c.width,c.height);
  ctx.fillStyle="white";
  ctx.fill();

This code will make the system get slower over time: objects are being created! This isn't needed and a simple white background can be drawn using the same method as is being used to draw the foreground:

function DrawBackground() {
  imgData=ctx.getImageData(0,0,c.width,c.height);
  for(var y=c.height; y--;) { // Clear the background to white for this tutorial:
    for(var x=c.width; x--;) {
      var i=4*(c.width*y+x); // locate the point (x,y) in the imgData array
      imgData.data[i+0]=     // Red scaled up to byte size varying between [0,255]
      imgData.data[i+1]=     // Green
      imgData.data[i+2]=     // Blue
      imgData.data[i+3]=255; // Alpha (Opaque) = Overwrite the screen data
  } }
  ctx.putImageData(imgData,0,0);
}

If you have no separate background to draw, it will be more efficient to write the value of the background pixel where the pixel is currently being drawn by putting 255 as the original RGB component value:

      imgData.data[i+0]=255*Background+255*t*Foreground; // Red scaled up to byte size varying between [0,255]
      imgData.data[i+1]=255*Background+255*t*Foreground; // Green
      imgData.data[i+2]=255*Background+255*t*Foreground; // Blue

or more simply:

      imgData.data[i+0]=255*(Background+t*Foreground); // Red scaled up to byte size varying between [0,255]
      imgData.data[i+1]=255*(Background+t*Foreground); // Green
      imgData.data[i+2]=255*(Background+t*Foreground); // Blue

instead of:

      imgData.data[i+0]=imgData.data[i+0]*Background+255*t*Foreground; // Red scaled up to byte size varying between [0,255]
      imgData.data[i+1]=imgData.data[i+1]*Background+255*t*Foreground; // Green
      imgData.data[i+2]=imgData.data[i+2]*Background+255*t*Foreground; // Blue

There is now a good grounding for a Wait/Loading Animation, but they tend to be more complex than a simple 'spinning cone' The next tutorial will put a hole in the middle of the current animation with the intention of creating spinning rings later.

• ←Previous
• Index
• Next→