Week 3 - Homework 1: Animating scene from a movie (Inception)

For this week's first assignment we had to make an animated version of last week's homework. Last week, I drew (using Processing) a picture based on this picture from the movie 'Inception' (2010):
My drawing ended up looking like this:

To animate this drawing, I decided I wanted to make the pen move across the paper. And to make the pen movement look more natural, I also animated her hand and arm and the line she's drawing as well.

The result

The code

//To make pen, hand, thumb and arm move. Setting the animation starting point
float transX = 0;
float transY = 0;
//To make the line she's drawing gradually appear. Setting the animation starting point
float lineEndX = 230;
float lineEndY = 165;

void setup(){
size(800, 400);
}

void draw(){
background(158, 168, 167);

//Cobbs' jacket
noStroke();
fill(26);
ellipse(100, 100, 350, 500);

//Fence the notebook is resting on
fill(43, 29, 29);
pushMatrix();
rotate(radians(50));
rect(0, -60, 1000, 50);

//Fence, lower bar paralell to the bar the notebook is resting on
rect(100, 130, 1000, 50);
popMatrix();

//Fence, the bar from the ground
pushMatrix();
rotate(radians(350));
rect(0, 0, 50, 500);
popMatrix();

//The notebook
fill(255);
pushMatrix();
//getting the right angle of the notebook
rotate(radians(295));
//Moving it to the right place
translate(-240, 190);
rect(0, 0, 250, 200);
popMatrix();

//Maze lines
pushMatrix();
stroke(0);
//The line she's drawing
line(lineEndX, lineEndY, 230, 165);
//line(190, 151, 230, 165); - the static version of the line. Kept for reference
// I got the lines below to form a box, but all needed to be moved slightly
translate(-10, -5);
//The box, line order: right, left, top, bottom
line(130, 280, 240, 330);
line(210, 110, 310, 160);
line(130, 280, 210, 110);
line(320, 160, 240, 330);
popMatrix();

//to make the line slowly grow from starting point
lineEndX = lineEndX - 0.3;
lineEndY = lineEndY - 0.1;

//setting the loop: the line resets when the pen resets
if (lineEndX < 190){
  lineEndX = 230;
}

if (lineEndY < 151.6) //I noticed that this number needed the decimal 0.6, otherwise the animation became out of sync after a few repetitions
{
  lineEndY = 165;
}

//Arm
pushMatrix();
translate(transX, transY); // See 'Pen' section for details
stroke(240, 156, 103);
strokeWeight(2);
fill(255, 186, 143);
rect(350, 103, 500, 60);
popMatrix();

//The hand drawing
pushMatrix();
translate(transX, transY); //see 'Pen' section for explanation
//Getting the right angle of her hand
rotate(radians(15));
ellipse(330, 30, 190, 100);
popMatrix();

//Hand holding the notebook
pushMatrix();
//Getting the right angle of her hand
rotate(radians(15));
ellipse(315, 300, 190, 100);
popMatrix();

//Pen
noStroke();
fill(41, 38, 38);
pushMatrix();
translate(transX, transY);
rotate(radians(10));
rect(250, -40, 13, 150);
//Pen tip, order of coordinates: top left corner, top right corner, bottom corner
triangle(250, 108, 263, 108, 256, 125);
popMatrix();

transX = transX - 0.3; //to move pen x-coord.
transY = transY - 0.1;

//setting the loop: the pen resets when the line ends
if (transX < - 40){
  transX = 0;
}

if (transY < - 13.35){
  transY = 0;
}

//Thumb holding the pen
pushMatrix();
translate(transX, transY); //to move together with the hand and pen
stroke(240, 156, 103);
strokeWeight(2);
fill(255, 186, 143);
ellipse(273, 100, 110, 30);
popMatrix();

//Hair (totally realistic right?)
noStroke();
fill(54, 17, 1);
rect(425, 0, 600, 400);

//Jacket, order of coordinates: left corner, right corner, top corner
fill(84, 1, 1);
triangle(385, 400, 800, 400, 800, 110);

//Jacket lapel, same dimensions as the jacket, but scaled down
fill(70, 3, 3);
scale(0.5);
translate(665, 200);
triangle(385, 400, 800, 400, 800, 110);
}

I began by animating the pen tip, which is made of a triangle. At first I tried to figure out where the triangle should be when it reached the end if the line by simply changing its coordinates; but I quickly realised it would be very time consuming, since it has six numbers that needed to be changed. Instead, I used translate to be able to move the entire triangle more efficiently.

To animate the pen tip, I declared the variables float transX and float transY, which I used for translates X- and Y-coordinates (trans being a short form of translate). I declared them at the value 0, setting the starting point for the animation. To make the triangle move, I initalized them like this:
transX = transX - 0.3;
transY = transY - 0.1;
The numbers needed to be different so that it would move at the same angle as the line she draws. And to make it stop at the end of the line and start over from the beginning, I used these statements:
if (transX < - 40){
  transX = 0;
}
if (transY < - 13.35){
  transY = 0;
}
To get the numbers of where the animation should start over I had to guess and run the animation a few times.

After I was happy with the pen tip, I only had to copy and paste the translate(transX, transY) to animate the rest of the pen, hand, thumb and arm as well (occasionally adding push- and popMatrix if it wasn't there already).

The last step was making the line she's drawing gradually appear. I declared the variables float lineEndX = 230 and float lineEndY = 165;, setting the both ends of the line at the same coordinates. For initalizing, I used the same numbers as for transX and Y to get the speed correct. I used two more statements to make the line stop 'growing' when it reached the point where the line ended in last week's assignment except for if (lineEndY < 151.6) where I noticed I had to add a decimal; otherwise the animation for the lineEndY would gradually become more and more out of sync with lineEndX. I could not quite figure out why. If anyone understands why please tell me! :)