​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background('black');

​

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

    myRipples[i].render();

    myRipples[i].increase();

  }

}

​

function mousePressed() {

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

    myRipples.push(new Ripple(5 + i*30));

  }

}

​

class Ripple {

  constructor(rad) {

    this.x = mouseX;

    this.y = mouseY;

    this.birthday = millis();

    this.rad = rad;

  }

​

  render() {

    var now = millis();

    var elapsed = now - this.birthday;

    var percentageElapsed = elapsed / 5000;

​

    if ((percentageElapsed > 0) && (percentageElapsed < 1)) {

      var pct = percentageElapsed;

      var transparency = map(pct, 0, 1, 255, 0);

      var outward = percentageElapsed + this.rad

      stroke(255, transparency);

      noFill();

      strokeWeight(3);

      ellipseMode(CENTER);

      var rad = 0;

      ellipse(this.x, this.y, this.rad, this.rad);

    }

  }

  increase(){

    this.rad +=3;

  }

}