Diamond-Square Terrain

Developer
Andrey Shchekin
Size
2,725 Kb
Views
12,144
  1. Diamond-Square Terrain Previews
  2. Diamond-Square Terrain HTML Codes
  3. Diamond-Square Terrain CSS Codes
  4. Diamond-Square Terrain JS Codes

How do I make an diamond-square terrain?

I am pretty sure the algorithm is not fully correct here, but I am working on it. :). What is a diamond-square terrain? How do you make a diamond-square terrain? This script and codes were developed by Andrey Shchekin on 15 November 2022, Tuesday.

Diamond-Square Terrain Previews
IQ Test

Diamond-Square Terrain - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Diamond-Square Terrain</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Diamond-Square Terrain - Script Codes CSS Codes

html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}

Diamond-Square Terrain - Script Codes JS Codes

function main() { var $container = $('#container'); var width = $container.width(); var height = $container.height(); var side = 16; var randomRange = 100; var rangeReduction = 2; var renderer = new THREE.WebGLRenderer({ antialias: true }); var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000); var scene = new THREE.Scene(); camera.position.z = 300; camera.position.y = -50; renderer.setSize(width, height); $container.append(renderer.domElement); // create the mesh's material var meshMaterial = new THREE.MeshBasicMaterial({ color : 0x000000, wireframe : true }); var geometry = new THREE.PlaneGeometry(400, 400, side, side); geometry.dynamic = true; var mesh = new THREE.Mesh(geometry, meshMaterial); mesh.rotation.x = 2.2; // add the mesh to the scene scene.add(mesh); scene.add(camera); function generatePoint(x, y, average, randomRange) { geometry.vertices[(y*(side + 1)) + x].z = (average + randomRange * (Math.random() - 0.5)); geometry.verticesNeedUpdate = true; } function getPoint(x, y) { var vertex = geometry.vertices[(y*(side + 1)) + x]; return vertex ? vertex.z : 0; } function getAverage() { var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += getPoint(arguments[i][0], arguments[i][1]); } return sum / arguments.length; } function diamondSquare(square, randomRange, next) { function diamond(cx, cy, halfx, halfy) { var average = getAverage([cx - halfx, cy], [cx + halfx, cy], [cx, cy - halfy], [cx, cy + halfy]); generatePoint(cx, cy, average, randomRange); } var halfx = (square.x2 - square.x1) / 2; var halfy = (square.y2 - square.y1) / 2; var cx = square.x1 + halfx; var cy = square.y1 + halfy; var average = getAverage([square.x1, square.y1], [square.x2, square.y1], [square.x1, square.y2], [square.x2, square.y2]); generatePoint(cx, cy, average, randomRange); diamond(square.x1, cy); diamond(square.x2, cy); diamond(cx, square.y1); diamond(cx, square.y2); if (halfx == 1) return; next.push({x1: square.x1, x2: cx, y1: square.y1, y2: cy}); next.push({x1: square.x1, x2: cx, y1: cy, y2: square.y2}); next.push({x1: cx, x2: square.x2, y1: square.y1, y2: cy}); next.push({x1: cx, x2: square.x2, y1: cy, y2: square.y2}); } var squares = [{x1: 0, y1: 0, x2: side, y2: side}]; (function generate() { var newSquares = []; for (var i = 0; i < squares.length; i++) { diamondSquare(squares[i], randomRange, newSquares); } squares = newSquares; randomRange /= rangeReduction; if (squares.length > 0) setTimeout(generate, 500); })(); (function rotate() { mesh.rotation.z += 0.010; setTimeout(rotate, 50); })(); (function draw() { renderer.render(scene, camera); requestAnimationFrame(draw); })();
}
// height bug fix
setTimeout(main, 10);
Diamond-Square Terrain - Script Codes
Diamond-Square Terrain - Script Codes
Home Page Home
Developer Andrey Shchekin
Username ashmind
Uploaded November 15, 2022
Rating 4
Size 2,725 Kb
Views 12,144
Do you need developer help for Diamond-Square Terrain?

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!

Andrey Shchekin (ashmind) Script Codes
Name
Labyrinth 1
Click to Shutdown
Simple CORS test UI
CSS
TV Fall
Code Loader
Text Effect 1
Text Effect 2.1
JQuery visiblechange event
Hexagons
Create amazing Facebook ads 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!