<script src="//nosir.github.io/obelisk.js/dist/obelisk.min.1.0.2.js" type="text/javascript"></script>

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

<div class="title">■ build by obelisk.js <a href="//github.com/nosir/obelisk.js" target="_blank">https://github.com/nosir/obelisk.js</a><span class="uncle">■ scene: <a href="http://www.monumentvalleygame.com/">Monument Valley</a></span></div>

<canvas id="canvas-demo" width="1200" height="600" style=""></canvas>
body, canvas {
  margin: 0;
  background-color: #2dc2b7;
}
.title {
  margin: 3px 0 0 10px;
}
.title, .title a {
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 13px;
  color: #333333;
}
.title .uncle {
  margin-left: 10px;
}
// control bar
var ControlBar = function () {
    this.size = 24;
};

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

var conSize = gui.add(con, 'size', 24, 50).step(2);
conSize.onChange(function () {
    pixelView.clear();
    draw();
});

// canvas
var canvas = document.getElementById('canvas-demo');
var point = new obelisk.Point(300, 400);
var pixelView = new obelisk.PixelView(canvas, point);
var lakeLightbricks = [];
var lotus = [];

// lakeLight
function buildLakeLight() {
    var size = con.size;

    if (lakeLightbricks.length === 0) {
        var color = new obelisk.SideColor().getByInnerColor(0xfdfcfb);

        for (var x = -10; x < 20; x++) {
            for (var y = -10; y < 20; y++) {
                if (Math.random() < 0.02) {
                    var num = Math.floor(con.size / 2.5 * Math.random());
                    var brickSize = Math.max(6, (num + num % 2));
                    var dimension = new obelisk.BrickDimension(brickSize, brickSize);
                    var brick = new obelisk.Brick(dimension, color, false);
                    var p3d = new obelisk.Point3D((size - 2) * x, (size - 2) * y, 0);
                    brick.x = x;
                    brick.y = y;
                    lakeLightbricks.push(brick);
                    pixelView.renderObject(brick, p3d);
                }
            }
        }
    } else {
        for (var i = 0; i < lakeLightbricks.length; i++) {
            var brick = lakeLightbricks[i];
            var p3d = new obelisk.Point3D((size - 2) * brick.x, (size - 2) * brick.y, 0);
            pixelView.renderObject(brick, p3d);
        }
    }
}

// bottomShadow
function buildBottomShadow() {
    var size = con.size;
    var color = new obelisk.CubeColor(0, 0, 0x3c989c, 0x3c989c, 0x3c989c);
    var dimension = new obelisk.CubeDimension(size, size, size / 2);
    var dimension2 = new obelisk.CubeDimension(size, size, size * 2);
    var dimension3 = new obelisk.CubeDimension((size - 2) * 7 + 2, (size - 2) * 7 + 2, size * 13);
    var cube = new obelisk.Cube(dimension, color, false);
    var cube2 = new obelisk.Cube(dimension2, color, false);
    var cube3 = new obelisk.Cube(dimension3, color, false);

    for (var x = 0; x < 9; x++) {
        for (var y = 0; y < 9; y++) {
            if (x >= 3 && x <= 5 && y >= 3 && y <= 5) {
                var p3d2 = new obelisk.Point3D((size - 2) * x, (size - 2) * y, -size * 2);
                pixelView.renderObject(cube2, p3d2);
            }

            if (x === 0 || x === 8 || y === 0 || y === 8) {
                var p3d = new obelisk.Point3D((size - 2) * x, (size - 2) * y, -size / 2);
                pixelView.renderObject(cube, p3d);
            }
        }
    }

    var p3d = new obelisk.Point3D((size - 2) * 1, (size - 2) * 1, -size * 16);
    pixelView.renderObject(cube3, p3d);
}

