HTML5 canvas example 2

Canvas is a new HTML5 element. Actually it’s a rectangular area enabled for drawing with JavaScript. This post shows random animation based on geometry of line and parabola. It is possible to run processes in parallel where more than one animation will be displayed on canvas.

Start button will launch sequence of recursive calls and animation will be initiated. In this demo is possible to click on Start button many times to run animations in parallel processes. Every animation will pick up its own color so it will be easy to differentiate each process. The code below shows calculation for “horizontal” lines (lines with slope from 0 to 45 degrees):

/**
 * animation if line angle is from 0 to 45 degrees (horizontal)
 * x - current step
 * x2 - last step
 * m - line slope
 * c - line constant
 * k1 & k2 - needed for calculation 1 -> 0 -> 1 parameter (regarding current position)
 * d - direction (1 / -1)
 * color - line color
 */
animateX = function (x, x2, m, c, k1, k2, d, color) {
    // calculate y, parameter and dot size
    var y = m * x + c,
        k = (k1 - k2 * x) * (k1 - k2 * x),    // k goes 1 -> 0 -> 1
        s = size * (4 - k * 3),
        p;
    // set color and draw point (small rectangle)
    ctx.fillStyle = color;
    ctx.fillRect(x, y, s, s);
    // update step (slow at the end and fast in the middle)
    x = x + step * (4 - k * 3) * d;
    // if line is not finished then make recursive call
    if ((x < x2 && d > 0) || ((x > x2) && d < 0)) {
        // define delay (pause)
        p = pause * k;
        // recursive call for next point
        setTimeout(function () {
            animateX(x, x2, m, c, k1, k2, d, color);
        }, p);
    }
    // else start animation again from previous point and with the same color
    else if (run) {
        draw([x, y], color);
    }
};

In a moment when first animation is started, demo launches additional background process – a cleaner. In a setInterval, fade() function is called every 50ms to draw black rectangle with alpha component on canvas. Black rectangle is drawn in a full size and covers everything drawn in that moment. With this technic all animations will have fade out effect no matter of speed or their number.

To download source code (package contains three files: index.html, script.js and style.css), click on “Download” icon below post title. And finally, your browser should be ready for HTML5 to see how this example works. Try with Chrome 10+, FireFox 3.6+, Opera 11 …