Recitation 4: Animation in Processing

Recitation 4: Animation in Processing

  • Partner: N/A
  • Date: 2 March 2018
  • Recitation Leader: Antonius




I was inspired by Vasily Kandinsky’s “Several Circles,” but made my own adaptations and interpreted his work to processing. I decided to use mostly randomly colored and located circles because besides the large blue and black circles, they seem arbitrary, so what better way to represent that than to have circles randomly appear in different ways every time the program runs. However, I did generate the large blue and black circles separately, having the black circle rotate within the blue circle, because it reminds me of an eclipse, the whole work inevitably reminiscent of a planetary system. Planets, i.e. the smaller circles, seem randomly placed, but the larger “moon” and “sun”, i.e. the black and blue circles, are what stay consistent. I decided to make the black circle rotate to reflect axis rotation and movement (at a much faster speed) of planets.

Final Result

When you run the program, first a large blue circle appears with white shading around its borders. Then, a black circle appears, and begins to rotate in the top left area of the large blue circle. Then, at a rate of 5 frames per second, randomly colored circles appear in the window in randomly generated locations within a smaller frame (450,425) within the larger 500×500 frame. The circles cease appearing once the 30 randomly generated circles appear, however the larger black circle continues to rotate.

Processing Code

int w, x, y, z;
int a, b;
int red, green, blue;

void setup() {
size(500, 500);

a = width/250;
b = height/250;
y = width;
z = height;


void draw() {
fill(red, green, blue);

// limit the number of ellipses
if (frameCount <= 30) {
   w = floor(random(width) % 450);
   x = floor(random(height) % 425);
   y = (y + (a + 2)) % 60;
   z = (z + (b + 2)) % 60;

   ellipse(w, x, y, z);

   red = floor(random(255));
   green = int(random(255));
   blue = floor(random(255));

// blue circle with white shading
ellipse((width/3),(height/3), 170, 170);

ellipse((width/3),(height/3), 165, 165);

ellipse((width/3),(height/3), 160, 160);

ellipse((width/3),(height/3), 155, 155);

// this is the blue
ellipse((width/3),(height/3), 150, 150);

// black circle
// fill(0,0,0);
// ellipse(((width/3)-17),((height/3)-17), 100,100);


ellipse(5,10, 100, 100);


Parts of the code are adapted from Antonius’ in-class coding which he posts on Github here, as well as his help with changing the code during recitation. Thanks Antonius!

Problems & Solutions

In the original image, there were around 32 circles depicted, so I decided it would be best to limit the creation of the ellipses at 30, since I had already created the blue and the black circle separately. Antonius helped me create an if-statement in the loop capping the number of ellipses made at a specific frame rate. At one point I had an issue with the bottom right part of my window – there was a large quarter of a black circle. I realized after playing around that the order in which I created the ellipses mattered, and I had to put the line “ellipse (w, x, y, z)” after the equations for w, x, y, and z executed, otherwise the original designations of w, x, y, and z in the set up would show in the frame. I also struggled with adding a transform function to my work; however, after playing around with rotating rectangles, I figured out how to change my original black ellipse within the blue ellipse from static to moving using the matrix transformation and rotation. I struggled a bit using the frame count as the rotation, but using the frame rate was a bit more difficult because I lowered it in the setup function so that the circles would appear at a slower rate. My largest issue when first looking at the picture was how I could create the smaller circles with exactitude, not only in color but also in size and location. However, I realized that given the scale and sense of the work, making randomly colored and located circles works as long as I use the frame in a similar space, as well as have the circles be under a certain size. This random generation even makes me think that if Kandinsky could recreate his own work in processing, it would end up looking like something similar, and the random ellipse generation could reflect his thought process given my interpretation of his work.


Kandinsky’s work and my recreation of it in processing are similar and different. They both have the basic idea, a dark background and 32 circles, with a large blue circle and a black circle inside dominating the page. However, mine differs by having randomly located, colored, and sized (below a certain threshold) circles. Furthermore, my work has the circles appearing, and the large black circle moves around.

Clearly working with paint and canvas is very different than processing because for me, I never had to pick up paper or writing utensil; I could see what I wanted to create in my mind and I did it with words practically. Nevertheless, similar things can be achieved using both methods, and similar ideas can be expressed, such as my interpretation of Kandinsky’s work as a planetary system and my representation of that through movement. Both mediums have value and can create works of value. Of course, everything is dependent on the creator, their skill level, what they are trying to express, and how they express it. Perhaps the same person could not create the same quality of work using the same platforms, but never say never. Computational media is just another way to represent ideas like in any other art form – any media requires a medium of creation, and computational media is no exception.

If I were to create multiple variations, I would perhaps include interactivity with the mouse functions, or perhaps make the ellipses blink by changing their colors. There are many ways to work with the art, and many ways to interpret and present the same ideas from the original painting.

One thought on “Recitation 4: Animation in Processing

Leave a Reply