What I did in class:
In this session, I am asked to create an animation by Processing. Having learnt how to create a canvas, draw images on it and decide their color, this week I learn how to make these pictures into animation. There is an extra requirement that I have to include keyboard or mouse in the interaction. I decide to adapt my code I did last week.
My original code shows a girl’s sad face. I decide to make the image funnier by changing the girl’s eye position when the mouse is near the girl’s eye. When the mouse is far from the eye, the girl will fall asleep.
My code:
void setup(){
size(660,640);
}
void draw(){
background(#F8FAE8);
stroke(0,0,0);
fill(0,0,0);
ellipse(260,300,320,320);
fill(0,0,0);
if (mouseX<290 & mouseX>200 & mouseY<260 & mouseY>180){
fill(#F8FAE8);
ellipse(240,220,80,80);
fill(#F8FAE8);
noStroke();
ellipse(150,380,80,80);
fill(0);
ellipse(mouseX,mouseY,40,40);
}else{
background(200,100,255);
fill(0,0,0);
ellipse(260,300,320,320);
fill(200,100,255);
rect (200,220,100,10);
fill(200,100,255);
noStroke();
ellipse (150,360,150,80);
}
fill(0);
ellipse(110,230,100,100);
fill(0,0,0);
ellipse(380,190,40,40);
ellipse(415,190,40,40);
ellipse(450,190,40,40);
ellipse(485,190,40,40);
ellipse(520,190,40,40);
ellipse(555,190,40,40);
ellipse(555,225,40,40);
ellipse(555,260,40,40);
ellipse(555,295,40,40);
ellipse(555,330,40,40);
ellipse(555,365,40,40);
}
Additional Homework:
For the additional homework, I am asked to create a circle that keeps expanding and contracting periodically, whose position is decided by the mouse’s position. And the circle will change its color periodically too.
float a= 300;
float b=0;
float c=1;
void setup(){
size(600,600);
colorMode(HSB,100);
}
void draw(){
background(#FFFFFF);
stroke(b,100,100);
b=b+c;
if(b== 100){
c=-0.5;
}
if(b==0){
c=0.5;
}
strokeWeight(20);
ellipse(mouseX,mouseY,a=a+2,a=a+2);
if(a==400){
a=-a;
}if(a==-100){
a=-a;
}
}
Reflection：
What I find difficult in the recitation is that if I change the background color at the end of the code, the whole image will be affected. To avoid this, I simply add a more background code at the beginning of the draw code. However, the fellow tells me that maybe I can use the pushStyle and popStyle to avoid this issue.
What I find hard in additional homework is how to make the circle contract. I find that when the size number is under 0, the size will be the absolute value of the number, so I simply make “a=-a” in the code.
Interesting functions:
colorMode( )
mouseX/mouseY
if( )
“==” and “=” are different : “==” is used for comparing two numbers, “=” is used for valuation