Pure Javascript
Procedural
Wait/Loading Animation
Site Map Feedback

Tutorial Index:

←Previous Next→
To get back to this page,
hit the [Wait] button
in the menu bar on the right.
Up Button Noise Wait Wall

This is the first and last page of the fourteen Wait/Loading animation tutorial pages, presenting the finished animation with checkboxes that allow you to control elements of the animation independently as well as random extensions that demonstrate how simple variations in parameters make interesting differences to the result.

The tutorials demonstrate a drawing method well suited to embedded applications where the display is an area of memory and it is better to have a few lines of code than lots of graphic data.

The code for rendering the animation is a simple fast loop passing once over each pixel in the image. For each pixel, a single parameter is manipulated through several short stages which effect how that pixel is to be drawn.

This browser doesn't support the canvas element :-(







Try mixing different effects:







You should be able to find interesting variations like [Hard Leading Edge]+[Middle X]+[Middle Y]
or perhaps recognise some variations like [Half a Circle]+[No Background]+[Hard Leading Edge].
If you've finished the whole tutorial and got back here, scroll down further for a last bit of code, otherwise, hit the [Next] button and start a journey.

The Horizontal and Vertical Buttons (in the second drop-down options list) are distortions of the original shading. The ordinary Button uses an entirely different equation for the ambient colour and renders a smaller radius to create an edge around the circumference.

function GetButton(x,y) {
  var z=GetSphereZ(x,y);
  return 1.1*Unsigned((x*y-y*z-z*x)+(x*y+y*z+z*x)*(x*y-y*z+z*x))-0.1;
}


THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 'AS IS' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.