//UPDATE 10/1:

//Modified to include a created function grow

​

var rw = 0; //ripple width

var rh = 0; //ripple height

var clickX; //mouse X position when clicked

var clickY; //mouse Y position when clicked

var bkr; //background red value

var bkg; //backgrount green value

//var bkb; //background blue value

​

function setup() {

  createCanvas(600, 400);

  bkr = random(0, 255);

  bkg = random(0, 255);

  //bkb = random(0,255);

  background(bkr, bkg, 255);

​

}

​

function draw() {

  background(bkr, bkg, 255);

  noFill();

  ellipse(clickX, clickY, rw, rh);

  //grow can now be used with any shape and it will grow in the same way

  //Try the line, it has a quirky movement!

  //rect(clickX, clickY, rw, rh);

  //line(clickX, clickY, rw, rh);

  grow();

}

​

​

function mouseClicked() {

  //reseting the width and height to 0 with each mouse click,

  //so that a ripple will start over its small to larger growth cycle

  rw = 0;

  rh = 0; 

  clickX = mouseX;

  clickY = mouseY;

​

}

​

//does not take parameters because it is specifically setting growth a certain way

//does not return a value

function grow(){

  rw = rw + 2;

  rh = rh + 1;

}