[obelisk.js] Tutorial - Part 4

HTML

<script src="http://nosir.github.io/obelisk.js/dist/obelisk.min.1.0.2.js"></script>
<canvas id="canvas-demo" width="800" height="800"></canvas>

CSS

#canvas-demo {
    background-color: #F4F4F4;
}

JavaScript

// get DOM or jQuery element
// like: $('#canvas-demo')
var canvas = document.getElementById('canvas-demo');

// create pixel view container in point
var point = new obelisk.Point(800, 800);
var pixelView = new obelisk.PixelView(canvas, point);

// build cubes
for (var i = 0; i <= 4; i++) {
    for (var j = 0; j <= 4; j++) {
        for (var k = 0; k <= 4; k++) {
            var p3d = new obelisk.Point3D(30 * i, 30 * j, (32 + 1) * k);
            var cubeDms = new obelisk.CubeDimension(30, 30, 32);
            var cubeColor = new obelisk.CubeColor().getByHorizontalColor(obelisk.ColorPattern.getRandomComfortableColor());
            var cube = new obelisk.Cube(cubeDms, cubeColor, false);
            pixelView.renderObject(cube, p3d);
        }
    }
}