Noise Grid

let NUM = 4, layers;

​

function setup() {

  createCanvas(S = min(windowWidth, windowHeight), S);

  S *= 0.8;

  layers = []

  for (let i = 0; i < NUM; i++) {

    layers.push({n: ~~random(15, 25), offset: random(123456), clr: color(random(200), random(100), random(300))});

  }

  background(212);

  stroke(32);

  stroke(2);

  loop();

}

​

function draw() {

  background(212);

  for (const lyr of layers) {

    stroke(lyr.clr);

    drawGrid(lyr.n, lyr.offset);

  }

  // noLoop();

}

​

function drawGrid(N, offset = 0) {

  // const N = 20;

  const T = S / N;

  push();

  fill("#3388cc44");

  noFill();

  translate((width-S)/2, (height-S)/2);

  for (let j = 0; j < N; j+=1) {

    beginShape(TRIANGLE_STRIP);

    for (let i = 0; i <= N; i+=1) {

      const v1 = getPt(i, j, S, T, offset);

      const v2 = getPt(i, j + 1, S, T, offset);     

      vertex(v1.x, v1.y);

      vertex(v2.x, v2.y); 

    }

    endShape();

  }

  pop();

}

​

function getPt(i, j, S, T, offset) {

  const x = i * T;

  const y = j * T;

  const n = noise(offset + x/123, offset + y/213, offset + frameCount/64);

  const d = (n-0.5)*T;

  return {x, y: y - d};

}