more-circles.js

// A few more circles

var circles = [];


var DIAMETER = 30;

function setup() {
  createCanvas(340, 340);
  for (var i = 0; i < 10; i += 1) {
    var circle = {
      x: random(DIAMETER/2, width-DIAMETER/2),
      y: random(DIAMETER/2, height-DIAMETER/2),
      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;
    }
  }
}