HTML5 Canvas 3D Sphere

# HTML5 Canvas 3D Sphere

6 107930

HTML5 Canvas 3D Sphere

Our new tutorial tells us about creation of animated 3D Sphere (through direct access to pixels of canvas). The sphere itself is getting around the canvas continuously. This example should work in the most of modern browsers (like Firefox, Chrome, Safari and even in IE).

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

### Step 1. HTML

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

#### index.html

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

I prepared 2 canvas objects here: first one for source image, and the second one – to our Sphere.

### Step 2. CSS

#### css/main.css

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

We should put our Sphere object above our main canvas.

### Step 3. JS

#### 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 aBitmap;
var mathSphere = 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};
var a = Math.atan2(y, x);
var k = (r / maxR) * (r / maxR) * 0.5 + 0.5;
var dx = Math.cos(a) * r * k;
var dy = Math.sin(a) * r * k;
return {'x': dx + iDstW / 2, 'y': dy + iDstH / 2};
}
oImage = new Image();
oImage.src = 'images/bg.jpg';
// 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 = mathSphere(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);
}
}
// begin updating scene
};
// update last coordinates
iLastX = iLastX + iXSpeed;
iLastY = iLastY + iYSpeed;
// reverse speed
if (iLastX > ctx.canvas.width - iDstW/2) {
iXSpeed = -3;
}
if (iLastX < iDstW/2) {
iXSpeed = 3;
}
if (iLastY > ctx.canvas.height - iDstH/2) {
iYSpeed = -3;
}
if (iLastY < 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 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 x = Math.floor(u);
var y = Math.floor(v);
var kx = u - x;
var ky = v - y;
for (var c = 0; c < 4; 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) +
(aData.data[(x + (y + 1) * iDstH) * 4 + c] * (1 - kx) + aData.data[((x + 1) + (y + 1) * iDstH) * 4 + c] * kx) * (ky);
}
}
}
ctxObj.putImageData(aBitmap,0,0);
// update timer
}
};

During initialization, the script is preparing two canvas objects and two contexts. Then, it loads our main background image, and draw it at our first context. After it prepares hash table of sphere transformations: aMap. And, in the end – it starts timer which updates main scene. In this function (updateScene) we update coordinates of our Sphere object, and draw updated sphere at our second context.

### Conclusion

I hope that today’s 3D 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!

0 16670

0 28585