Having read the book”Learning with Processing”, I created my own animation. The name of my character is Nigo, and it can move with my mouse and the color of the background can change with the click of the mouse.
Here is my code:
void setup(){
size(600,600);
}
void draw(){
background(255);
smooth();
frameRate(30);
ellipseMode(CENTER);
rectMode(CENTER);
//head of the nigo
fill(#F5E12F);
ellipse(mouseX,mouseY-140,90,160);
fill(0);
ellipse(mouseX,mouseY-80,40,40);
fill(255);
ellipse(mouseX,mouseY-70,10,10);
//body of he nigo
fill(#6ABF7D);
rect(mouseX,mouseY,40,120);
//hands of the nigo
noFill();
strokeWeight(4);
arc(mouseX+3, mouseY-20, 70, 70, PI, PI+QUARTER_PI);
arc(mouseX+43, mouseY-20, 70, 70, PI, PI+QUARTER_PI);//bug!!the direction of right hand!!!But it is OK look like this.
//legs of the nigo
strokeWeight(4);
line(mouseX-20,mouseY+60,pmouseX-40,pmouseY+90);
line(mouseX+20,mouseY+60,pmouseX+40,pmouseY+90);
int r = int(random(0, 255));
int g = int(random(0, 255));
int b = int(random(0, 255));
if(mousePressed){
background(r,g,b);
}
}
Additional Homework:
Step 1:
Creating a circle in the middle is quite easy since we have learned in class:
Step 2:
The circle need to be periodically expands and contracts, but I met some difficulties. The circle can expand and contract, but the diameter of the circle always go from 0 like this:
After carefully thinking, I found that the int circleSize should not be 0. And after I made changes, it look like this:
Step 3:
Follow the hint, I search the HSB mode of color which each stands for hue,saturation and brightness and each value range from 0-360,0-100,0-100.
Step 4:
I used the keyPressed function to control the circle and it looks like this:
The code:
int circleSize = 120;
int circleX = 300;
int circleY = 300;
int b = 2;
void setup() {
size(600,600);
colorMode(HSB);
background(255);
}
void draw() {
colorMode(HSB);
background(255);
stroke(circleSize,100,255);
fill(255);
strokeWeight(20);
ellipse(circleX,circleY,circleSize,circleSize);
circleSize = circleSize + b;
if (circleSize >= 300 || circleSize<=100) {
b = b * -1;}
if (key == CODED) {
if (keyCode == UP) {
circleSize–;
} else if (keyCode == DOWN) {
circleSize++;
} else if(keyCode == LEFT) {
circleX–;}
else if(keyCode == RIGHT) {
circleX++;}
}
}
The list of function I used and the notes I took(the picture is not clear enough but I can refer to my note when I need them ):
colorMode()
mouseX,mouseY
if()statement
keyPressed()