var circles = [];

function setup() {
  createCanvas(400, 400);
  var count = 0;
  while (count < 20) {
    circles.push({
      x: random(width),
      y: height,
      vx: 0,
      vy: random(4),
      r: random(4,10),
      h: random(360)
    });
    count = count + 1;
  }
}

function mouseDragged() {
  circles.push({
      x: mouseX,
      y: mouseY,
      vx: 0,
      vy: -random(4),
      r: random(4,10),
      h: random(360)
    });
}

function draw() {
  background(255);
  noStroke();

  circles.forEach(paint);
  circles.forEach(move);
  circles.forEach(bounce);
}

function isClickedOn(circle) {
  if (dist(mouseX, mouseY, circle.x, circle.y) < circle.r) {
    circle.r = 0;
  }
}

function mousePressed() {
  circles.forEach(isClickedOn);
}

function paint(circle) {
  colorMode(HSB);
  fill(circle.h, 100, 100);
  ellipse(circle.x, circle.y, circle.r*2, circle.r*2);
}

function move(circle) {
  circle.x += random(-2, 2); // vibration
  circle.x += circle.vx; // circle.x = circle.x + circle.vx
  circle.y += circle.vy;
}

function bounce(circle) {
  if (circle.x > width || circle.x < 0) {
    circle.vx = - circle.vx;
  }
  if (circle.y > height || circle.y < 0) {
    circle.vy = - circle.vy;
  }
}