As the first step of this recitation, I wanted to draw a weird looking face on the canvas, but it took me a while to figure out all the positions. So I did the array function first and then edited the fact to what I intended it to be. So for the first step, I made a face consisting of two small circles as eyes, one triangle as the mouth, and a bigger circle as the face. Here is the code for the face I drew.
void display(float x, float y, color c) {
ellipse(x, y, 100, 100);
stroke(c);
ellipse(x-25, y-25, 10, 10);
ellipse(x+20, y-25, 10, 10);
triangle(x, y+30, x-40, y+20, x+40, y+20);
}
For step 2, I put in a for loop “
for (int a=0; a<100; a++) {
display(x, y, c);}
I first put the for loop in draw(). When I ran the program, I saw the faces I drew popping up on my screen randomly, and they did not stop at 100. However, when I changed it into setup(), the program stopped creating new faces at 100.
In step 3, I started using arrays in determining the position that these faces will appear on the canvas. I defined the number of instances as 100 and put in the array for x, y, and c:
int numberofinstances = 100; float[] x = new float [numberofinstances]; float[] y = new float [numberofinstances]; color[] c = new color [numberofinstances];
The “new” in the array is to make sure that the spots in the array are created.
Then I created two for loops, one in setup and one in draw to include the array function in my program. So the for loop in setup looks like this:
for (int a=0; a<numberofinstances; a++) {
x[a] = random(51,width-50);
y[a] = random(51,height-50);
c[a] = color(random(255), 255, 255);}
and the for loop in draw look like this:
for (int a=0; a<100; a++) {
display(x[a], y[a], c[a]);}
Now the 100 faces I create would appear on the canvas in different colors, but they would not move. To do step 4, I added
float [] xSpeed = new float [numberofinstances]; float [] ySpeed = new float [numberofinstances];
before setup. I also included xSpeed in the two for loops to control its movement. In the end, to restrict the faces that they would only bounce inside the canvas, I used an if statement restricting the width and height of the canvas. Furthermore, to make sure that the edge of the faces would bounce on the sides instead of half of the faces will leave the canvas, I used 50, the radius of the circle as the minimal border for the faces to travel. Here is the if statement:
if (x[a]>width-50||x[a]<50) {
xSpeed[a]=-xSpeed[a];
}
if (y[a]>height-50||y[a]<50) {
ySpeed[a]=-ySpeed[a];
}
Here is my final code.
int numberofinstances = 100;
float[] x = new float [numberofinstances];
float[] y = new float [numberofinstances];
color[] c = new color [numberofinstances];
float [] xSpeed = new float [numberofinstances];
float [] ySpeed = new float [numberofinstances];
void setup() {
size(700, 700);
colorMode(HSB);
for (int a=0; a<numberofinstances; a++) {
x[a] = random(51,width-50);
y[a] = random(51,height-50);
c[a] = color(random(255), 255, 255);
xSpeed[a] = random(-10, 10);
ySpeed[a] = random(-10, 10);
}
}
void draw() {
background(255);
for (int a=0; a<100; a++) {
display(x[a], y[a], c[a]);
x[a]+=xSpeed[a] ;
y[a]+=ySpeed[a];
if (x[a]>width-50||x[a]<50) {
xSpeed[a]=-xSpeed[a];
}
if (y[a]>height-50||y[a]<50) {
ySpeed[a]=-ySpeed[a];
}
}
}
void display(float x, float y, color c) {
//x,y,c local variable
ellipse(x, y, 100, 100);
stroke(c);
ellipse(x-25, y-25, 10, 10);
ellipse(x+20, y-25, 10, 10);
triangle(x, y+30, x-40, y+20, x+40, y+20);
}
Here is the working project.
Question 1: When I put the for loop into draw(), the pattern that I created continuously popped up on the canvas. However, when I put the pattern in setup(), the image I created only appeared 20 times, as that was the number I wanted it to appear. The images appeared in order but moved quite fast. After all of them were on the canvas, they stopped popping up.
Question 2: By using arrays, it is easier for defining various variables at the same time. I wouldn’t need to define a value every single time. By changing a single value in the for loop I could change the number of images appearing on the screen.