let numWaves = 50;

let centerRadius = 50;

​

function setup() {

  createCanvas(600, 600);

  let colorStart = color("#38A7DD");

  let colorEnd = color("#745807");

​

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

    let lerpAmt = map(i, 0, numWaves, 0, 1); // Map i value to a value between 0 and 1

    let waveColor = lerpColor(colorStart, colorEnd, lerpAmt);

    waves.push(

      new Wave(

        centerRadius + i * 5,

        i % 2 === 0 ? 0.01 : -0.01,

        i / 10,

        waveColor

      )

    );

  }

}

​

function draw() {

  background(0);

  // On mouse press, raise the sea levels (increase radii)

if (mouseIsPressed) {

    for (let wave of waves) {

      wave.radius += 0.5; // You can adjust this value if you want to increase the radius at a different rate

    }

    centerRadius += 0.5; // Adjust this as well if necessary

}

​

​

​

  translate(width / 2, height / 2);

​

  for (let wave of waves) {

    wave.display();

    wave.update();

  }

​

  // Drawing the center

  fill("#FFC107");

  ellipse(0, 0, centerRadius);

​

  fill(255);

  textAlign(CENTER, CENTER);

  text("The future is in your hands", 0, -height / 2.5);

}

​

class Wave {

  constructor(radius, direction, offset, col) {

    this.radius = radius;

    this.direction = direction;

    this.offset = offset;

    this.theta = 0;

    this.col = col; // Store color value

  }

​

  update() {

    this.theta += this.direction;

  }

​

  display() {

    noFill();

    stroke(this.col);

    strokeWeight(1);

    beginShape();

    for (let i = 0; i < TWO_PI; i += 0.01) {

      let x =

        (this.radius + sin(i * 10 + this.theta + this.offset * PI) * 5) *

        cos(i);

      let y =

        (this.radius + sin(i * 10 + this.theta + this.offset * PI) * 5) *

        sin(i);

      vertex(x, y);

    }

    endShape(CLOSE);

  }

}

​