Recitation-5 Interaction Lab : Animation in Processing


Student Name:Angelina Ye

Project:How A Cat Becomes A Lion

Instructor: Moon


This is the first time for me to processing to create animation. My aim is to create a colorful cat who will transform into a lion by the interaction of the “mouse”.

The Paper Draft

  1. The big-face cat-> 

2. My original plan was to make cat’s eyes move from closing to looping circle, but later decided to give up this part and focused on how the cat could transform into the lion.

3. Mark the position of each point in order to facilitate the drawing of animation in processing, which later turned out to be very helpful to do so

4. Process

I first drew the cat face in processing and fill its face with random color, which makes it pretty dynamic. But when I run it, I found: Ooops. I used the line to draw cats’ ears instead of triangle, so there is no way to fill the color of area surrounded by lines. Therefore, I need to find a way to fill the color of the ears. I thought of two possible ways: 1) Redraw the triangle on the existing ears and fill them with random color; 2)put a bigger rectangle beneath the cat’s face

After trying the both ways, I found the first has better visualization effect so I chose the first one.

This shows how I fill in the first ear of the cat. “Patient, Kitty, your another ear will be ready soon:)”

Now the two ears are all filled in random colors. This cat is so cool to have three colors on its face for the most of the time.

Now is the critical step to turn a cat into lion. What is it? YES! Lions have far more hair than cat, and every time the “mouse” moves, the cat will grow gradually into a hairy lion(๑•̀ㅂ•́)و✧

But the cat does not like black and hopes its hair to have the some magical effects as its colorful face, so now its hair has also changed to the random color.

When the cat encounters the “mouse” of different speed and different escaping path, the hair shape will also change:)

Now,  this cat has frightened all the “mouses” in the town and it is pretty lonely and play with its own hair:)))

What I learned from this class:

  1. When drawing the animation in processing, it is really important where to set the origin, because the position of it will change the whole thing, so I need to considerate whether to stick it in the original position(which is on the up left corner) or set it to be at the center of the shape I created (for example the rectangle in this case)
  2. As long as I need to fill the color of a shape later, it is a better idea to create the image with eclipse, rectangle, triangle instead of the combination of the lines. The example of no-color cat ears can be referred to as an example.


  int x;
  int y;
void setup( ) {
  size(500, 500);


void draw() {
  //background face
  //big face
  rect(width/2, height/2, x*12, y*8, 7);

Leave a Reply