// https://www.youtube.com/watch?v=DEHsr4XicN8

​

const NR_CIRCLES = 5;

let circles = [];

let index = 0;

let cpallete = ['#a7226e', '#ec2049', " #f26b38" , "#f5db37" , " #259599"]

​

​

​

​

function setup() {

  createCanvas(300, 300);

​

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

    circles[i] = new Circle(random(width), random(height), random(3), random(3));

  }

}

​

function draw() {

   background(90, 1);

  // first number is alpha second number is black

​

​

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

    circles[i].move();

    circles[i].display();

  } 

}

​

class Circle {

  constructor(x, y, xSpeed, ySpeed) {

    this.x = x;

    this.y = y;

    this.xSpeed = xSpeed;

    this.ySpeed = ySpeed;

    this.col= color(cpallete[index]);

    index++;

    this.width=random(10,25);

  }

​

   move(){

    this.x += this.xSpeed;

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

      this.xSpeed *= -1;

    }

​

    this.y += this.ySpeed;

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

      this.ySpeed *= -1;

    }

  }

  display() {

    noStroke();

    fill(this.col);

    circle(this.x, this.y, this.width);

  }

}