Circle Art

For this assignment, we had the possibilities to use object oriented programming to either create an artwork or a game. At first, I wanted to challenge myself by creating a game. The first thing that came to mind was the simple game that appears in google chrome whenever there is no wifi. Here is a sample of the game:

Chrome game

At first, I thought the game mechanics would be simple enough for the elaboration of this assignment. However, as I started writing the code, I started to notice how complex the creation of even a simple game can be. I planned on creating two classes: one for the user’s object (which would be a ball for the sake of simplicity) and another for the “obstacles” (which would be rectangles to keep up with the simple graphics of the game). Initially, I planned to make the illusion of the moving ball by moving the rectangles horizontally (towards the user) rather than moving the actual ball. This would not only simplify the game mechanic but it would also make it easier for the user to play the game. Then, in order to create different rectangles that would change in size, I would create an array that would hold a certain number of rectangles. Each time a rectangle got out of the screen, the code would restart that object’s position to the start of the screen and would change its height with a random number generator. I had already planned the game mechanics beforehand as well as the collision for the losing conditions. However, when it was time to implement the classes, I had encountered great difficulty in adapting my pseudocode into Processing and also had problems regarding the time it would take to elaborate and debug the whole game. Therefore, although unfortunately a bit too late, I decided to change my idea and do a piece of artwork. This was the first trial of my second idea:

First implementation (after much struggle with the collide)

I then decided it would be interesting to make new circles appear for every time the user clicked, which led to my final pieces:

First: collision


Second: no collision


With this piece, my focus was to allow users to “create their own artwork” through randomly generated circles. As seen in the gifs above, wherever the user clicked on the screen, a new circle would be created, with a randomly generated size, color, speed, and direction.

For the first example, the most difficult aspect was to create the collisions between the balls. For this code, I had to create a nested for loop that would check for each of the circles in an array and would check for collisions between each other individually. To add a more interesting effect in the piece, I also added transparencies to each object. Specially for the code without the collision effect, this paved way for different visualisations due to the different opacity levels. An additional feature that I added was a counter that would make the circles disappear after a certain number of frames, to ensure the processing window would not be saturated after a while.

Overall, although it was not what I originally intended, I learned a lot while making this piece. By making the collision code, I learnt a lot about arrays and how they can be used to check for specific objects. Due to this, I now feel more comfortable with working with arrays and implementing them in future projects.

Here is the final code:

float distance; 
Ball pinkBall;
Ball greenBall;
Ball brightGreenBall; 
Ball yellowBall;
int numBalls = 6;
int counter = 0;
int generalDirection = -1;
int generalDirection1 = 1;
int frames = 0;

Ball [] balls = new Ball[counter];

void setup(){
 //pinkBall = new Ball(40,60,150,-1,1,2,2,237,132,134);
 //greenBall = new Ball(20,300,400,1,-1,4,4,167,195,178);
 //brightGreenBall = new Ball(30,400,200,1,1,3,3,188,204,147);
 //yellowBall = new Ball(38,300,40,-1,-1,2.4,2.4,244,233,168);
 //balls[0] = new Ball(40,60,150,-1,1,2,2,237,132,134);
 //balls[1] = new Ball(20,300,400,1,-1,4,4,167,195,178);
 //balls[2] = new Ball(30,400,200,1,1,3,3,188,204,147);
 //balls[3] = new Ball(30,200,200,1,-1,3,3,244,233,168);
 //balls[4] = new Ball(50,500,50,1,-1,1,1,250,193,175);
 //balls[5] = new Ball(70,100,80,1,-1,1,1,121,94,133);

void draw(){

 for (int i = 0 ; i < counter ; i++){
 for (int j = 0 ; j <counter ; j++){
 if (i!=j){
 for (Ball ball : balls){

class Ball{
 float rad;
 float x;
 float y;
 int xdir;
 int ydir;
 float xspeed;
 float yspeed;
 int red,green,blue;
 int transp;

 Ball(int Rad, float X, float Y, int XDIR, int YDIR, float XSPEED, float YSPEED, int RED, int GREEN, int BLUE, int TRANSP){
 rad = Rad;
 x = X;
 y = Y;
 xdir = XDIR;
 ydir = YDIR;
 xspeed = XSPEED;
 yspeed = YSPEED;
 red = RED;
 green = GREEN;
 blue = BLUE; 
 transp = TRANSP;
 void move(){
 x = x + (xspeed * xdir);
 y = y + (yspeed * ydir);
 if (x > width-rad || x < rad){
 if (y > height-rad || y < rad){
 void collide(Ball otherball){
 float dx = x - otherball.x;
 float dy = y - otherball.y;
 float distance = sqrt(dx*dx + dy*dy);
 float miniDist = rad + otherball.rad;
 if (distance < miniDist){
 xdir *= -1;
 ydir *= -1;
 otherball.xdir *= -1;
 otherball.ydir *= -1;
 void display(){
 if (frames%15 == 0){

void mousePressed(){
 counter += 1;
 int randomValue = int(random(10,50));
 int randomValue2 = int(random(100,255));
 int randomValue3 = int(random(100,255));
 int randomValue4 = int(random(100,255));
 int velocity = int(random(1,5));
 Ball b = new Ball(randomValue,mouseX,mouseY,generalDirection,generalDirection1,velocity,velocity,randomValue2,randomValue3,randomValue4,100);
 balls = (Ball[]) append(balls,b);