Today, I would like to show you how to create an animated Twirl Sphere (I modified our previous 3D sphere, and I used same way of accessing pixels on the canvas). Our sphere goes around the canvas continuously. This example is a cross browser solution (because it uses html5).

In the end, you should get something like this:

Here are our demo and downloadable package:

Live Demo

download in package

---

Ok, please download our source files and let’s start coding !

---

Step 1. HTML

This is the markup of our page:

index.html

<div class="container">
    <canvas id="slideshow" width="1024" height="630"></canvas>
    <canvas id="obj" width="256" height="256"></canvas>
</div>

I prepared two canvas objects: the first for the resource image, and the second – for our Twirl sphere.

Step 2. CSS

css/main.css

.container {
    height: 630px;
    margin: 50px auto;
    position: relative;
    width: 1024px;
    z-index: 1;
}
#obj {
    position: absolute;
    z-index: 2;
}

We should keep our Sphere object above our main canvas.

Step 3. JS

And now, our main js script file:

js/script.js

var canvas, ctx;
var canvasObj, ctxObj;
var iDstW = 256;
var iDstH = 256;
var iXSpeed = 4;
var iYSpeed = 3;
var iLastX = iDstW / 2;
var iLastY = iDstH / 2;
var oImage;
var aMap = [];
var aMapT = [];
var aBitmap;

var mathTwirl = function(px,py) {
    var x = px - iDstW / 2;
    var y = py - iDstH / 2;
    var r = Math.sqrt(x * x + y * y);
    var maxR = iDstW / 2;
    if (r > maxR) return {'x':px, 'y':py, 't': 1};

    var a = Math.atan2(y, x);
    a -= 1 - r / maxR;

    var dx = Math.cos(a) * r;
    var dy = Math.sin(a) * r;

    return {'x': dx+iDstW/2, 'y': dy+iDstH/2, 't': 1.5}
}

window.onload = function(){

    // load background
    oImage = new Image();
    oImage.src="images/bg.jpg";
    oImage.onload = function () {

        // creating canvas and context objects
        canvas = document.getElementById('slideshow');
        ctx = canvas.getContext('2d');
        canvasObj = document.getElementById('obj');
        ctxObj = canvasObj.getContext('2d');

        // clear context
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        // and draw source image
        ctx.drawImage(oImage, 0, 0);

        aBitmap = ctx.getImageData(0, 0, iDstW, iDstH);
        for (var y = 0; y < iDstH; y++) {
            for (var x = 0; x < iDstW; x++) {
                var t = mathTwirl(x, y);
                aMap[(x + y * iDstH) * 2 + 0] = Math.max(Math.min(t.x, iDstW - 1), 0);
                aMap[(x + y * iDstH) * 2 + 1] = Math.max(Math.min(t.y, iDstH - 1), 0);
                aMapT[(x + y * iDstH)] = t.t;
            }
        }

        // begin updating scene
        updateScene();
    };

    function updateScene() {

        // update last coordinates
        iLastX = iLastX + iXSpeed;
        iLastY = iLastY + iYSpeed;

        // reverse speed
        if (iLastX + 1 > ctx.canvas.width - iDstW/2) {
            iXSpeed = -4;
        }
        if (iLastX - 1 < iDstW/2) {
            iXSpeed = 4;
        }
        if (iLastY + 1 > ctx.canvas.height - iDstH/2) {
            iYSpeed = -3;
        }
        if (iLastY - 1 < iDstH/2) {
            iYSpeed = 3;
        }

        // shifting of the second object
        canvasObj.style.left = iLastX - Math.floor(iDstW / 2) + 'px';
        canvasObj.style.top = iLastY - (Math.floor(iDstH / 2)) + 'px';

        // draw result Twirl sphere
        var aData = ctx.getImageData(iLastX - Math.ceil(iDstW / 2), iLastY - Math.ceil(iDstH / 2), iDstW, iDstH + 1);
        for (var j = 0; j < iDstH; j++) {
            for (var i = 0; i < iDstW; i++) {
                var u = aMap[(i + j * iDstH) * 2];
                var v = aMap[(i + j * iDstH) * 2 + 1];
                var t = aMapT[(i + j * iDstH)];
                var x = Math.floor(u);
                var y = Math.floor(v);
                var kx = u - x;
                var ky = v - y;
                for (var c = 0; c < 3; c++) {
                    aBitmap.data[(i + j * iDstH) * 4 + c] =
                      (aData.data[(x + y * iDstH) * 4 + c] * (1 - kx) + aData.data[((x + 1) + y * iDstH) * 4 + c] * kx) * (1-ky) * t +
                      (aData.data[(x + (y + 1) * iDstH) * 4 + c] * (1 - kx) + aData.data[((x + 1) + (y + 1) * iDstH) * 4 + c] * kx) * (ky) * t;
                }
            }
        }
        ctxObj.putImageData(aBitmap,0,0);

        // update timer
        setTimeout(updateScene, 16);
    }
};

During initialization, the script prepares two canvas objects and two contexts. After initialization, it loads the background image, and drasw it at our first context. Then it prepares a hash table for sphere transformations: aMap (using the new mathTwirl function). And, finally – it starts the timer that updates the main scene. This function (updateScene) updates the coordinates of our Sphere object, and draws the updated sphere at our second context.

---

Live Demo

download in package

---

Conclusion

I hope that today’s Twirl HTML5 Sphere lesson has been interesting for you. We have finished another nice html5 example. I will be glad to see your thanks and comments. Good luck!