const amount = 20;

const detail = 10;

let ampl;  // redefined on resize only

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  frameRate(25);

  noFill();

  setAmpl();

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  setAmpl();

}

​

function setAmpl() {

  ampl = (630 / (windowHeight) * 100) + 120;

}

​

function draw() {

  // define this as soon as the frame starts

  const _o = millis() * 0.0005;

  background(0);

​

  // drop the excess call to beginShape

  //beginShape();

  stroke(255, 255, 255, 100);

  for (var k = 0; k < amount; k++) {

    beginShape();

    const offset = (1 - k / amount) * 3;

    for (var i = 0; i < (width + detail); i += detail) {

      let y = height * 0.5;

      y += Math.sin(i * 0.01 - _o + (k / 50) + offset) * ampl;

      y += Math.sin(i * 0.005 - _o + 5 + offset) * ampl; // drop noise(50) -- if you must use it (it has little real effect) compute once at the beginning of draw and use as a constant. It will give the same value every time

      vertex(i, y);

    }

    endShape();

  }

  // frame to show how resize is working

  rect(10, 10, windowWidth-20, windowHeight-20);

}