let deeppurple = [70, 70, 230];

let midpurple = [180, 139, 255];

let litpurple = [191, 215, 255, 20];

let litcyan = [226, 253, 255, 150];

​

function setup() {

  createCanvas(400, 400);

  frameRate(30); //slow things down

}

​

let bubbles = [];

function Bubble() {

  // record bubble's random positions, sizes, and speed

  this.x = random(width);

  this.y = random(height);

  this.size = random(2, 8);

  this.xSpeed = random(0, 2);

  this.ySpeed = random(-2, 0);

}

​

function drawWave(Amplitude, Frequency) {

  //wave appearance

  fill(litpurple);

  stroke(midpurple);

  strokeWeight(2);

​

  //wave movement with mouse

  let offsetX = map(mouseX, 0, width, -10, 10);

  let offsetY = map(mouseY, 0, height, -200, 200);

​

  //repeatedly draw wave

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

    beginShape(TESS);

    for (let x = 0; x < width; x += 3) {

      let y =

        sin(x * Frequency + (i * PI) / 8 + offsetX) * Amplitude +

        height / 2 +

        i * 20 +

        offsetY;

      vertex(x, y);

    }

    endShape();

  }

}

​

function drawBubble(numBubbles) {

  // bubble appearance

  fill(litcyan);

  noStroke();

​

  // control number of bubbles

  while (bubbles.length < numBubbles) {

    bubbles.push(new Bubble());

  }

​

  for (let i = 0; i < bubbles.length; i++) {

    let bubble = bubbles[i];

​

    // make bubbles move

    bubble.x += bubble.xSpeed;

    bubble.y += bubble.ySpeed;

​

    // make sure bubbles stay in canvas

    if (bubble.x > width) {

      bubble.x = 0;

    }

    if (bubble.x < 0) {

      bubble.x = width;

    }

    if (bubble.y > height) {

      bubble.y = 0;

    }

    if (bubble.y < 0) {

      bubble.y = height;

    }

​

    // draw bubbles

    circle(bubble.x, bubble.y, bubble.size);

  }

}

​

function draw() {

  background(deeppurple);

  drawWave(30, 0.01);

  drawBubble(60);

}

​