In this week’s recitation, we worked with processing again. This time, we used functions and arrays to create a sketch that would display an object 100 times in random coordinates.
Step 1.
We were told to create a function that consists of at least three different shapes and contains x, y, and color parameters. I made a square screaming face with two ellipses as the eyes, a small box for the mouth and a big square for the face. After I write the code, I make sure to put parameters in the sizes and one of the color variables.
Step 2.
I created a loop function to run my drawing 100 times. The loop contains random float numbers for the x and y coordinates and the three color variations. Below is the code and the drawing.
Step 3.
I made arrays to store the variables of the color, x, and y coordinates. I fill the array in the setup() with for loop and I made another for loop in the draw() to make my drawing run for 100 times.
Step 4.
I added some movement to the drawing by adding. I also added a function to limit the movement of the drawing so that it would stay on the canvas. The code looks like this:
This is what happens when I run it:
Lastly, I added a function that would stop the loop when the key is pressed. The whole code looks like this:
float[] x = new float[100];
float[] y = new float[100];
float[] col = new float[100];
float col2 = 0;
float col3 = 0;
void setup() {
size(800, 800);
background(0);
for(int i=0; i<100; i++) {
x[i] = random(width);
y[i] = random(height);
col[i] = random(255);
}
printArray(x);
println();
printArray(y);
}
void draw(){
background(0);
for (int i=0; i<100; i++){
scream( x[i], y[i], col[i], random(255), random(0,255));
x[i] += random(-3, 3);
y[i] += random(-3, 3);
//interaction
if (mousePressed == true) {
noLoop();}
if(x[i]> width){
x[i] = x[i] - random(width);}
if (x[i] <= 80){
x[i] = x[i] + random(width);}
if(y[i]+40 >= height){
y[i] = y[i] - random(height);}
if (y[i]-40 <= 0){
y[i]= y[i] + random(width);}
}}
void scream(float x, float y, float col, float col2,float col3){
fill(col, col2, col3);
noStroke();
rect(x-105,y-40,130,130);
fill(0);
strokeWeight(5);
stroke(col3, col2, col); //#F5E981
rect(x-70,y+30,55,55);
fill(col2, col3, col);//#F59481
noStroke();
ellipse(x-80,y,20,40);
ellipse(x,y,20,40);
}
Question 1:
If i put my for loop in setup(), the code will only run once. While if i put my for loop in draw(), the code will run repeatedly.
Question 2:
Arrays are useful if you want to store a lot of variables in a function without having to write long lines of codes. For example, it can be applied when we want to assign variables that changes values. If we were using the usual for loops, then the code would be long and prone to errors. But if we declare the values in arrays and use them in the function then the whole process would be a lot simpler and shorter.