[obelisk.js] Tutorial - Part 5

HTML

<script src="http://nosir.github.io/obelisk.js/dist/obelisk.min.1.0.2.js"></script>
<canvas id="canvas-demo" width="1500" height="400"></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(200, 100);
var pixelView = new obelisk.PixelView(canvas, point);

var dms = 20;

// tall pyramid
var pyTallColor = new obelisk.PyramidColor().getByRightColor(obelisk.ColorPattern.YELLOW);
var pyTallDms = new obelisk.PyramidDimension(dms, false);
var pyTall = new obelisk.Pyramid(pyTallDms, pyTallColor);

// short pyramid
var pyColor = new obelisk.PyramidColor().getByRightColor(obelisk.ColorPattern.GRASS_GREEN);
var pyDms = new obelisk.PyramidDimension(dms);
var py = new obelisk.Pyramid(pyDms, pyColor);
var p3dPy = new obelisk.Point3D((dms - 2) * 2, dms - 2, 0);

// the other short pyramid
var py2Color = new obelisk.PyramidColor().getByRightColor(obelisk.ColorPattern.PINK);
var py2Dms = new obelisk.PyramidDimension(dms);
var py2 = new obelisk.Pyramid(py2Dms, py2Color);
var p3dPy2 = new obelisk.Point3D((dms - 2), (dms - 2) * 3, 0);

// create brick
var color = new obelisk.SideColor().getByInnerColor(obelisk.ColorPattern.GRAY);
var dimension = new obelisk.BrickDimension(dms, dms);
var brick = new obelisk.Brick(dimension, color);
for (var i = 0; i <= 5; i++) {
    for (var j = 0; j <= 5; j++) {
        var p3dBrick = new obelisk.Point3D(i * (dms - 2), j * (dms - 2), 0);
        pixelView.renderObject(brick, p3dBrick);
    }
}

pixelView.renderObject(pyTall);
pixelView.renderObject(py, p3dPy);
pixelView.renderObject(py2, p3dPy2);