bouncing balls

let circles;

​

const inRange = (num, min, max) => num > min && num < max;

const randomRGB = () => Array(3).fill().map(() => random(0, 255));

​

class Circle {

  constructor({ velocity, radius, fillColor, strokeWeight }) {

    this.velocity = velocity;

    this.radius = radius;

    this.diameter = radius * 2;

    this.fillColor = fillColor;

    this.strokeWeight = strokeWeight;

    this.location = createVector(

      random(this.diameter, width - this.diameter),

      random(this.diameter, height - this.diameter)

    );

  }

  show() {

    stroke(0);

    strokeWeight(this.strokeWeight);

    fill(...this.fillColor);

    circle(this.location.x, this.location.y, this.diameter);

  }

  update() {

    this.location.add(this.velocity);

    const {x, y} = this.location;

    const minX = this.radius + this.strokeWeight / 2;

    const maxX = width - this.radius - this.strokeWeight / 2;

    const minY = this.radius + this.strokeWeight / 2;

    const maxY = height - this.radius - this.strokeWeight / 2;

​

    if (!inRange(x, minX, maxX)) this.velocity.x *= -1;

    if (!inRange(y, minY, maxY)) this.velocity.y *= -1;

  }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  frameRate(60);

​

  const numCircles = ceil(log(windowWidth * windowHeight));

  const circleSize = floor(min(windowWidth, windowHeight) / 20);

  circles = Array(10).fill().map((circle) => new Circle({

    velocity: createVector(random(-10, 10), random(-10, 10)),

    radius: circleSize * random(0.5, 2),

    fillColor: randomRGB(),

    strokeWeight: random(5, 15),

  }));

}

​

function draw() {

  background(200);

  circles.forEach((circle) => {

    circle.show();

    circle.update();

  })

}