Obelisk Test Case - Depth Sorting

Developer
Max Huang
Size
2,707 Kb
Views
6,072
  1. Obelisk Test Case - Depth Sorting Previews
  2. Obelisk Test Case - Depth Sorting HTML Codes
  3. Obelisk Test Case - Depth Sorting CSS Codes
  4. Obelisk Test Case - Depth Sorting JS Codes

How do I make an obelisk test case - depth sorting?

Https://github.com/nosir/obelisk.js/issues/3. What is a obelisk test case - depth sorting? How do you make a obelisk test case - depth sorting? This script and codes were developed by Max Huang on 26 December 2022, Monday.

Obelisk Test Case - Depth Sorting Previews
IQ Test

Obelisk Test Case - Depth Sorting - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Obelisk Test Case - Depth Sorting</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">Press any key to add cubes and see the depth sorting</div>
<canvas id="view" width="1500" height="600"></canvas> <script src="js/index.js"></script>
</body>
</html>

Obelisk Test Case - Depth Sorting - Script Codes CSS Codes

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

Obelisk Test Case - Depth Sorting - Script Codes JS Codes

Array.prototype.contains = function (element) { for (var i = 0; i < this.length; i++) { if (this[i] === element) { return true; } } return false;
};
var size = 16;
var roomX = 10;
var roomY = 10;
var roomZ = 5;
// get canvas element from DOM
var canvas = document.getElementById('view');
// create pixel isometric 2.5D axis zero point
var point = new obelisk.Point(230, 80);
// canvas could be either DOM or jQuery element
var pixelView = new obelisk.PixelView(canvas, point);
var color = new obelisk.SideColor().getByInnerColor(obelisk.ColorPattern.BLUE);
var dimension = new obelisk.BrickDimension(size, size);
var brick = new obelisk.Brick(dimension, color);
for (var y = 0; y < roomY; y++) { for (var x = 0; x < roomX; x++) { var p3d = new obelisk.Point3D(x * (size + 2), y * (size + 2), 0); pixelView.renderObject(brick, p3d); }
}
// create cube dimension and color instance
var dimension = new obelisk.CubeDimension(size, size, size);
var gray = obelisk.ColorPattern.GRAY;
var color = new obelisk.CubeColor().getByHorizontalColor(gray);
// build cube with dimension and color instance
var cube = new obelisk.Cube(dimension, color, false);
var p3d = new obelisk.Point3D(0, 0, 0);
// render primitive into view
pixelView.renderObject(cube, p3d);
var cubes = [];
var cubesDepth = [];
document.addEventListener('keypress', function (e) { var transparentCube = new obelisk.Cube(dimension, new obelisk.CubeColor().getByHorizontalColor(obelisk.ColorPattern.getRandomComfortableColor()), false); // cube properties var xPos = Math.floor(Math.random() * roomX); var yPos = Math.floor(Math.random() * roomY); var depthIndex = yPos * roomX + xPos; transparentCube.xPos = xPos; transparentCube.yPos = yPos; transparentCube.zPos = 0; for (var i = 0; i < cubes.length; i++) { // place occupied if (cubes[i].depthIndex === depthIndex) { // top up z for (var j = 1; j < roomZ; j++) { if (!cubesDepth.contains(j * roomX * roomY + depthIndex)) { transparentCube.zPos = j; depthIndex = j * roomX * roomY + depthIndex; break; } } // reach the top of the room if (j === roomZ) { return; } } } transparentCube.depthIndex = depthIndex; cubes.push(transparentCube); cubesDepth.push(depthIndex); // sort the cube array by real depth cubes.sort(function (x, y) { return x.depthIndex - y.depthIndex; }); // render the queue for (var i = 0; i < cubes.length; i++) { var p3d1 = new obelisk.Point3D(cubes[i].xPos * (size + 2), cubes[i].yPos * (size + 2), cubes[i].zPos * size); pixelView.renderObject(cubes[i], p3d1); }
}, true);
Obelisk Test Case - Depth Sorting - Script Codes
Obelisk Test Case - Depth Sorting - Script Codes
Home Page Home
Developer Max Huang
Username nosir
Uploaded December 26, 2022
Rating 3.5
Size 2,707 Kb
Views 6,072
Do you need developer help for Obelisk Test Case - Depth Sorting?

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
Obelisk Test Case
Segments mouse following
Pixel Isometric Input Text Rendering
Pixel Isometric Cube Generator
Lissajous Particles
Fireworks fountain
Pixel Isometric Flappy Bird
Build Monument Valley by Obelisk.js
Create amazing sales emails 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!