Build Monument Valley by Obelisk.js
How do I make an build monument valley by obelisk.js?
What is a build monument valley by obelisk.js? How do you make a build monument valley by obelisk.js? This script and codes were developed by Max Huang on 26 December 2022, Monday.
Build Monument Valley by Obelisk.js Previews
Build Monument Valley by Obelisk.js - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Build Monument Valley by Obelisk.js</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src="js/index.js"></script>
</body>
</html>Build Monument Valley by Obelisk.js - Script Codes CSS Codes
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;
}Build Monument Valley by Obelisk.js - Script Codes JS Codes
// 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();
| Developer | Max Huang |
| Username | nosir |
| Uploaded | December 26, 2022 |
| Rating | 4 |
| Size | 3,775 Kb |
| Views | 8,096 |
Do you need developer help for Build Monument Valley by Obelisk.js?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Max Huang (nosir) Script Codes
| Name | Size |
| Lissajous Particles | 3,201 Kb |
| Obelisk Test Case | 3,253 Kb |
| Pixel Isometric Flappy Bird | 3,836 Kb |
| Fireworks fountain | 3,155 Kb |
| Obelisk Test Case - Depth Sorting | 2,707 Kb |
| Pixel Isometric Cube Generator | 2,195 Kb |
| Segments mouse following | 2,909 Kb |
| Pixel Isometric Input Text Rendering | 3,248 Kb |
Create amazing web content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Social buttons | Flacu | 2,022 Kb |
| CSS Gem Badge | Orchard | 3,335 Kb |
| Shape Outside - Polygon | Stacy | 3,954 Kb |
| P5.js data visualization | Enginarslan | 2,233 Kb |
| CSS eye follow | Pedrocampos | 2,592 Kb |
| Box-sizing | Elad2412 | 1,572 Kb |
| A Pen by Sooba | Sooba | 2,516 Kb |
| Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
| Count up | Alanshortis | 2,391 Kb |
| AOR site logo | Thatbram | 2,527 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!