Recitation 6：Processing Animation
Given the requirement, at start, i thought to create a image using the circle’s involute, as is depicted in the video.
Next, i dicided to add more interactive element to it, so i made it into a progress bar and visualized the progress by percentage.
Fininshing the loading part, i think of linking this project to the additional homework. So i made a finishing panel and then the program jumps to the additional homework programme:
Additional Homework
1)step 1
void setup(){
size(600,600);
}
void draw(){
background(255);
stroke(0);
strokeWeight(10);
ellipse(300,300,200,200);
}
Except for the basic functions, the program also uses the function “ellipse( )”, “strokeWeight( )” to control the final presentation of the circle.
2)step 2
In this part, the program introduces the variable “R” & “v”, which should both be float and stand for the radium and the velocity of the variation respectively.
float R=50;
float v= 2;
void setup(){
size(600,600);
}
void draw(){
background(255);
strokeWeight(10);
ellipse(300,300,R,R);
if (R>=200 || R<50){
v=-v;
}
R=R+v;
}
3)step 3
In that part, the program uses the colorMode(HSB) and take variable R as the variable to control the color. As R ranges from 50 to 200, and HSB takes data from 0 to 100, the actual input is (R-50)/1.5, so that the color can change fluently.
float R=50;
float v= 2;
void setup(){
size(600,600);
}
void draw(){
background(0,0,255);
colorMode(HSB,100);
stroke((R-50)/1.5,100,100);
strokeWeight(10);
ellipse(300,300,R,R);
if (R>=200 || R<50){
v=-v;
}
R=R+v;
}
4)step 4
Though the final step, it’s actually the simpliest step. To coordinate the center of the ellipse to the mouse, the program uses two global variable: mouseX &mouseY as the X and Y axis of it.
float R=50;
float v= 2;
void setup(){
size(600,600);
}
void draw(){
background(0,0,255);
colorMode(HSB,100);
stroke((R-50)/1.5,100,100);
strokeWeight(10);
ellipse(mouseX,mouseY,R,R);
if (R>=200 || R<50){
v=-v;
}
R=R+v;
}
And then, the final product is like that:
(the code)
(full process)
Q & A Part
I learnt about the parallel capability and the relationship between each branch of the program, like the the setup(), the draw() and how to define it by myself. In my program, i used two defined part: the intf() and ddr(). And the most interesting part is, though i didn’t know at the first place, that they can loop simutaneously as the bigger part does as they are both a part of the draw() . With that characterisitic, i can realize the transition from one loop to another, which is a huge advancement.