​

function preload() {

  img0 = loadImage("g0.png");

  img1 = loadImage("grass2.jpg");

}

​

function setup() {

  createCanvas(800, 800, WEBGL);

​

  // Geometry detail

  let detailX = 10;

  let detailY = 20;

  // Terrain size

  sizeX = 300;

  sizeY = 200;

  let minH = 0;

  let maxH = 30;

​

  // Prepare data for noise map creation

  let loopX = true;

  let nbrStripsX = detailX + (loopX ? 1 : 0);

  let loopY = true;

  let nbrStripsY = detailY + (loopY ? 1 : 0);

​

  console.log(`Detail X ${detailX} Y ${detailY}    Strips X ${nbrStripsX} Y ${nbrStripsY}`)

  // Create a 2D tileable height map (height range is )

  time = millis();

  nmap = create2DMap(

    nbrStripsX,

    nbrStripsY,

    loopX,

    loopY,

    0.01, // noise scale X

    0.01, // noise scale Y

    50 // noise radius

  )()

    .extend()

    .stretch(minH, maxH);

  //console.log(`Took ${millis() - time}  ms to create height map`);

  console.log(`Map details ${nmap}`);

  // Prepare p5 geometry

  let scaleX = sizeX / detailX;

  let scaleY = sizeY / detailY;

​

  let repeatsX = 2;

  let repeatsY = 2;

​

  let deltaU = repeatsX / detailX;

  let deltaV = repeatsY / detailY;

​

  // Create p5  geometry

  time = millis();

  myGeometry = new p5.Geometry(detailX, detailY, function () {

    for (let y = 0; y <= detailY; y++) {

      // for each row

      for (let x = 0; x <= detailX; x++) {

        // for each column

        this.vertices.push(

          new p5.Vector(

            (scaleX * x),

            (scaleY * y), 

            nmap.values[y * (detailX + 1) + x] // Z from heightmap

          )

        );

        this.uvs.push([x * deltaU, y * deltaV]);

      }

    }

    // this will attach all our vertices and create faces automatically

    this.computeFaces();

    // this will calculate the normals to help with lighting

    this.computeNormals();

    this.gid = `terrain|${detailX}|${detailY}`;

    console.log(this.gid);

  });

  //console.log(`Took ${millis() - time}  ms to create geometry`);

}

​

function draw() {

  background(220, 200, 220);

  orbitControl();

  translate(0, 0, 0);

  //pointLight(255, 255, 2000, 200, 200, -2000);

​

  noStroke();

​

  rotateY((cos(millis() / 6000) * PI) / 1.8);

​

  time = millis();

  texture(img0);

  textureMode(NORMAL);

  textureWrap(REPEAT);

​

  model(myGeometry);

  translate(-sizeX, 0); //left

  model(myGeometry);

  translate(0, -sizeY); //up

  model(myGeometry);

  translate(sizeX, 0); // right

  model(myGeometry);

​

  // if (frameCount % 3600 == 0)

  //   console.log(`Took ${millis() - time}  ms to render geometry`);

}

​