obelisk.js/demo/advanced/zoom-view/main.js

JavaScript Library for Building Pixel Isometric Element with HTML5 Canvas

var canvas = document.getElementById('canvas-demo');
// translate context to center of canvas
var ctx = canvas.getContext('2d');


var point = new obelisk.Point(0, 0);
var pixelView = new obelisk.PixelView(canvas, point);

function buildCube(xDimension, yDimension, zDimension, border, pixelScale) {
    ctx.save();

    var color = new obelisk.CubeColor().getByHorizontalColor(obelisk.ColorPattern.GRASS_GREEN);
    var dimension = new obelisk.CubeDimension(xDimension, yDimension, zDimension);
    var cube = new obelisk.Cube(dimension, color, border);

    pixelView.clear();

    ctx.translate(Math.floor(canvas.width / 2), Math.floor(canvas.height / 2));
    ctx.scale(pixelScale, pixelScale);


    pixelView.renderObject(cube);
    ctx.restore();
}

// control bar
var ControlBar = function () {
    this.pixelScale = 1;
    this.xDimension = 80;
    this.yDimension = 120;
    this.zDimension = 50;
    this.border = true;
};

var con = new ControlBar();
var gui = new dat.GUI();

var conScale = gui.add(con, 'pixelScale', 1, 8).step(1);
conScale.onChange(function (value) {
    buildCube(con.xDimension, con.yDimension, con.zDimension, con.border, value);
});

var conX = gui.add(con, 'xDimension', 6, 400).step(2);
conX.onChange(function (value) {
    buildCube(value, con.yDimension, con.zDimension, con.border, con.pixelScale);
});

var conY = gui.add(con, 'yDimension', 6, 400).step(2);
conY.onChange(function (value) {
    buildCube(con.xDimension, value, con.zDimension, con.border, con.pixelScale);
});

var conZ = gui.add(con, 'zDimension', 6, 400).step(2);
conZ.onChange(function (value) {
    buildCube(con.xDimension, con.yDimension, value, con.border, con.pixelScale);
});

var conBorder = gui.add(con, 'border');
conBorder.onChange(function (value) {
    buildCube(con.xDimension, con.yDimension, con.zDimension, value, con.pixelScale);
});

buildCube(con.xDimension, con.yDimension, con.zDimension, con.border, con.pixelScale);