//let bigCircleRadius = 150;

​

function setup() {

  createCanvas(1080, 1080);

  frameRate = 60;

  createLoop({duration:3, gif:true})

​

}

  let r = random(0, 255);

  let g = random(0, 255);

  let b = random(0, 255);

  let a = 200;

  let fillColor = color(r, g, b, a);

  let x = random(50, width - 50);

  let y = random(50, height - 50);

  let n = (100); //size

  //nested loop

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

    let n = new Circle(random(x), random(y), random(100));

    n.velocity = createVector(random(1, -1), random(1, -1));

    circles.push(n);

    //fill(255, 0, 0);

  //circle(width/2, height/2, bigCircleRadius*2);

  }

​

​

function draw() {

  //bankground

  col = map (mouseX, 0, 1080, 0, 255)

  background(col);

  for (let n of circles) {

    n.update();

    n.display();

  }

}

​

class Circle {

  constructor(x, y, n) {

    this.position = createVector(x, y, n);

    this.n = n;

    this.color = color(random(255), random(255), random(255), random(200));

    this.velocity = createVector(0, 0);

  }

​

  update() {

    this.position.add(this.velocity);

    if (this.position.x < 0 || this.position.x > width) {

      this.velocity.x *= -1;

    }

    if (this.position.y < 0 || this.position.y > height) {

      this.velocity.y *= -1;

    }

  }

​

    display() {

    fill(this.color);

    ellipse(this.position.x, this.position.y, this.n, this.n);

  }

}

​