[obelisk.js] demo - SideX & SideY

by nosir

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, 150);
var pixelView = new obelisk.PixelView(canvas, point);

// create brick
var colorX = new obelisk.SideColor().getByInnerColor(obelisk.ColorPattern.PINK);
var colorY = new obelisk.SideColor().getByInnerColor(obelisk.ColorPattern.GRASS_GREEN);
var dimensionX = new obelisk.SideXDimension(200, 100);
var dimensionY = new obelisk.SideYDimension(100, 100);
var sideX = new obelisk.SideX(dimensionX, colorX);
var sideY = new obelisk.SideY(dimensionY, colorY);

// render in view
pixelView.renderObject(sideX);

var p3DY = new obelisk.Point3D(0, 30, 0);
pixelView.renderObject(sideY, p3DY);