var r = [];

var numCircles = 0;

var circleExists = false;

​

function setup() {

  createCanvas(600, 600);

  c = color("royalblue");

  c.setAlpha(10);

  background(c);

}

​

function draw() {

  noFill();

  background(c);

  stroke("cornflowerblue");

  strokeWeight(20);

  for(var i=1; i<=numCircles; i++){

    if(r[i].exists){

      r[i].drawCircle();

    }

  } 

}

​

function mousePressed() {

  r[numCircles+1] = new ripple();

}

​

class ripple {

  constructor() {

    this.x = mouseX;

    this.y = mouseY;

    this.r = 0;

    this.v = 10;

    this.exists = true;

    numCircles++;

  }

  drawCircle() {

    background(c);

    push();

    translate(this.x, this.y);

    scale(1, 0.33);

    circle(0, 0, this.r);

    for(var i=0; i<sqrt(this.r); i+=10){

      circle(0, 0, this.r-sq(i));

    }

    pop();

    if(this.v>0){

      this.increaseR();

    } else {

      this.exists = false;

    }

  }

  increaseR() {

    this.r += this.v;

    this.v-=0.04;

  }

}