Changing Terrain Experiment

Developer
Ben Matthews
Size
2,337 Kb
Views
32,384
  1. Changing Terrain Experiment Previews
  2. Changing Terrain Experiment HTML Codes
  3. Changing Terrain Experiment CSS Codes
  4. Changing Terrain Experiment JS Codes

How do I make an changing terrain experiment?

What is a changing terrain experiment? How do you make a changing terrain experiment? This script and codes were developed by Ben Matthews on 10 September 2022, Saturday.

Changing Terrain Experiment Previews
IQ Test

Changing Terrain Experiment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Changing Terrain Experiment</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://github.com/processing/p5.js/releases/download/0.5.6/p5.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.js'></script> <script src="js/index.js"></script>
</body>
</html>

Changing Terrain Experiment - Script Codes CSS Codes

* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
canvas { display:block; }

Changing Terrain Experiment - Script Codes JS Codes

window.addEventListener('resize', resize, false);
var cellSize = 30;
var xOff = 2*cellSize*Math.sqrt(3)/3;
var yOff = cellSize*Math.sqrt(3)/3;
var heightDivisions = 10;
var noiseScale = .005;
var heightScale = 1.8;
var colorScale = 1;
var speed = .01;
var z = 0;
var colors = [];
var hexes = [];
var gridWidth, gridHeight;
function Point(x, y){ this.x = x; this.y = y;
}
function Hex(p){ this.center = p; this.height = round(pow(noise(p.x*noiseScale, p.y*noiseScale, z), heightScale)*heightDivisions);
}
Hex.prototype.tick = function(){ var p = this.center; this.height = round(pow(noise(p.x*noiseScale, p.y*noiseScale, z), heightScale)*heightDivisions);
}
Hex.prototype.render = function(){ fill(colors[this.height]); ellipse(this.center.x, this.center.y, cellSize)
}
function setup(){ colorMode(HSB, 100, 100); createCanvas(); resize(); gridWidth = floor(width/cellSize); gridHeight = floor(height/cellSize); createColors(); createHexes(); background(0); var gui = new dat.GUI(); gui.add(this, "noiseScale", .001, .05, .003); gui.add(this, "heightScale", .2, 5, .003); gui.add(this, "speed", 0, 1, .003);
}
function createHexes(){ hexes = []; for (var i = 0; i <= gridWidth; i++){ for (var j = 0; j <= gridHeight+1; j++){ var x = i*cellSize; var y = j*cellSize; if (j%2 == 0) x += cellSize/2; var p = new Point(x, y); var hex = new Hex(p); hexes.push(hex); } }
}
function createColors(){ for (var i = 0; i < heightDivisions; i++){ var satbal = pow((i/heightDivisions), colorScale)*100; var c = color(120, 100 - satbal, satbal); colors.push(c); }
}
function draw(){ if (hexes == undefined) return; for (var i = 0; i < hexes.length; i++){ hexes[i].tick(); hexes[i].render(); } z += speed; // noLoop();
}
function resize(){ resizeCanvas(window.innerWidth, window.innerHeight); background(0);
}
Changing Terrain Experiment - Script Codes
Changing Terrain Experiment - Script Codes
Home Page Home
Developer Ben Matthews
Username tsuhre
Uploaded September 10, 2022
Rating 4
Size 2,337 Kb
Views 32,384
Do you need developer help for Changing Terrain Experiment?

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!

Ben Matthews (tsuhre) Script Codes
Name
Zelda BOTW Sheikah Language
Voronoi Pursuit Curves
Flame Animation Test 1
Tree Generator V2
Ellipses
Fractal Fun
Maze Runners
GameBunny1
Prisms
Ribbons
Create amazing blog posts 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!