6/11/2022
In recitation 6, our task is to use Processing to create interactive animated web pages. In this task, my first consideration is how the graphics should be styled and moved. Of course, I didn’t make up my mind at first until I saw an introduction to the Vortex function on the Processing’s tutorial site, which I thought was relatively in line with my vision, so after going through the introduction, I decided to use the Vortex function to make a movable rose.
Here is where I found the introduction of Vortex:
https://processing.org/reference/vertex_.html
Later, when writing the code, I thought that if I could control the color of the rose through the buttons, it might be able to effectively increase the interactivity of the web page, but I encountered certain problems in the actual operation – I designed a random number, when it is selected in the Different colors appear in different ranges. However, when I press the keys, the screen does not respond. After I asked the professor for help, it turned out that the code was in the wrong place, so I put it behind the Draw code. The screen then runs smoothly and responds to key controls.
Finally, I added a title that also changes color, and the production is almost complete. Although my design this time is just a simple animation, as the first animation I made myself, I still have a special feeling for it. After all, “the nine-story tower starts from the earth”. Hopefully in the future I will have more opportunities to show my interest in programming.
Here is my code and video:
void setup() {
size(1024, 768);
}
void draw() {
strokeWeight(15);
stroke(255,113,113,64);
background(255);
for (int i=0; i<299; i=i+45) {
int vertexCount = int(map(i, 0, 299, 40, 100));
mPolygon(width/2, height/2, vertexCount, i, i/10);
} {
textSize(100);
text("IMA ROSE", 320, 100);
}
}
void keyPressed() {
noStroke();
float value = random(1, 10);
println(value);
if (value < 2) {
fill(0, 66);
println(value);
} else if (value > 9) {
fill(255, 113, 113, 64);
} else if (2 < value && value < 3) {
fill(72, 65, 72, 49);
} else if ( 3 < value && value < 4) {
fill(113, 255, 113, 89);
} else if ( 4 < value && value < 5) {
fill(113, 113, 255, 75);
} else if ( 5 < value && value < 6) {
fill(113, 75, 113, 55);
} else if ( 6 < value && value < 7) {
fill(20, 155, 173, 93);
} else if ( 7 < value && value < 8) {
fill(245, 255, 45, 85);
} else if ( 8 < value && value < 9) {
fill(255, 0, 0, 47);
}
}
//where????
void mPolygon(int x, int y, int numOfVertex, int br, int rOff) {
beginShape();
for (int i=0; i<numOfVertex; i++) {
float pingPong = sin(radians(millis()/6.0+20*i));
float r = br+map(pingPong, -1, 1, -rOff, rOff);
vertex(x+cos(radians(i*360/numOfVertex))*r, y+sin(radians(i*360/numOfVertex))*r);
}
endShape(CLOSE);
}