Recitation 4: Animation in Processing (Rudi)

Skye Gao

professor Rudi

Recitation 4: Animation in Processing

Step 1: Choosing image

The image I referred to was from Bauhaus School of Arts, The link is below and The image looks like this.


László Moholy-Nagy, T1, 1926. Oil, sprayed paint, incised lines, and paper on Trolit, 55 1/16 x 24 5/16 inches (139.8 x 61.8 cm)

Step 2:

inspired by the image, I wanted to imitate the elements in the picture and make a animation effect of them. So I drew the ellipses, line, and the cross just as the picture and make the white ellipse and the yellow cross rotate along the line and the two ellipse blinking at the same time. I used functions like ellipse(), line(), rect(), framework (), popMAtrix(), pushMatrix(). The code are attached below.


  • What are the differences and similarities between the image you chose in Step 1 and the image you created in Step 2?
  • Do you think that drawing in Processing is different than drawing/painting by hand? How is it different? Why is it different?
  • Is there any value in recreating an existing image/drawing/graphic using computational media? What is it?
  • Do you think that both drawings cause the same feelings in the viewer?
  • If you were to create multiple variations of your drawing, what would these variations be and how would they differ?

Between the image I chose and the image I created, the similarities is the layout of the patterns, cause I just drew it according to the original painting. While the differences are: first, the exact look are not the same, because I was using a computer to draw, I cannot recreate the tactile appeal. Second, I made animation for my creation, let the patterns began to move.

I think drawing by hand is quite different. Personally speaking, I think pairing by hand relies more on the instinct and sense of control towards the pen and color. While painting by computer is more about calculating and programming. I think it is because the material used to paint are different, one is coating while the other are digital pixels.

I think the value of recreating an existing image/drawing/graphic using computational media maybe showing a dynamic way to present the artistic idea. Like I  did in my project, rather than static images, the patterns can move and rotate and blink, which definitely change the feeling in the viewers and thus present a different feelings.

I think for my own variable drawing, I may use the traditional way to compose the disc elements and use animation to make them change. Like changing the color filled into the shape, make the background fade, or make patterns move around the frame.

int c;
int x;
int y;
int m;
int n;
int u;

void setup() {
  size (1000, 300);
  background (#071A48); 
void draw() {
  background (#071A48);

  //draw the white ball and change the gray degree of it
  //if (c>=100 && c<=200){
  //let white ball move along the line
  if (x<=400) {
    x = x + int(frameRate);
    y = y + int(frameRate);
  c=round(random(100, 200));
  ellipse (100+x, 150+y*3/20, 100, 100);

  //draw the yellow cross
  fill (#D1BA67);
  rect(140, 120, 10, 40);
  rect(140, 120, 40, 10);

  //draw the white line
  line(20, 188, 500, 260);

  // draw the yellow ellipse
  if (m<=460 && m>=0) {
    m = m + int(frameRate);
    n = n + int(frameRate);
  fill (#D1BA67);
  ellipse(500-m, 230-n*3/20, 60, 60);

  //draw the black ellipse
  u=round(random(0, 100));
  fill (u);
  ellipse(800, 150, 200, 200);
  println (n);

Leave a Reply