//This code shows the implementation of object oriented programming concepts to come up with an generative artwork, using only arcs. This program is interactive as 10 arcs are created of different sizes and whenever each arc bump into a wall the stop angle of the arc is increased until it becomes a full circle and at that time it takes a random color and is placed in the center of the screen.

​

let newArc = []; //initializing newArc as array as we will define arc objects

function setup() {

  createCanvas(400, 400);

  let xSpeed = 5; //initializing some variables to be passed as parameters to the constructor

  let ySpeed = 3;

  let initialDiameter = 400;

  //creating an array of size 10 to create 10 objects of class bumpingArc

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

    newArc[i] = new bumpingArc(xSpeed, ySpeed, initialDiameter);

    xSpeed = xSpeed - 0.35;

    ySpeed = ySpeed - 0.35;

    initialDiameter -= 35;

  }

}

​

function draw() {

  background(220);

  strokeWeight(5);

​

  fill(255, 255, 255); //create a for loop to call the functions of each object and draw 10 arcs

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

    newArc[i].moveArc();

    newArc[i].checkBounds();

    newArc[i].changeArcColor();

​

    newArc[i].drawArc();

  }

}

​

class bumpingArc {

  //initialize important variables in the constructor

  constructor(speedX, speedY, diameter) {

    this.xPos = width / 2;

    this.yPos = height / 2;

    this.xSpeed = speedX;

    this.ySpeed = speedY;

    this.stopAngle = 60;

    this.arcDiameter = diameter;

    this.angleChange = 30;

    this.Rcolor = random(0, 255);

    this.Gcolor = random(0, 255);

    this.Bcolor = random(0, 255);

  }

  //change the position of the arc each frame by adding xSpeed and ySpeed to initial positions

  moveArc() {

    this.xPos += this.xSpeed;

    this.yPos += this.ySpeed;

  }

  //check if the arc hit the bound, if yes increase the angle of the arc and flip positions

  checkBounds() {

    if (this.xPos >= width || this.xPos <= 0) {

      this.xSpeed = -this.xSpeed;

      this.stopAngle += this.angleChange;

    }

    if (this.yPos >= height || this.yPos <= 0) {

      this.ySpeed = -this.ySpeed;

      this.stopAngle += this.angleChange;

    }

  }

​

  changeArcColor() {

    //check if the arc becomes a full circle if it becomes a full circle place it in the center and freeze it

    if (this.stopAngle % 360 == 0) {

      fill(this.Rcolor, this.Gcolor, this.Bcolor);

      this.xPos = width / 2;

      this.yPos = height / 2;

      this.xSpeed = 0;

      this.ySpeed = 0;

    }

  }

  //drawArc functions draws an arc using the variables defined in the constructor

​

  drawArc() {

    arc(this.xPos,this.yPos,this.arcDiameter, this.arcDiameter, radians(0), radians(this.stopAngle));

  }

}

​