I started with searching reference photos in Pinterest. I looked for different simple animations or gif for reference. As "stress" is the theme of my work, I also searched some illustrations about stress.
I also took reference from their colour choices too because emotions are usually linked with colour. During the research phrase, I got a lot of inspirations from the artwork of a Taiwanese motion graphics designer and animator "Min Liu".
I brainstormed my ideas and do some quick sketches on my sketchbooks. My initial idea was to draw an expressive annoying face.
I used Adobe Illustrator to create a draft before doing it on processing. I used some simple shapes to create the face and experiment with different colours. During the process, I further develop the idea to create a coffee cup with a human face.
I aim to create short animation showing the process of pouring coffee to a cup with a human face. The face represents me that I am under stressed and I want to drink coffee to stay focused. However, no matter how much coffee I pour to the cup (me), it never works but making me more annoyed and my eyes, ear and nose turns red.
I created two graphics in illustrator. One is the coffee nad the other is just an layer. The layer is to cover the coffee so when the coffee comes from the top to down, it wont cover the face.
I also imported an image of a cursor and a soundtrack for coffee pouring to the processing file. Since I have one interactive function that is activated by moving the mouse, I wanted to make the cursor look more illustrative to make it fit the overall style.
These are the functions I used for creating the animation.
2D Primitives
ellipse()
rect()
Color
background()
fill()
noFill()
noStroke()
stroke()
Input
mousePressed() mouseX
mouseY
Attributes
strokeWeight()
Environment
size()
noCursor()
Transform
translate()
pushMatrix()
popMatrix()
Image
PImage
Structure
draw()
setup()
class()
Conditionals
if
else
Iteration
for
