HTML5 Canvas Twirl Sphere

HTML5 Canvas Twirl Sphere

0 12390
HTML5 Canvas Twirl Sphere

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:

HTML5 Canvas Twirl Sphere

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!

SIMILAR ARTICLES


NO COMMENTS

Leave a Reply