//https://happycoding.io/tutorials/p5js/creating-classes

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

​

// revised scopes, arrays are always global

// number of circles can be adjusted but their colour will be transparent after five depending on the color array

const NR_CIRCLES = 5;

let circles = [];

let index = 0;

let cpallete = ["#fe4365", "#fc9d9a", " #c8c8a9", "#f9cdad", " #83af9b"];

​

​

function setup() {

  createCanvas(300, 300);

//circles are to be randomly placed on the screen each time the program is run

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

    circles[i] = new Circle(

      random(width),

      random(height),

      random(3),

      random(3)

    );

  }

}

​

function draw() {

  // first number is alpha second number is value of black, gives animate trail effect

  background(90, 1);

​

//calling the constructor  

  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;

//adds the value of the color pallete array placed in the global scope

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

    index++;

// bracket after random ensures the width range of the circles    

    this.width = random(10, 20);

    // console.log(index);

  }

​

  move() {

//ensures that the ball is continuously moving as it is drawn and filled 

//bounces off the boundaries and speed is maintained 

    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);

  }

}

​