Recitation Exercise:
This recitation, I learned how to use functions and arrays in my code to improve the efficiency of the code. By using functions, I can assign them with different roles for operating different actions so that I don’t have to write all the code in the “void setup()” function. The only thing I need to do is to call them when I want to use them. It helps keep the structure of the code clear to understand each step I do.
Step 1:
For the first step, I tried to create an image similar to the Pac-Man. To make this image, I used “arc()” to make the face and the eyebrow, and “ellipse()” to make the eye and the bean eaten by the Pac-Man. I created a function called “display()” that contains the code of different figures. In the parentheses, I set three parameters — “x”, “y”, and “size” — to control the coordinates and the size of those figures.
Step 2:
I created a “for” loop to display 100 copies of my image in different positions and colors. I also added another parameter called “color c” in the parentheses of the “display()” function so that I can change the images’ color.
Then I moved the “for” loop into the “draw()” loop. This time it keeps displaying new images constantly.
Step 3:
In this step, I created four arrays to store the “x”, “y”, “size”, and “color c” data. It turns out that the result is the same as the one of step 2. However, instead of assigning the data to parameters in the “draw()” loop, this time I did so in the “void setup()” and called the “display()” function in the “draw()” loop.
Step 4:
I added two new variables to control the speed of images’ movements. Also, I used two “if” statements to set a boundary at 1/4 width, 3/4 width, 1/4 height, and 3/4 height for the moving images. You can see them only moving around the center of the canvas.
Optional:
Finally, I used the keyword “mousePressed” to control the color of these images. When I press the mouse, the color would change continuously. When I release it, the color stays still. I also added a “keyPressed” so that every time I press the “space” on the keyboard, all the images would come to the center of the canvas. When I release the “space” key, they would move to four directions.
float h = 0;
color c;
int faces = 100;
float[] x = new float[faces];
float[] y = new float[faces];
float[] speedx = new float[faces];
float[] speedy = new float[faces];
float[] size = new float[faces];
void setup(){
size(600,600);
colorMode(HSB,360,100,100);
background(360);
for (int i=0; i<x.length; i++){
x[i] = random(width*0.25,width*0.75);
y[i] = random(height*0.25,height*0.75);
speedx[i] = random(3,5);
speedy[i] = random(3,5);
size[i] = random(5,10);
}
}
void draw(){
background(360);
c = color(h,100,100);
for (int i=0; i<100; i++){
display(x[i],y[i],size[i],c);
x[i] = x[i] + speedx[i];
y[i] = y[i] + speedy[i];
if (x[i] > width*0.75 || x[i] < width*0.25) {
speedx[i] = -speedx[i];
}
if (y[i] > height*0.75 || y[i]< height*0.25) {
speedy[i] = -speedy[i];
}
if (mousePressed == true){
h=h+0.05;
if (h>360){
h=0;
}
}
if (keyPressed){
x[i] = 300;
y[i] = 300;
}
}
}
void display(float x, float y, float size, color c){
stroke(0);
strokeWeight(1);
fill(c);
arc(x,y,size*10,size*10,0,PI+HALF_PI,PIE);
stroke(0);
strokeWeight(size*0.1);
noFill();
arc(x-size*0.6,y-size*2,size*7,size*3,PI,PI+HALF_PI);
fill(0);
strokeWeight(0);
ellipse(x-size*2,y-size*2,size,size);
fill(360,100,100);
ellipse(x+size*1.5,y-size*1.3,size*2,size*2);
}
Question 1:
For step 2, when the “for” loop is in “setup()”, the images stay static, which means that they are only displayed once. However, when the “for” loop is in “draw()”, the program keeps displaying images in different positions. This is because “draw()” is a loop, and if you put any code in the loop, it would operate over and over again. That’s the difference between having the “for” loop in “setup()” and in “draw()”.
Question 2:
Using arrays is easy to store abundant data and different values. For example, if you want to set different values for the same parameter, you can store all the values in one array instead of creating different variables or writing the same code with different values repeatedly. You can easily call the array whenever you want to use a certain value in it. By using arrays, you can make your code tidy and the structure clear to read. In a potential project, I might use arrays to store different values for multiple data such as color, shape, size, position, etc. If possible, I might also use arrays to store different patterns of information so that the program can response to users’ different input in different ways.