let cols = ["#001219","#005f73","#0a9396","#94d2bd","#e9d8a6","#ee9b00","#ca6702","#bb3e03","#ae2012","#9b2226"];

​

function setup() {

  createCanvas(900, 900);

  background(255);

  waves[0] = new Wave(0, 20);

}

​

function draw() {

  strokeWeight(2);

  for(i = 0; i < width / 2; i++){

    if(waves[0] !== undefined){

      waves[0].update();

    }

  }

}

​

class Wave{

  constructor(x, y){

    this.pos = createVector(x, y);

    this.mid = createVector(width / 2, this.pos.y);

    this.dist = p5.Vector.sub(this.pos, this.mid);

    this.active = 0;

    this.nf = 0;

    this.hf = 0;

    this.h = 2;

    this.count = 0;

    this.c = 0;

    this.col = undefined;

    this.b = color(0, 0, 0);

  }

  update(){

    this.pos.y = this.count * this.h;

    this.mid = createVector(width / 2, this.pos.y);

    this.dist = p5.Vector.sub(this.pos, this.mid);

    this.nf = map(noise(this.pos.x / 500, this.dist.mag() / 1000, this.count / 200), 0, 1, -1, 1);

    this.hf = map(this.dist.mag(), 0, width / 2, 1000, 0);

    if(this.active < 1){

      beginShape()

      vertex(this.pos.x, this.pos.y);

      this.active = 1;

    }

    if(this.pos.x < width){

      this.pos.x = this.pos.x + 2;

      vertex(this.pos.x, this.pos.y + this.nf * this.hf);

    } else if(this.pos.x >= width){

      this.pos.x = 0;

      this.c = floor(random(cols.length));

      this.col = color(cols[this.c]);

      this.col.setAlpha(2)

      // fill(this.col);

      noFill();

      this.col = lerpColor(this.col, this.b, 0.2);

      stroke(0);

      strokeWeight(0.1);

      // vertex(this.pos.x, this.pos.y);

      endShape();

      if(this.pos.y < height + 1000){

        this.pos.x = 0;

        noStroke();

        // fill(this.col)

        quad(this.pos.x, this.pos.y, this.pos.x, this.pos.y + this.h, width, this.pos.y + this.h, width, this.pos.y);

        this.count++;

        this.active = 0;        

      } else{waves[0] = undefined}

    }

    // point(this.pos.x, this.pos.y);

  }

}