A Pen by Max Huang.

index.html

<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js" type="text/javascript"></script>

<!-- obelisk.js -->
<!-- http://nosir.github.io/obelisk.js -->

<script src="https://rawgithub.com/nosir/obelisk.js/master/build/obelisk.js" type="text/javascript"></script>

<div class="title">■ pixelated by obelisk.js <a href="https://github.com/nosir/obelisk.js" target="_blank">https://github.com/nosir/obelisk.js</a></div>

<canvas id="canvas-demo" width="800" height="600"></canvas>

Pixel-Isometric-Cube-Generator.markdown

Pixel Isometric Cube Generator

A Pen by Max Huang on CodePen.

License.

script.js

var canvas = document.getElementById('canvas-demo');

var point = new obelisk.Point(200, 120);
var pixelView = new obelisk.PixelView(canvas, point);
var color = new obelisk.CubeColor().getByHorizontalColor(obelisk.ColorPattern.PINK);

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 first one
buildCube(con.xDimension, con.yDimension, con.zDimension, con.border);

style.css

.title, .title a {
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 13px;
  color: #BBB;
}