Concept
In this assignment, I wanted to come up with something interactive that starts moving on the screen randomly and would make the viewer so confused about what the result could be, then after a while, the viewer would understand everything and see the beauty behind the chaos. Therefore, I decided to add multiple arcs to the screen that have an angle that is even less than a quarter of a circle. Each time an arc bumps into a wall, its stop angle is increased and gradually becomes closer to looking like a full circle. When an arc becomes a full circle, its position is transferred to the center of the screen and it freezes there. I designed the work in a way such that smaller arcs are slower than faster arcs, thus the biggest arcs will freeze earlier, and with time as the smaller arcs freeze they fill the whole screen with concentric circles that would look amazing. You can see this interactivity in the sketch below.
To be able to come up with this sketch on p5.js I used an object-oriented programming approach, in which I created a class called bumpingArc and added member functions to this class. I added a constructor where I initialized all necessary variables such as the xPosition and yPosition of the arcs, as well as the dimensions of the arc. I decided to add parameters to my constructor so that when I create various objects in my class, I would have the freedom to modify these variables. You can see the code for the class attached below.
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));
}
}
In addition to this, I added some other member functions to the class to be able to move these arcs and increase their angle when they are bumped into the wall, and freeze them when they become full circles. Most importantly, I added a member function to draw these arcs. To be able to make use of this class, I created an array of objects of this class, and I passed different parameters to each object. After that, I created another for loop to call all the functions related to these objects so that I can draw them in the way I wanted You can see the code for the objects attached below
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();
}
}
I was so happy and excited to see how my initial idea grew and how I was able to come up with this nice generative artwork that is generated purely from arcs. I was not inspired by any other artwork during this assignment. Initially, I was only trying to test out how to use arcs with classes and objects realized that arcs can be manipulated in many ways, and after testing out a couple of things I realized that so many different and amazing artworks can be generated from the movements of arcs. Then I came up with this idea which I enjoyed implementing.
Possible Improvements
I still believe that more work can be done to make this artwork more interesting and understandable to others. This is because I believe that any viewer will not understand anything when they first see tens of arcs bumping over each other. Therefore, to solve this issue I believe that the best thing would be to create a new arc object of smaller size only after the previous arc is positioned in the center and freezes over there. In addition to this, I realize that all arcs change color whenever one of them becomes a complete circle. I was not planning to do this initially, but it ended up being like this. Therefore I would like in the future to control the colors of these arcs in a better way and make my code even work in a great way for a higher number of arcs.