·Animate Recitation 5
From top left to bottom right, the arc around the clef’s circle at its bottom will change. The color of the big circle face in the lower layer will randomly change as the player keypresses any letter in the word “music”.
void setup() {
size(700,700);
background(255);
// background rainbow
colorMode(HSB, 100); // set upper bound color parameter 100
for (int i = 0; i < 655; i++) {
for (int j = 0; j < 660; j++) {
stroke(i/7, j/7, 100);
point(i+23, j+18);
}
}
stroke(#4D1946);
strokeWeight(5);
noFill();
rect(20,20,660,660,20);
strokeWeight(20);
stroke(50);
arc(350,350,600,600,0,PI,OPEN);
stroke(100);
arc(350,350,600,600,PI,2*PI,OPEN);
strokeWeight(5);
stroke(90);
fill(#5A256F);
arc(350,350,584,584,0,PI,OPEN);
stroke(70);
arc(350,350,584,584,0.99*PI,2.01*PI,OPEN);
}
void draw() {
noFill();
// top downward neath
strokeWeight(15);
stroke(50);
line(320,150,370,410);
// mid up
strokeWeight(30);
stroke(20);
bezier(300,450,220,350,570,350,380,510);
// mid down
strokeWeight(20);
stroke(10);
bezier(380,510,350,520,240,530,210,410);
// top
strokeWeight(15);
stroke(90);
bezier(360,45,300,60,320,140,320,150);
// left down upward
strokeWeight(35);
stroke(70);
bezier(210,410,200,250,520,230,360,60);
// bottom above
strokeWeight(15);
stroke(30);
bezier(370,410,420,640,370,690,300,660);
// bottom circle
fill(30);
noStroke();
circle(300,620,90);
// circle highlight
int kakdo = mouseX + mouseY;
noFill();
stroke(60);
strokeWeight(10);
arc(300,620,80,80,0,kakdo*PI/width,OPEN);
}
void keyPressed() {
if (key == ‘m’ || key == ‘u’ || key == ‘s’ || key == ‘i’ || key == ‘c’)
{
int b = int(random(50, 100));
noStroke();
fill(82,30,b);
circle(350,350,400);
fill(82,60,b);
circle(350,350,250);
}
}
·Additional Work
1. Create Static Image
2. Make the Circle Contract and Expand
int d = 50;
int speed = 5;
void setup() {
size(600, 600);
}
void draw() {
background(255);
strokeWeight(50-d/10);
circle(300, 300, d);
d = d+speed;
if(d==500 || d==50) {
speed = -speed;
}
}
3. Add Changing Color to Stroke
int d = 50;
int speed = 5;
int h = 0;
void setup() {
size(600, 600);
colorMode(HSB, 359, 99, 99);
}
void draw() {
background(359);
stroke(h);
h += 1;
stroke(h,70,100);
strokeWeight(50-d/10);
circle(300, 300, d);
d += speed;
if(d>=500 || d<=50) {
speed = -speed;
}
if(h>=359) {
h = 0;
}
}
/* If (there’s no colorMode()) {
color will tentatively be 0~255, **(r, g, b) || **(grey) }
Since here’s colorMode(HSB, 0~359, 0~99, 0~99),
**(grey)’s domain will be 0~359 black to white. */
4. Key and Mouse Interaction
int d = 100;
int speed = -3;
int h = 0;
float x = 300;
float y = 300;
float vtc = 0;
float hrz = 0;
float ran = 0;
float dom = 0;
void setup() {
size(600, 600);
colorMode(HSB, 359, 99, 99);
}
void draw() {
background(359);
// Arts
stroke(h);
h += 1;
stroke(h,70,100);
strokeWeight(10-d/10);
circle(x, y, d);
d += speed;
if(d>=100 || d<=20) {
speed = -speed;
}
if(h>=359) {
h = 0;
}
// Move
ran = random(-1,1);
dom = random(-1,1);
x += hrz+ran;
y += vtc+dom;
// Check
if (x > 600) {
x = 600;
hrz = 0;
vtc = 0;
}
if (y > 600) {
y = 600;
hrz = 0;
vtc = 0;
}
if (x < 0) {
x = 0;
hrz = 0;
vtc = 0;
}
if (y < 0) {
y = 0;
hrz = 0;
vtc = 0;
}
if (mousePressed) {
x=300;
y=300;
hrz = 0;
vtc = 0;
}
}
void keyPressed(){
if(key == CODED) {
if(keyCode == UP) {
vtc += -1;
}
if(keyCode == DOWN) {
vtc += 1;
}
if(keyCode == LEFT) {
hrz += -1;
}
if(keyCode == RIGHT) {
hrz += 1;
}
}
}
Special keys go with keyCode, unlike if(key == ‘a’, ‘s’, ‘d’, and ‘w’).
Put into keypressed() {} so that only when keypressed will the code part run.
I use velocity and acceleration to describe the object’s move.