Isometric Cube Generator
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js" type="text/javascript"></script>
<script src="//nosir.github.io/obelisk.js/dist/obelisk.min.1.0.2.js" type="text/javascript"></script>
<canvas id="canvas" width="800" height="600"></canvas>
JS
var canvas = document.getElementById('canvas');
var point = new obelisk.Point(200, 120);
var pixelView = new obelisk.PixelView(canvas, point);
var color = new obelisk.CubeColor().getByHorizontalColor(obelisk.ColorPattern.RED);
function buildCube(xDimension, yDimension, zDimension, border) {
var dimension = new obelisk.CubeDimension(xDimension, yDimension, zDimension);
var cube = new obelisk.Cube(dimension, color, border);
pixelView.clear();
pixelView.renderObject(cube);
}
// control bar
var ControlBar = function () {
this.xDimension = 80;
this.yDimension = 120;
this.zDimension = 50;
this.border = true;
};
var con = new ControlBar();
var gui = new dat.GUI();
var conX = gui.add(con, 'xDimension', 6, 400).step(2);
conX.onChange(function (value) {
buildCube(value, con.yDimension, con.zDimension, con.border);
});
var conY = gui.add(con, 'yDimension', 6, 400).step(2);
conY.onChange(function (value) {
buildCube(con.xDimension, value, con.zDimension, con.border);
});
var conZ = gui.add(con, 'zDimension', 6, 400).step(2);
conZ.onChange(function (value) {
buildCube(con.xDimension, con.yDimension, value, con.border);
});
var conBorder = gui.add(con, 'border');
conBorder.onChange(function (value) {
buildCube(con.xDimension, con.yDimension, con.zDimension, value);
});
// build a cube
buildCube(con.xDimension, con.yDimension, con.zDimension, con.border);