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);