Bounce in a Circle

let centerX, centerY;

let bigCircleRadius;

let smallCircleRadius;

let numSmallCircles = 200;

let smallCircles = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  smallCircleRadius = height/200;

  if(width > height) {

    bigCircleRadius = height / 2 * 0.9;

  } else {

    bigCircleRadius = width / 2 * 0.9;

  }

  centerX = width / 2;

  centerY = height / 2;

​

  // Create small circles

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

    let angle = i * TWO_PI / numSmallCircles;

    let x = centerX + cos(angle) * random(bigCircleRadius - smallCircleRadius);

    let y = centerY + sin(angle) * random(bigCircleRadius - smallCircleRadius);

    let velocity = random(height/1200, height/400);

    let direction = createVector(random(-1, 1), random(-1, 1)).normalize();

    smallCircles.push({ x, y, velocity, direction });

  }

  background(0);

}

​

function draw() {

  background(0, 25);

  // Update and draw small circles

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

    let myCicle = smallCircles[i];

    myCicle.x += myCicle.velocity * myCicle.direction.x;

    myCicle.y += myCicle.velocity * myCicle.direction.y;

    // Bounce off big circle

    let distance = dist(centerX, centerY, myCicle.x, myCicle.y);

    if (distance + smallCircleRadius * 2 >= bigCircleRadius) {

      let norm = createVector(centerX - myCicle.x, centerY - myCicle.y).normalize();

      myCicle.direction = myCicle.direction.sub(norm.mult(2 * myCicle.direction.dot(norm)));

    }

    // Draw small circle

    fill(0, 0, 255);

    noStroke();

    ellipse(smallCircles[i].x, smallCircles[i].y, smallCircleRadius * 2);

  } 

  // Draw big circle

  noFill();

  stroke(63);

  strokeWeight(1);

  ellipse(centerX, centerY, bigCircleRadius * 2);

}