Rolling Hills
3D terrain generated using 2D Perlin noise. I first made a mesh with triangles and then use Perlin noise to determine the height of each vertex in the mesh in order to create the terrain look.
Reset using the R key on your keyboard. Pause the piece at any time using the S key on your keyboard.
var cols, rows;
var scl = 20;
var w = 1400;
var h = 1000;
var flying = 0;
var terrain = [];
let looping = true;
// Setup function
function setup() {
var c = createCanvas(500, 500, WEBGL);
c.parent('sketch-holder');
cols = w / scl;
rows = h / scl;
resetSketch();
frameRate(10);
}
function resetSketch() {
terrain = [];
flying = random(1000);
for (var x = 0; x < cols; x++) {
terrain[x] = [];
for (var y = 0; y < rows; y++) {
terrain[x][y] = 0; //specify a default value for now
}
}
}
// Draws the terrain
function draw() {
flying -= 0.18;
var yoff = flying;
// Maps each vertex in the terrain to a z value from Perlin noise and adds it to the 2d array
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; // .2
}
yoff += 0.2; // .2
}
// Draws each vertex in 3d space
clear();
translate(0, 50);
rotateX(PI / 3);
fill(200);
translate(-w / 2, -h / 2);
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]);
}
endShape();
}
}