Recitation 6 : Johnny
float b = 0; float k = 0; float q = 0; void setup() { size(600, 600); background(0); for (int a=0; a<=6; a++) { fill(100, 10+50*a, 125); rect(100*a, 100*a, 100, 100); } for (int a=0; a<=6; a++) { fill(196, 10+50*a, 255); rect(100*a, 500-100*a, 100, 100); } for (int a = 0; a<=20; a++) { fill(166-10*a, 252-10*a, 73+5*a); triangle(0, 100+10*a, 200, 300-5*a, 0, 500-10*a); fill(255-10*a, 249-10*a, 70+5*a); triangle(600, 100+10*a, 400, 300-5*a, 600, 500-10*a); } for (int a = 0; a<=5; a++) { fill(245-30*a, 95-10*a, 97+10*a); triangle(100+10*a, 600, 300, 400+10*a, 500-10*a, 600); fill(57+30*a, 77-5*a, 245-30*a); triangle(100+10*a, 0, 300, 200-10*a, 500-10*a, 0); } for (int a = 0; a<=6; a++) { fill(153+40*a, 225-30*a, 252-20*a); ellipse(50+100*a, 50+100*a, 100, 100); } for (int a = 0; a<=6; a++) { fill(100+40*a, 252-30*a, 200-20*a); ellipse(50+100*a, 50+100*a, 80, 80); } for (int a = 0; a<=6; a++) { fill(13+40*a, 191-30*a, 134-20*a); ellipse(50+100*a, 50+100*a, 60, 60); } for (int a = 0; a<=6; a++) { fill(21+40*a, 171-30*a, 152-20*a); ellipse(50+100*a, 50+100*a, 40, 40); } for (int a = 0; a<=6; a++) { fill(13+20*a, 225-10*a, 52+30*a); ellipse(50+100*a, 50+100*a, 20, 20); } for (int a = 0; a<=6; a++) { fill(237-20*a, 110+30*a, 50+20*a); ellipse(50+100*a, 550-100*a, 100, 100); } for (int a = 0; a<=6; a++) { fill(137-20*a, 10+30*a, 100+20*a); ellipse(50+100*a, 550-100*a, 80, 80); } for (int a = 0; a<=6; a++) { fill(191-20*a, 60+30*a, 150+20*a); ellipse(50+100*a, 550-100*a, 60, 60); } for (int a = 0; a<=6; a++) { fill(150-10*a, 120+30*a, 180+20*a); ellipse(50+100*a, 550-100*a, 40, 40); } for (int a = 0; a<=6; a++) { fill(50+30*a, 182-30*a, 230-30*a); ellipse(50+100*a, 550-100*a, 20, 20); } for (int a = 0; a<=4; a++) { fill(10+20*a, 8+30*a, 255-25*a); rect(255+20*a, 500, 10, 10+10*a); fill(10+20*(4-a), 8+30*(4-a), 255-25*(4-a)); rect(255+20*a, 580, 10, -10-10*(4-a)); } } void draw() { if (keyPressed == true) { if (key == 'a' || key == 'A') { float r1 = random(0, 255); float g1 = random(0, 255); float b1 = random(0, 255); float r2 = random(0, 255); float g2 = random(0, 255); float b2 = random(0, 255); for (int t = 0; t<=9; t++) { for (int a = 0; a<=20; a++) { fill(r1-10*a+(r2-r1)*t/50, g1-10*a-(r2-r1)*t/50, b1-10*a+(r2-r1)*t/50); triangle(0, 100+10*a, 200, 300-5*a, 0, 500-10*a); fill(r2-10*a+(r2-r1)*t/50, g2-10*a-(r2-r1)*t/50, b2-10*a+(r2-r1)*t/50); triangle(600, 100+10*a, 400, 300-5*a, 600, 500-10*a); } } } else if (key == 's' || key == 'S') { float r1 = random(0, 255); float g1 = random(0, 255); float b1 = random(0, 255); float r2 = random(0, 255); float g2 = random(0, 255); float b2 = random(0, 255); for (int l = 0; l<=60; l++) { for (int a = 0; a<=5; a++) { fill(r1-30*a+(r2-r1)*l/50, g1-10*a+(r2-r1)*l/50, b1+10*a+(r2-r1)*l/50); triangle(100+10*a, 600, 300, 400+10*a, 500-10*a, 600); fill(r2+30*a+(r2-r1)*l/50, g2-5*a+(r2-r1)*l/50, b2-30*a+(r2-r1)*l/50); triangle(100+10*a, 0, 300, 200-10*a, 500-10*a, 0); } } float kk = 10 * sin(k*0.3); for (int a = 0; a<=4; a++) { fill(10+20*a, 8+30*a, 255-25*a); rect(255+20*a, 500, 10, 10+10*a+kk); fill(10+20*(4-a), 8+30*(4-a), 255-25*(4-a)); rect(255+20*a, 580, 10, -10-10*(4-a)-kk); } k+=1; } else if (key == 'd') { float qq = 10 * sin(q*0.3); for (int a = 0; a<=6; a++) { fill(153+40*a, 225-30*a, 252-20*a); stroke(0); ellipse(50+100*a, 50+100*a, 100+qq, 100+qq); } for (int a = 0; a<=6; a++) { fill(100+40*a, 252-30*a, 200-20*a); ellipse(50+100*a, 50+100*a, 80+qq, 80+qq); } for (int a = 0; a<=6; a++) { fill(13+40*a, 191-30*a, 134-20*a); ellipse(50+100*a, 50+100*a, 60+qq, 60+qq); } for (int a = 0; a<=6; a++) { fill(21+40*a, 171-30*a, 152-20*a); ellipse(50+100*a, 50+100*a, 40+qq, 40+qq); } for (int a = 0; a<=6; a++) { fill(13+20*a, 225-10*a, 52+30*a); ellipse(50+100*a, 50+100*a, 20+qq, 20+qq); } for (int a = 0; a<=6; a++) { fill(237-20*a, 110+30*a, 50+20*a); ellipse(50+100*a, 550-100*a, 100+qq, 100+qq); } for (int a = 0; a<=6; a++) { fill(137-20*a, 10+30*a, 100+20*a); ellipse(50+100*a, 550-100*a, 80+qq, 80+qq); } for (int a = 0; a<=6; a++) { fill(191-20*a, 60+30*a, 150+20*a); ellipse(50+100*a, 550-100*a, 60+qq, 60+qq); } for (int a = 0; a<=6; a++) { fill(150-10*a, 120+30*a, 180+20*a); ellipse(50+100*a, 550-100*a, 40+qq, 40+qq); } for (int a = 0; a<=6; a++) { strokeWeight(1); fill(50+30*a, 182-30*a, 230-30*a); ellipse(50+100*a, 550-100*a, 20+qq, 20+qq); } q+=1; } } }
In total there are 3 kinds of interaction. The first one is that if you press the “a”, the color in the right and the left triangle will change. The second is that if you press “s”, the color of the triangle on the top and at the bottom and the volume will change as well. The third is that if you press the “d”, the circles will repeatedly become big and small.
During the making process, actually, I have encountered some silly little questions. The first obstacle I encounter is the first animation part. When I do the sketching last week, I didn’t think too much about the structure, thus making me forget to put the setup() and draw(). As a result, I failed to make the whole things move, but with the help of the fellow, they quickly correct the mistake. The second challenge is that I do not know how to make the color have the effect of shading. One fellow suggests me using the nested loop, which means that based on my original code, use another “for” outside of it so that I can split the second into more moments. This actually is a very difficult math problem. Because my original code for these triangles is a function relevant to the position. So if I am going to add another variable, which is the time into it, the math equation is not easy. The last problem is about how to make the rectangle move in a repeated way. When I was troubled by this, a fellow told me that I could use the sin and cos function to do that. Out of expectation, the process is really easy and the outcome is really good, I will talk about it in detail in the homework part.
float x = 0; int i = 0; int a = 300; int b = 300; void setup() { colorMode(HSB, 360, 100, 100); size(600, 600); } void draw() { float ii = 250+100*sin(0.05*i); background(359, 0, 99); x = x +10; float xx = 150+130*sin(0.002*x); strokeWeight(20); stroke(xx, 75, 75 ); circle(a, b, ii); i += 1; float q1 = dist(a, 0, a, b); println(q1); float q2 = dist(a, 600, a, b); float q3 = dist(0, b, a, b); float q4 = dist(600, b, a, b); println(q1); if (keyPressed && key == CODED) { // 185 = (250 +100)/2[the maximum radius of the circle] + 10[stokeweight] if (keyCode == UP && q1 >185 ) { b--; } else if (keyCode == DOWN &&q2 > 185) { b++; } else if (keyCode == LEFT && q3 > 185 ) { a--; } else if (keyCode == RIGHT && q4 > 185) { a++; } } }
This is the homework and as required, it can periodically expand and contracts, and the color of it will change smoothly. It will follow the up, down, left, and right key on the keyboard. And also, it will never go beyond the border.
During the learning process of this week, the most interesting thing is about knowing the draw() function. This is the first time I know that it can repeat so many times a second so that our human eyes will mistake it as animation. And also I was surprised at how convenient it is to use the sin() and cos() functions to reach the purpose of making things repeatedly. But there is still confusion inside of my heart, sin and cos don’t change linearly. I still don’t know how to make it change linearly, for example changing proportionally to the time or some other variable. There are lots of useful functions and I will make a list of those I would like to use often.
sin(), cos(), mouseX, mouseY, keyPressed, keyCode, draw(), setup(), for(){}, if(){}, mousePressed