Step 1:
In Step 1, we were required to make a function that would display a graphic that we designed, utilizing the parameters of x position, y position, and color, in addition to using three different shapes. I attempted to create a motif of a cup, with a diagonal pattern on the outside label. I originally wanted to create a motif of bubble tea, but the ellipses that filled the cup were difficult to create into one shape. I used float x and float y for the parameters of the cup, and float a, float b, and float c as the parameters for the color. To create the cup, I used ellipse, line, and quad to form the straw and actual cup.
void setup () {
size (600, 600);
}
void draw () {
background(255);
cup(300, 250, 255, 255, 255);
}
void cup(float x, float y, float a, float b, float c){
fill(a, b, c);
strokeWeight(5);
ellipse(x, y, 250, 100);
line(x-125, y, x-75, y+300);
line(x-75, y+300, x+75, y+300);
line(x+125, y, x+75, y+300);
fill(0);
quad(x-20, y-125, x+15, y-125, x+15, y, x-20, y);
}
Step 2:
For Step 2, we were to create a for loop in the setup() to display 100 instances of our graphic, in random colors and positions in the rendering. If the for loop is placed in setup(), it produces a static image of the repeated motif in random colors. Since it is in setup(), the code runs once, and does not produce a moving image or a video. The loop function uses random float numbers for both the x and y coordinates, then uses random float numbers for the color.
float x;
float y;
int a;
int b;
int c;
void setup () {
size (600, 600);
background(255);
for(int i=0; i<100; i++){
x =(random(width));
y =(random(height));
a =int(random(255));
b =int(random(255));
c =int(random(255));
cup(x, y, a, b, c);
}
}
void draw () {
cup(300, 250, 255, 255, 255);
}
void cup(float x, float y, int a, int b, int c){
fill(a, b, c);
strokeWeight(5);
ellipse(x, y, 250, 100);
beginShape();
vertex(x-125, y);
vertex(x-75, y+300);
vertex(x-75, y+300);
vertex(x+75, y+300);
vertex(x+125, y);
vertex(x+75, y+300);
endShape();
fill(0);
quad(x-20, y-125, x+15, y-125, x+15, y, x-20, y);
}
When the for loop is under draw(), the function runs continuously from top to bottom until the program is stopped, resulting in a moving image and a video. In contrast to the static picture of the for loop under setup(), the end result is a video that runs 100 times of the original graphic.
float x;
float y;
int a;
int b;
int c;
void setup () {
size (600, 600);
background(255);
}
void draw () {
for(int i=0; i<100; i++){
x =(random(width));
y =(random(height));
a =int(random(255));
b =int(random(255));
c =int(random(255));
cup(x, y, a, b, c);
}
}
void cup(float x, float y, int a, int b, int c){
fill(a, b, c);
strokeWeight(5);
ellipse(x, y, 250, 100);
beginShape();
vertex(x-125, y);
vertex(x-75, y+300);
vertex(x-75, y+300);
vertex(x+75, y+300);
vertex(x+125, y);
vertex(x+75, y+300);
endShape();
fill(0);
quad(x-20, y-125, x+15, y-125, x+15, y, x-20, y);
}
Step 3:
For Step 3, we were instructed to create 3 arrays to store the x, y, and color data. By setting float [] to different values, we were able to state these specific values. The array stores values under a set of data elements, capable of holding any type of data for it to be individually assigned and read.
float [] x = new float[100];
float [] y = new float[100];
float [] z = new float[100];
void setup () {
size (600, 600);
for(int i=0; i<x.length; i++){
x[i] =random(width);
y[i] =random(height);
z[i] =random(255);
}
printArray(x);
printArray(y);
printArray(z);
}
void draw () {
background(255);
for(int i=0; i<x.length; i++){
cup(x[i],y[i],z[i]);
}
}
void cup(float x, float y, float z){
fill(z);
strokeWeight(5);
ellipse(x, y, 250, 100);
beginShape();
vertex(x-125, y);
vertex(x-75, y+300);
vertex(x-75, y+300);
vertex(x+75, y+300);
vertex(x+125, y);
vertex(x+75, y+300);
endShape();
fill(0);
quad(x-20, y-125, x+15, y-125, x+15, y, x-20, y);
}
Step 4:
For Step 4, we were required to add individual movements to each instance, through modifying the content of the x and y arrays. The x and y arrays were assigned to move through the line of code “x[i] += random(-30, 30);
y[i] += random(-30, 30);”, and the speed at which the movements ran would increase as these respective numbers increased.
float [] x = new float[100];
float [] y = new float[100];
float [] z = new float[100];
void setup () {
size (600, 600);
for(int i=0; i<x.length; i++){
x[i] =random(width);
y[i] =random(height);
z[i] =random(255);
}
printArray(x);
printArray(y);
printArray(z);
}
void draw () {
background(255);
for(int i=0; i<x.length; i++){
cup(x[i],y[i],z[i]);
x[i] += random(-30, 30);
y[i] += random(-30, 30);
}
}
void cup(float x, float y, float z){
fill(z);
strokeWeight(5);
ellipse(x, y, 250, 100);
beginShape();
vertex(x-125, y);
vertex(x-75, y+300);
vertex(x-75, y+300);
vertex(x+75, y+300);
vertex(x+125, y);
vertex(x+75, y+300);
endShape();
fill(0);
quad(x-20, y-125, x+15, y-125, x+15, y, x-20, y);
}
Question 1:
In your own words, please explain the difference between having your for loop from Step 2 in setup() as opposed to in draw().
The difference between having the for loop in setup() as opposed to in draw() is that in setup(), the code runs only once and generates a still image, as it is not being constantly repeated for it to be an active image. If the for loop is placed under draw(), however, the for loop is being continuously executed until the program is stopped or noLoop() is called. Under draw(), the function can create animations as it is constantly being repeated.
Question 2:
What is the benefit of using arrays? How might you use arrays in a potential project?
The benefit of using arrays is that you are able to hold any type of data, ranging from numbers, characters, sentences, or boolean values. These types of data are individually assigned and read within each array, making it simpler for the code to be designed. Arrays allow us to store many variables that would normally take much time to set up each individual value, but arrays are instead able to assign values to these data. I might use arrays in a potential project if there are multiple values that would need to be stored, or a multitude of shapes and designs within the function.