falling-circles.js

// Falling circles

var circles = [];
// feel free to add more blank lines here to see the table better!

var DIAMETER = 10;

function setup() {
  createCanvas(340, 340);
}

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

  for (var i = 0; i < circles.length; i += 1) {
    var circle = circles[i];
    fill(circle.h, 100, 100);
    ellipse(circle.x, circle.y, DIAMETER);
    
    circle.vy += 0.1;
    circle.x += circle.vx;
    circle.y += circle.vy;

    // probably should do something here when the circles are gone...
//    if (circle.x < -DIAMETER/2 || circle.x > width+DIAMETER/2 || circle.y > height+DIAMETER/2) {
//			circle.dead = true;
//    }
  }
}

function mousePressed() {
  for (var i = 0; i < 10; i += 1) {
    var circle = {
      x: mouseX,
      y: mouseY,
      vx: random(-3, 3),
      vy: random(-3, 3),
      h: random(360)
    }
    circles.push(circle);
  }
}