let noiseSpeed = 0.03;

let noiseHeight = 30;

let rings = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noiseY = height * 3 / 4;

}

​

function draw() {

//background from dark to light as mouseX moves

  background(0+mouseX/10, 15);

//create the stars

  noStroke();

  fill(255);   

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

    let xrandom = random(width);

    let yrandom = random(height / 2);

    ellipse(xrandom, yrandom, 3, 3);

  }

​

//create the waves 

  for (let j = 0; j < 3; j++) {

    let offsetY = j * 100;

    noFill();

    stroke(0, 0, 255-mouseX/10, 10);

    strokeWeight(height / 2);

    beginShape();

    curveVertex(0, height / 2);

    for (let i = 0; i < width; i += 50) {

      let y = noise(frameCount * noiseSpeed + i + j) * noiseHeight + noiseY + offsetY;

      curveVertex(i, y);

    }

    curveVertex(width, height / 2);

    endShape();

  }

​

//create the raindrops in the shape of rings

  for (let a = 0; a < rings.length; a++) {

    rings[a].display();

    rings[a].grow();

    rings[a].fade();

    if (rings[a].alpha < 0) {

      rings.splice(a, 1);

    }  

  }

  console.log("amount of rings in array:" , rings.length)

}

​

// press to create a new Ring object

function mousePressed() {

  //let ring = new Ring(mouseX, mouseY)

  let ring = new Ring(random(width/6, width*5/6), random(height*3/5, height*5/6));

  rings.push(ring);

}

​

class Ring {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.alpha = 100;

    this.diameter = 0;

  }

​

  display() {

    noFill();

    strokeWeight(4);

    stroke(255, this.alpha);

    circle(this.x, this.y, this.diameter);

  }

​

  grow() {

    this.diameter += 1;

  }

  fade() {

    this.alpha -= 1;

  }

}