// bottom
function buildBottom() {
    var size = con.size;
    var color = new obelisk.CubeColor().getByHorizontalColor(0xd9e0c8);
    var dimension = new obelisk.CubeDimension(size, size, size / 2);
    var dimension2 = new obelisk.CubeDimension(size, size, Math.floor(size * 3 / 2));
    var cube = new obelisk.Cube(dimension, color, false);
    var cube2 = new obelisk.Cube(dimension2, color, false);

    for (var x = 0; x < 9; x++) {
        for (var y = 0; y < 9; y++) {
            if (x === 0 || x === 8 || y === 0 || y === 8) {
                var p3d = new obelisk.Point3D((size - 2) * x, (size - 2) * y, 0);
                pixelView.renderObject(cube, p3d);
            }

            if (x >= 3 && x <= 5 && y >= 3 && y <= 5) {
                var p3d2 = new obelisk.Point3D((size - 2) * x, (size - 2) * y, 0);
                pixelView.renderObject(cube2, p3d2);
            }
        }
    }
}

// poll
function buildPoll() {
    var size = con.size;
    var color = new obelisk.CubeColor().getByHorizontalColor(0xffb0c0);
    var dimension = new obelisk.CubeDimension(size, size, Math.floor(size * 2));
    var cube = new obelisk.Cube(dimension, color, false);

    for (var x = 0; x < 9; x++) {
        for (var y = 0; y < 9; y++) {
            if (x >= 2 && x <= 6 && y >= 2 && y <= 6) {
                var p3d = new obelisk.Point3D((size - 2) * x, (size - 2) * y, Math.floor(size * 3 / 2));
                pixelView.renderObject(cube, p3d);
            }
        }
    }
}

// tower
function buildTower() {
    var size = con.size;
    var color = new obelisk.CubeColor(0, 0, 0xad977f, 0xd1cbb0, 0xd7ddc3);
    var color2 = new obelisk.CubeColor(0, 0, 0x87705a, 0xd1cbb0, 0xd7ddc3);
    var color3 = new obelisk.CubeColor(0, 0, 0x87705a, 0xf8adba, 0xd7ddc3);
    var dimension = new obelisk.CubeDimension(size, size, size);
    var cube = new obelisk.Cube(dimension, color, false);
    var cube2 = new obelisk.Cube(dimension, color2, false);
    var cube3 = new obelisk.Cube(dimension, color3, false);

    for (var x = 1; x < 8; x++) {
        var p3d = new obelisk.Point3D((size - 2) * x, 0, Math.floor(size * 3.5) + size * 9);
        pixelView.renderObject(cube3, p3d);
    }

    for (var x = 1; x < 8; x++) {
        for (var y = 1; y < 8; y++) {
            for (var z = 0; z < 10; z++) {
                if (!(z > 3 && z !== 9 && x === 7 && y === 2)) {
                    if (z === 0 || (z > 0 && (x <= 2 || y <= 2 ))) {
                        var p3d = new obelisk.Point3D((size - 2) * x, (size - 2) * y, Math.floor(size * 3.5) + size * z);
                        if (y <= 2) {
                            pixelView.renderObject(cube2, p3d);
                        } else {
                            pixelView.renderObject(cube, p3d);
                        }
                    }
                }
            }
        }
    }

}

// pool
function buildPool() {
    var size = con.size;
    var colors = [
        new obelisk.SideColor().getByInnerColor(0x53ebe7),
        new obelisk.SideColor().getByInnerColor(0x7ff6f5),
        new obelisk.SideColor().getByInnerColor(0xc2ffff),
        new obelisk.SideColor().getByInnerColor(0xffffff)
    ];
    for (var i = 0; i < 4; i++) {
        var dimension = new obelisk.BrickDimension((size - 2) * (5 - i), (size - 2) * (5 - i));
        var p3d = new obelisk.Point3D((size - 2) * 2, (size - 2) * (2 + i), Math.floor(size * 3.5) + 2);
        var brick = new obelisk.Brick(dimension, colors[i], false);
        pixelView.renderObject(brick, p3d);
    }
}

