dropping-circles.js

// dropping circles, phase 1

// the circles array!
var circles = [];

function setup() {
  createCanvas(340, 340);
  
  // add three circles
  for (var i = 0; i < 3; i += 1) {
    // make a new circle
    var c = { 
      x: random(width), 
      y: random(height), 
      d: 3 
    };
    // add it to the circles array
    circles.push(c);
  }
}

function draw() {
  background(255);
  
  fill(0);
  // here's that super common for loop!
  for (var i = 0; i < circles.length; i += 1) {
    // draw the circle
    ellipse(circles[i].x, circles[i].y, circles[i].d);
    // move it down 3 pixels for next frame
    circles[i].y += 3;
  }
  
  // set a random circle's x and y to the mouse's location
  if (mouseIsPressed) {
    // make a random index--whole number, not decimal, using floor
    var i = floor(random(circles.length))
    // get circle corresponding to that index
    var c = circles[i];
    
    // set x and y properties
    c.x = mouseX;
    c.y = mouseY;
  }
}