HTML5 Canvas 3D Sphere - Script Tutorials

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:

HTML5 Canvas 3D Sphere

Here are our demo and downloadable package:

Live Demo

download in package

Ok, download the source files and lets start coding !

Step 1. HTML

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

index.html

1
<div class="container">

2
    <canvas id="slideshow" width="1024" height="631"></canvas>

3
    <canvas id="obj" width="256" height="256"></canvas>

4
</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

01
.container {

02
    height: 631px;

03
    margin: 50px auto;

04
    position: relative;

05
    width: 1024px;

06
    z-index: 1;

07
}

08
#obj {

09
    position: absolute;

10
    z-index: 2;

11
}

We should put our Sphere object above our main canvas.

Step 3. JS

js/script.js

01
var canvas, ctx;

02
var canvasObj, ctxObj;

03
var iDstW = 256;

04
var iDstH = 256;

05
var iXSpeed = 4;

06
var iYSpeed = 3;

07
var iLastX = iDstW / 2;

08
var iLastY = iDstH / 2;

09
var oImage;

10
var aMap = [];

11
var aBitmap;

12
var mathSphere = function(px, py) {

13
    var x = px - iDstW / 2;

14
    var y = py - iDstH / 2;

15
    var r = Math.sqrt(x * x + y * y);

16
    var maxR = iDstW / 2;

17
    if (r > maxR) return {'x':px, 'y':py};

18
    var a = Math.atan2(y, x);

19
    var k = (r / maxR) * (r / maxR) * 0.5 + 0.5;

20
    var dx = Math.cos(a) * r * k;

21
    var dy = Math.sin(a) * r * k;

22
    return {'x': dx + iDstW / 2, 'y': dy + iDstH / 2};

23
}

24
window.onload = function(){

25
    // load background

26
    oImage = new Image();

27
    oImage.src = 'images/bg.jpg';

28
    oImage.onload = function () {

29
        // creating canvas and context objects

30
        canvas = document.getElementById('slideshow');

31
        ctx = canvas.getContext('2d');

32
        canvasObj = document.getElementById('obj');

33
        ctxObj = canvasObj.getContext('2d');

34
        // clear context

35
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

36
        // and draw source image

37
        ctx.drawImage(oImage, 0, 0);

38
        aBitmap = ctx.getImageData(0, 0, iDstW, iDstH);

39
        for (var y = 0; y < iDstH; y++) {

40
            for (var x = 0; x < iDstW; x++) {

41
                var t = mathSphere(x, y);

42
                aMap[(x + y * iDstH) * 2 + 0] = Math.max(Math.min(t.x, iDstW - 1), 0);

43
                aMap[(x + y * iDstH) * 2 + 1] = Math.max(Math.min(t.y, iDstH - 1), 0);

44
            }

45
        }

46
        // begin updating scene

47
        updateScene();

48
    };

49
    function updateScene() {

50
        // update last coordinates

51
        iLastX = iLastX + iXSpeed;

52
        iLastY = iLastY + iYSpeed;

53
        // reverse speed

54
        if (iLastX > ctx.canvas.width - iDstW/2) {

55
            iXSpeed = -3;

56
        }

57
        if (iLastX < iDstW/2) {

58
            iXSpeed = 3;

59
        }

60
        if (iLastY > ctx.canvas.height - iDstH/2) {

61
            iYSpeed = -3;

62
        }

63
        if (iLastY < iDstH/2) {

64
            iYSpeed = 3;

65
        }

66
        // shifting of the second object

67
        canvasObj.style.left = iLastX - Math.floor(iDstW / 2) + 'px';

68
        canvasObj.style.top = iLastY - (Math.floor(iDstH / 2)) + 'px';

69
        // draw result Sphere

70
        var aData = ctx.getImageData(iLastX - Math.ceil(iDstW / 2), iLastY - Math.ceil(iDstH / 2), iDstW, iDstH + 1);

71
        for (var j = 0; j < iDstH; j++) {

72
            for (var i = 0; i < iDstW; i++) {

73
                var u = aMap[(i + j * iDstH) * 2];

74
                var v = aMap[(i + j * iDstH) * 2 + 1];

75
                var x = Math.floor(u);

76
                var y = Math.floor(v);

77
                var kx = u - x;

78
                var ky = v - y;

79
                for (var c = 0; c < 4; c++) {

80
                    aBitmap.data[(i + j * iDstH) * 4 + c] =

81
                      (aData.data[(x + y * iDstH) * 4 + c] * (1 - kx) + aData.data[((x + 1) + y * iDstH) * 4 + c] * kx) * (1-ky) +

82
                      (aData.data[(x + (y + 1) * iDstH) * 4 + c] * (1 - kx) + aData.data[((x + 1) + (y + 1) * iDstH) * 4 + c] * kx) * (ky);

83
                }

84
            }

85
        }

86
        ctxObj.putImageData(aBitmap,0,0);

87
        // update timer

88
        setTimeout(updateScene, 16);

89
    }

90
};

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.

Live Demo

download in package

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!