<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();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.