HTML5 Canvas Twirl Sphere
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:
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!