Week 2 - Scene from a movie

For this week's assignment I picked the movie 'Inception' (2010) which is a movie I really like. When I picked an image from the movie that I wanted to draw in Processing, I looked for an image that contained mostly shapes similar to the 2D primitives available in Processing. It was not particularly hard to find images fitting that description, since 'Inception' revolves a lot around architecture.

I chose this picture to draw:

The picture is from the scene where the character Cobb approches the character Ariadne with a job proposal; but before he tells her what the jobs entails, she has to design a maze that takes two minutes to draw and one minute to solve.

Besides having suitable shapes for the 2D primitives, I chose this picture because it did not have too many similar colors.

Here is my artistic rendition of the picture, made in Processing:

I focused on what shapes the image contained and how I could translate them into Processing. As you can see, I did not draw all the lines that form the maze, as it would take quite some time. The hair and hands are a bit overly simplistic, otherwise I feel like my rendition comes quite close to the original!

The code:

size(800, 400);
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(200, 151, 230, 165);
// 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();

//Arm
stroke(240, 156, 103);
strokeWeight(2);
fill(255, 186, 143);
rect(350, 103, 500, 60);

//The hand drawing
pushMatrix();
//Getting the right angle of her hand
rotate(radians(15));
ellipse(330, 30, 190, 100);

//Hand holding the notebook
ellipse(315, 300, 190, 100);
popMatrix();

//Pen
noStroke();
fill(41, 38, 38);
pushMatrix();
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();

//Thumb holding the pen
stroke(240, 156, 103);
strokeWeight(2);
fill(255, 186, 143);
ellipse(273, 100, 110, 30);

//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 found great help in using the comment function (//) to keep some order in my code and to not forget what code made which shape, as I ended up with many shapes of the same kind (many ellipses and rectangles).

Many of the shapes also needed to be rotated to get the same angle is in the picture from the movie. And to not have chaos in my code, it was very useful to use pushMatrix and popMatrix to keep the order of the coordinates. I also used translate sometimes after rotating and scaling to put the shape where I wanted it to be, and also when needing to move several shapes the same amount of pixels.