// step
function buildStep() {
    var size = con.size;
    var color = new obelisk.CubeColor().getByHorizontalColor(0xc5c89f);
    var dimension = new obelisk.CubeDimension(size, size, Math.floor(size / 4));
    var cube = new obelisk.Cube(dimension, color, false);
    var p3d = new obelisk.Point3D((size - 2) * 2, (size - 2) * 2, Math.ceil(size * 12.25) + 2);
    pixelView.renderObject(cube, p3d);

    var num = Math.floor(size / 4);
    var dimensionStep = new obelisk.CubeDimension(size, num + num % 2, Math.floor(size / 4));
    var cubeStep = new obelisk.Cube(dimensionStep, color, false);
    for (var i = 0; i < 15; i++) {
        var py = (size - 2) * 3 + Math.floor(size / 4 * i);
        var p3d = new obelisk.Point3D((size - 2) * 2, (py + py % 2), Math.ceil(size * 12.25) - Math.floor(size / 4 * (i + 1)));
        pixelView.renderObject(cubeStep, p3d);
    }
}

// side
function buildSide() {
    var size = con.size;
    var color = new obelisk.CubeColor(0, 0, 0xcd8086, 0xf8adba, 0xd9e0c7);
    var color2 = new obelisk.CubeColor(0, 0, 0x87705a, 0xd1cbb0, 0xd7ddc3);

    var dimensionSmall = new obelisk.CubeDimension(size, size, Math.floor(size / 4));
    var cube = new obelisk.Cube(dimensionSmall, color, false);
    var p3d = new obelisk.Point3D((size - 2) * 7, (size - 2) * 6, size * 3.75 + Math.floor(size * 3.5));
    pixelView.renderObject(cube, p3d);

    var dimension = new obelisk.CubeDimension(size, size, size);
    var cube = new obelisk.Cube(dimension, color, false);
    var pos = [
        [8, 6, 3],
        [8, 5, 3],
        [8, 4, 3],
        [8, 3, 3]
    ];
    for (var i = pos.length - 1; i >= 0; i--) {
        var p = pos[i];
        var p3d = new obelisk.Point3D((size - 2) * p[0], (size - 2) * p[1], size * p[2] + Math.floor(size * 3.5));
        pixelView.renderObject(cube, p3d);
    }

    var color = new obelisk.CubeColor().getByHorizontalColor(0xd9e0c7);
    var cube = new obelisk.Cube(dimension, color, false);
    var pos = [
        [5, 3, 7],
        [5, 3, 8],
        [5, 3, 9],
        [6, 3, 9],
        [7, 3, 9],
        [6, 3, 7],
        [7, 3, 7],
        [8, 3, 4],
        [8, 3, 5],
        [8, 3, 6],
        [8, 3, 7]
    ];
    for (var i = 0; i < pos.length; i++) {
        var p = pos[i];
        var p3d = new obelisk.Point3D((size - 2) * p[0], (size - 2) * p[1], size * p[2] + Math.floor(size * 3.5));
        pixelView.renderObject(cube, p3d);
    }

    var cube = new obelisk.Cube(dimension, color2, false);
    var pos = [
        [3, 1, 10],
        [3, 1, 11],
        [3, 1, 12],
        [3, 1, 13]
    ];
    for (var i = 0; i < pos.length; i++) {
        var p = pos[i];
        var p3d = new obelisk.Point3D((size - 2) * p[0], (size - 2) * p[1], size * p[2] + Math.floor(size * 3.5));
        pixelView.renderObject(cube, p3d);
    }

    var color = new obelisk.CubeColor(0, 0, 0xad977f, 0xd1cbb0, 0xd7ddc3);

    var cube = new obelisk.Cube(dimensionSmall, color, false);
    var p3d = new obelisk.Point3D((size - 2) * 7, (size - 2) * 1, size * 12.75 + Math.floor(size * 3.5));
    pixelView.renderObject(cube, p3d);

    var cube = new obelisk.Cube(dimension, color, false);
    var pos = [
        [5, 2, 10],
        [5, 2, 11],
        [6, 2, 10],
        [6, 2, 11],
        [2, 7, 10],
        [2, 7, 11],
        [2, 2, 12],
        [2, 3, 12],
        [2, 4, 12],
        [2, 5, 12],
        [2, 6, 12],
        [2, 7, 12],
        [3, 2, 12],
        [4, 2, 12],
        [5, 2, 12],
        [6, 2, 12],
        [7, 2, 12],
        [3, 6, 11],
        [3, 7, 11],
        [3, 6, 12],
        [2, 7, 12],
        [3, 7, 12],
        [2, 7, 13],
        [2, 7, 14]

    ];
    for (var i = 0; i < pos.length; i++) {
        var p = pos[i];
        var p3d = new obelisk.Point3D((size - 2) * p[0], (size - 2) * p[1], size * p[2] + Math.floor(size * 3.5));
        pixelView.renderObject(cube, p3d);
    }

    var dimension = new obelisk.PyramidDimension(size);
    var color = new obelisk.PyramidColor(0, 0, 0xd78d96, 0xfbb3c3);
    var py = new obelisk.Pyramid(dimension, color, false);
    var p3d = new obelisk.Point3D((size - 2) * 2, (size - 2) * 7, size * 15 + Math.floor(size * 3.5));
    pixelView.renderObject(py, p3d);
    var p3d = new obelisk.Point3D((size - 2) * 7, (size - 2) * 2, size * 13 + Math.floor(size * 3.5));
    pixelView.renderObject(py, p3d);
}

