​

let balls = [];

let vels = [];

​

function setup() {

  createCanvas(400, 400);

  ballCanvas = createGraphics(width, height);

  ballCanvas.blendMode(LIGHTEST);

  ballCanvas.stroke(0);

  ballCanvas.strokeWeight(10);

  ballCanvas.fill(255, 0, 0);

  for(let i = 0; i < 15; i ++) {

    balls.push(createVector(random(width), random(height), random(20, 50)));

    vels.push(p5.Vector.random2D());

  }

}

​

function draw() {

  background(255);

  ballCanvas.clear();

  for(let i = 0; i < balls.length; i ++) {

    const b = balls[i];

    const v = vels[i];

    b.add(v);

    if(b.x < b.z) {

      b.x = b.z;

      v.x *= -1;

    } else if(b.x > width - b.z) {

      b.x = width - b.z;

      v.x *= -1;

    }

    if(b.y < b.z) {

      b.y = b.z;

      v.y *= -1;

    } else if(b.y > height - b.z) {

      b.y = width - b.z;

      v.y *= -1;

    }

    balls[i] = b;

    vels[i] = v;

    ballCanvas.circle(b.x, b.y, b.z * 2);

  }

  image(ballCanvas, 0, 0);

}