three-circles.js

// Just a few circles

var circles = [
  { x: 30,  y: 40,  vx: 3,  vy: 2,  h: 10 },
  { x: 90,  y: 120, vx: 2,  vy: 3,  h: 120 },
  { x: 300, y: 240, vx: -2, vy: -1, h: 300 }
];

var DIAMETER = 30;

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.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;
    }
  }
}