1.Choosing:
This is a screenshot of my chat with a friend. I use the emoji “roll my eyes” to express my annoyance and boredom. I find this emoji pretty amusing and I was wondering if it could be dynamic.
2.Thinking:
Based on observation, I find that the emoji itself has shadows and gradual changes of colors, and it also consists of a number of geometric features including circles, ellipses, and lines. For the gradual changes of colors, I drew multiple circles with different colors overlapping each other to achieve this effect. Also, I animate the eyes’ position by importing a global variable.
3.Drawing:
I first drew a sketch on the paper. And annotate every key X,Y coordinates.
Then here is what I did on the Processing.
The final work is similar to the original emoji, but there are still some differences. One thing is that the gradual color change is different, because in the emoji, the lower part of the face is darker while the upper part is lighter. But in my work, the perimeter of the face is darker, for I used three concentric circles with different radii. However, with the help of Processing, it is more fun to use the emoji, for the user can see the actual process of the eyes rolling.
4. Annex:
Below is my code:
int y=291;
int speed;
void setup() {
size(900,600);
}
void draw(){
background(255);
noStroke();
fill(255,174,23);
circle(450,290,200);
fill(255,190,23);
circle(450,290,190);
fill(255,217,23);
circle(450,290,180);
fill(255,229,23);
circle(450,290,160);
fill(0);
circle(400,290,70);
circle(500,290,70);
fill(200);
circle(400,290,68);
circle(500,290,68);
fill(255);
circle(400,291,60);
circle(500,291,60);
fill(0);
ellipse(400,y,25,21);
ellipse(500,y,25,21);
if(y==291){
speed=-1;}
y=y+speed;
if(y==266){
speed=1;}
stroke(144,92,39);
strokeWeight(8);
line(430,330,470,330);
stroke(111,71,30);
strokeWeight(4);
line(430,328,470,328);
}