3D Terrain

Hau Phan / May 18, 2022

1 min read

var cols, rows;
var scl;
var terrain;
var flying;

function setup() {
  createCanvas(1280, 720, WEBGL);
  cols = 50;
  rows = 50;
  terrain = new Array(cols);
  scl = width / cols;
  for (let i = 0; i < cols; i++) {
    terrain[i] = new Array(rows);
  }
  flying = 0;
}

function draw() {
  var ioff = 0;
  for (let i = 0; i < cols; i++) {
    var joff = flying;
    for (let j = 0; j < rows; j++) {
      terrain[i][j] = map(noise(ioff, joff), 0, 1, -300, 400);
      joff += 0.05;
    }
    ioff -= 0.05;
  }
  flying -= 0.01;
  translate(-width / 2 - 200, height / 2 - 300, 100);
  rotateX(PI / 3);
  rotateZ(-PI / 3);
  background(0);
  noFill();
  stroke(255);
  for (let i = 0; i < cols - 1; i++) {
    beginShape(TRIANGLE_STRIP);
    for (let j = 0; j < rows; j++) {
      vertex(i * scl, j * scl, terrain[i][j]);
      vertex((i + 1) * scl, j * scl, terrain[i + 1][j]);
    }
    endShape();
  }
}

Contact me!

Below are my primary work email address.
You can also message me on LinkedIn and Facebook.

Reply times tend to be 1-2 days (at most).