Midterm progress 2 – week 6

I began working on creating a dynamic, 3D terrain that continuously morphs over time. I used WebGL for 3D rendering.

let terrain;
let cols, rows;
let w = 20;
let flying = 0;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  cols = floor(width / w);
  rows = floor(height / w);
  terrain = new Terrain(cols, rows);

  // Set the camera position and orientation
  let camX = width / 2;
  let camY = height / 2; // Adjust this value for the desired side view
  let camZ = (height / 2) / tan(PI / 6); // Adjust this value for the desired zoom
  camera(camX, camY, camZ, 0, 0, 0, 0, 1, 0);
}

function draw() {
  background(0);

  // Center the sketch on the canvas
  translate(-width / 2, -height / 2);

  terrain.update();
  terrain.display();
  flying -= 0.05;
}

class Terrain {
  constructor(cols, rows) {
    this.cols = cols;
    this.rows = rows;
    this.w = w;
    this.terrain = [];
  }

  update() {
    let yoff = flying;
    for (let y = 0; y < this.rows; y++) {
      let xoff = 0;
      this.terrain[y] = [];
      for (let x = 0; x < this.cols; x++) {
        this.terrain[y][x] = map(noise(xoff, yoff), 0, 1, -100, 100);
        xoff += 0.2;
      }
      yoff += 0.2;
    }
  }

  display() {
    stroke(255);
    noFill();

    for (let y = 0; y < this.rows - 1; y++) {
      beginShape(TRIANGLE_STRIP);
      for (let x = 0; x < this.cols; x++) {
        vertex(x * this.w, y * this.w, this.terrain[y][x]);
        vertex(x * this.w, (y + 1) * this.w, this.terrain[y + 1][x]);
      }
      endShape();
    }
  }
}

The Terrain class is the core of our terrain generation. It contains methods for updating and displaying the terrain. I want to work on making it aesthetic itself more blocky, since my inspiration for this project is minecraft and I want to replicate its look. I also want to change the colors of the lines depending on their depth, so I can represent land and water.