HTML5 Canvas Twirl Sphere - Script Tutorials

Today, I would like to tell about creation of animated Twirl Sphere (I modified our previous 3D sphere, and, I used same way of accessing pixels of canvas). Our sphere goes around the canvas continuously. This example is cross browser solution (because of html5).

In the result, you should to get something like this:

Here are our demo and downloadable package:

Contents

Step 1. HTML
index.html
Step 2. CSS
css/main.css
Step 3. JS
js/script.js
Conclusion

Live Demo

download in package

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

Step 1. HTML

This is markup of our result page. Here it is:

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: first one for resource image, and second one – 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. Here it is:

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 is preparing two canvas objects and two contexts. After, it loads background image, and draw it at our first context. After it prepares hash table of sphere transformations: aMap (with using of new mathTwirl function). And, in the end – it starts timer which updates the main scene. This function (updateScene) updates coordinates of our Sphere object, and draws 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 done another one nice html5 example. I will be glad to see your thanks and comments. Good luck!