Description:Generates an array of rings using OOP class and also draws rings when mouse is clicked*/

//global variables for the array

let gXSpeedMax = 2;

let gYSpeedMax = 5;

let minSize = 15;

let maxSize = 60;

let ringArray = [];

​

​

function setup() {

  let ringNum=30;

  createCanvas(600, 600);

  smooth();

  //loop to create initial rings on the canvas

  for (var i = 0; i < ringNum; i++) {

    // randomly assign sizes for ellipses

    let ringWidth = random(minSize, maxSize);

    let ringHeight = random(minSize, maxSize);

    // Similarly for the speed

    let xSpeed = random(-gXSpeedMax, gXSpeedMax);

    let ySpeed = random(-gYSpeedMax, gYSpeedMax);

​

    // to create array of rings

    ringArray.push(

      new Ring(

        // Choose random positions, but always onscreen

        random(ringWidth, width - ringWidth),

        random(ringHeight, height - ringHeight),

        ringWidth,

        ringHeight,

        xSpeed,

        ySpeed

      )

    );

  }

} 

​

function draw() {

  background(255,255,204);

​

  translate(300, 300);

  // Have each ring update and draw itself

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

    ringArray[i].update();

    ringArray[i].drawSelf();

  } 

}

​

//draw rings when mouse clicked

function mouseClicked() {

​

  //random assignment of speed and sizes

  let xSpeed = map(mouseX, 0, height, gXSpeedMax, -gXSpeedMax);

  let ySpeed = map(mouseY, 0, height, gYSpeedMax, -gYSpeedMax);

  let ringWidth = random(minSize, maxSize);

  let ringHeight = random(minSize, maxSize);

  //create new ring based on the mouse position

  let newRing = new Ring(

      mouseX,

      mouseY,

      ringWidth,

      ringHeight,

      xSpeed,

      ySpeed

​

  );

  // Add it to the global array of all rings

  ringArray.push(newRing);

}

​

//constructor of each ring

class Ring {

  constructor(xPos, yPos, ringWidth, ringHeight, xSpeed, ySpeed) {

    this.x = xPos;

    this.y = yPos;

    this.ringWidth = ringWidth;

    this.ringHeight = ringHeight;

    this.xSpeed = xSpeed;

    this.ySpeed = ySpeed;

  }

​

//make the rings move

  update() {

    this.x += this.xSpeed;

    this.y += this.ySpeed;

  }

​

​

​

//draw rings using loop of ellipses and then rotate them into a ring

  drawSelf() {

    fill(random(100,250),random(100,250),random(100,250));

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

      ellipse(this.x, this.y, this.ringWidth, this.ringHeight);

      rotate(PI/15);

​

  }

  }

}

​