loop-constructed-circles.js

// A few more circles

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

var DIAMETER = 30;

function setup() {
  createCanvas(340, 340);
  for (var x = 50; x <= width-50; x += DIAMETER*2) {
    for (var y = 50; y <= height-50; y += DIAMETER*2) {
      var circle = {
        x: x,
        y: y,
        vx: random(-3, 3),
        vy: random(-3, 3),
        h: random(360)
      };
      circles.push(circle);
    }
  }
}

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.x += circle.vx;
    circle.y += circle.vy;
    if (circle.x < DIAMETER/2 || circle.x > width-DIAMETER/2) {
      circle.vx = -circle.vx;
    }
    if (circle.y < DIAMETER/2 || circle.y > height-DIAMETER/2) {
      circle.vy = -circle.vy;
    }
  }
}