Randomized Terrain
Highlight the code and copy it.
Then, go to p5js.org and paste the code in the editor.
Hit the "run" button, watch what happens.
Make adjustments to the code, the hit the "run" button again.
Repeat. :)
var cols, rows;
var scl = 20;
var w = 2000;
var h = 1600;
var flying = 0;
var terrain;
function setup() {
createCanvas(600, 600, WEBGL);
cols = w / scl;
rows = h / scl;
terrain = create2DArray(cols, rows);
}
function draw() {
flying -= 12;
var yoff = flying;
for (var y = 0; y < rows; y++) {
var xoff = 0;
for (var x = 0; x < cols; x++) {
terrain[x][y] = map(noise(xoff, yoff), 0, 1, -100, 100);
xoff += 0.2;
}
yoff += 0.2;
}
background(0);
stroke(255);
noFill();
// translate(width / 2, height / 2);
rotateX(PI / 3);
translate(-width, -height / 2 + 50);
for (var y = 0; y < rows - 1; y++) {
beginShape(TRIANGLE_STRIP);
for (var x = 0; x < cols; x++) {
vertex(x * scl, y * scl, terrain[x][y]);
vertex(x * scl, (y + 1) * scl, terrain[x][y + 1]);
// rect(x * scl, y * scl, scl, scl);
}
endShape();
}
}
function create2DArray(numArrays, numSubArrays) {
var arr = new Array(numArrays);
for (var i = 0; i < numArrays; i++) {
arr[i] = new Array(numSubArrays);
}
return arr;
}