Recitation Exercise:
During this recitation, I modified my original work into an animation version, in which the color of the blocks and the stroke can be changed randomly, and more blocks would be added as you click the keyboard “Q”. I wanted to turn it into a more abstract way similar to Piet Mondrian’s painting Composition II in Red, Blue, and Yellow. The “keypressed” function is useful to turn this abstract work into a more lively genre, and it looks like the process of constructing buildings by adding blocks.
The most interesting functions that I used:
- for (int i=0;i<110;i+=100){
strokeWeight(5);
rect (random (width),random(height),random(200),random(200));
The for loop is a useful way to add patterns to my work and I can control how many patterns can be added.
- arc (500,500,30,30,0,1.5*PI);
the first and the second number is the position of the center of the arc, instead of the starting point. The last two numbers is the angle where the arc starts and ends. It would be useful if I use PI instead of numbers.
For the coefficient of PI, QUARTER can be useful.
- void keyPressed(){
if (key==’q’||key==’Q’){
Use ‘ ‘ instead of “”.
Video:
Code:
void setup(){
size (900,600);
background (#A8C1BC);
frameRate(10);
}
void draw(){
}
void keyPressed(){
if (key==’q’||key==’Q’){
stroke (random(255));
strokeWeight(10);
rect (0,0,100,100);
rect (200,0,100,100);
stroke (random(100),random(100),random(255));
fill (random(100),random(100),random(255));
rect (400,0,100,100);
rect (600,0,100,100);
stroke(random(255),random(100),random(100));
rect (100,100,100,100);
rect (300,100,100,100);
rect (500,100,100,100);
fill (#459DD6);
rect (700,100,100,100);
stroke(random(100),random(255),random(100));
strokeWeight(50);
fill (random(100),random(255),random(100));
rect (0,200,100,100);
rect (200,200,100,100);
rect (400,200,100,100);
rect (600,200,100,100);
fill (#DEEBF5);
rect (100,300,100,100);
fill (#BCF734);
rect (300,300,100,100);
stroke(random(255),random(100),random(100));
strokeWeight(20);
rect (500,300,100,100);
rect (700,300,100,100);
rect (0, 400,100,100);
stroke(#090F03);
rect(200,400,100,100);
fill (random(100),random(255),random(100));
rect(400,400,100,100);
stroke (random(100),random(100),random(255));
rect (600,400,100,100);
stroke (#BCF734);
line (0,0,100,100);
stroke (random(100),random(100),random(255));
line (500,100,600,200);
stroke (random(255),random(100),random(100));
strokeWeight (10);
line (100,300,200,400);
stroke(#EA397A);
strokeWeight(5);
noFill();
arc(250,50,100,110,1.1*QUARTER_PI,5*QUARTER_PI);
arc(250,450,150,200,0,1.7*PI);
stroke (random(100),random(255),random(100));
fill(random(100),random(255),random(100));
arc(350,350,100,100 ,0, 3*QUARTER_PI);
arc(750,150,50,80,2,5*QUARTER_PI);
stroke (random(100),random(100),random(255));
strokeWeight(1);
fill(random(255),random(255),random(255));
arc(200,300,20,20,0,1.2*PI);
arc(250,350,60,80,1.2*PI, 2*PI);
arc(300,300,50,50,2*PI, 2.5*PI);
arc(450,240,150,150,0,PI);
arc (500,500,30,30,0,1.5*PI);
for (int i=0;i<110;i+=100){
strokeWeight(5);
rect (random (width),random(height),random(200),random(200));
}
}
}
Homework:
For the first and the second step, it is important to define several variables at the beginning so that it won’t be messed up later. To use int or float can be decided after playing the animation and see whether the extent of the change of the position is proper. I used the method of defining a formula containing two variables to control the change of size of the circle.
At first, it did not work because I forgot to declare the equation “k=k+i” before the “if” and “else” section.
For the third step, I learned how to change the color of the stroke smoothly according to the reference page. After setting the colorMode(HSB) in the setup section, I used the if and else function with a variable “l” to set a loop for color changing.
For the fourth step, I learned how to use the direction key on the keyboard to change the position of the subject, according to the reference page. First of all, it is important to make sure to set the “keycode” mode first. Then for the specific direction key, only the “==” works, instead of “=”.
Video:
Code:
int i=2;
float k=200;//////
float l=0;
int m;
int n;
void setup(){
size(600,600);
colorMode(HSB);//////
m=width/2;
n=height/2;
}
void draw(){
background(255);
noFill();
strokeWeight(15);
ellipse(m,n,k,k);//STEP 1
k=k+i;//////
if (k< 100){
i=2;
k=k+i;
}
if (k>=300){
i=-i;
k=k+i; //STEP 2
}
stroke(l,255,255);//////
if (l<254){
l++; //////
}
else{
l=255-l;
} //STEP 3
}
void keyPressed(){
if (key == CODED){ //////
if (keyCode == UP){ //////
n = n – 20;
}
if (keyCode == DOWN){
n = n +20;
}
if (keyCode == LEFT){
m = m -20;
}
if (keyCode == RIGHT){
m = m +20;
} //STEP 4
}
}