function buildSpring() {
    var size = con.size;
    // spring
    var color = new obelisk.SideColor(0, 0x998fded8);
    var dimension = new obelisk.SideYDimension(size, size * 11);
    var side = new obelisk.SideY(dimension, color, false);
    var p3d = new obelisk.Point3D((size - 2) * 4, (size - 2) * 6.5, size * 1 + Math.floor(size * 3.5));
    pixelView.renderObject(side, p3d);

    var color = new obelisk.SideColor(0, 0x9924cabe);
    var dimension = new obelisk.SideYDimension(size - 8, size * 11);
    var side = new obelisk.SideY(dimension, color, false);
    var p3d = new obelisk.Point3D((size - 2) * 4, (size - 2) * 6.5 + 4, size * 1 + Math.floor(size * 3.5));
    pixelView.renderObject(side, p3d);

    var color = new obelisk.SideColor(0, 0x998fded8);
    var dimension = new obelisk.BrickDimension(6, size);
    var side = new obelisk.Brick(dimension, color, false);
    var p3d = new obelisk.Point3D((size - 2) * 4 - 4, (size - 2) * 6.5, size * 12 + Math.floor(size * 3.5));
    pixelView.renderObject(side, p3d);

    var color = new obelisk.SideColor(0, 0x9924cabe);
    var dimension = new obelisk.BrickDimension(6, size - 8);
    var side = new obelisk.Brick(dimension, color, false);
    var p3d = new obelisk.Point3D((size - 2) * 4 - 4, (size - 2) * 6.5 + 4, size * 12 + Math.floor(size * 3.5));
    pixelView.renderObject(side, p3d);

    // step front
    var color = new obelisk.CubeColor(0, 0, 0xcd8086, 0xf8adba, 0xd9e0c7);
    var dimension = new obelisk.CubeDimension(size, size, size);
    var cube = new obelisk.Cube(dimension, color, false);
    var p3d = new obelisk.Point3D((size - 2) * 2, (size - 2) * 7, Math.ceil(size * 7.5));
    pixelView.renderObject(cube, p3d);
    var dimension = new obelisk.CubeDimension(size, size, Math.floor(size / 4));
    var cube = new obelisk.Cube(dimension, color, false);
    var p3d = new obelisk.Point3D((size - 2) * 3, (size - 2) * 7, Math.ceil(size * 8.25));
    pixelView.renderObject(cube, p3d);
}

function draw() {
    buildLakeLight();
    buildBottomShadow();
    buildBottom();
    buildPoll();
    buildTower();
    buildPool();
    buildStep();
    buildSide();
    buildSpring();
}

draw();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.