Recitation 7: Functions and Arrays
By Lifan Yu (ly1164)
When no keys are pressed, the shapes donât move.
When a key is pressed, the shapes began to move and bounce within the canvas.
A video of this:
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().
When the for loop is in setup(), the shapes donât move around. It only runs once. The shapes did appear in different random places when I run my code again and again, but even when time goes by, they always stay the same as they were when the code began to run.
In setup(), code only runs once. Like this:
In draw(), code runs in loops. In every frame, the shapes appear in different places. The for loop runs again and again in draw(), so the shapes move in a designed pattern according to the code in for loop() and the code that include variables from for loop().
like this:
Question 2ďźWhat is the benefit of using arrays?
In my code, there are numerous shapesâ100 of them. Also, every shape has a different position on the canvas. If I use individual variables to represent the coordinates, my code will be very complexâI will have to use different variables for different shapes. There is going to be more than 100 variables written out!
If there is something similar to formula that includes all the variables of the same kind and the patterns of their changes, I will only need to write my code once to create multiple shapes.
When I include the variables in an array, it dramatically simplifies my code because I can create and trace multiple variables of the same kind at the same time.
How might you use arrays in a potential project?
When I want to create a project that displays numerous shapes at the same time (and, the changes of their variables share a common pattern) I will use arrays with for loops to generalize their patterns, representing multiple variables using one array.
When I write the code for shapes or colors, I can write down the arrayâs name in the coordinate functions or in the fill()/stroke() functions.
ăCodeă(Final Version)
int shapes = 100;
float[]x = new float [shapes];
float[]y = new float [shapes];
float[]d = new float [shapes];
float[]R=new float [shapes];
float[]r=new float [shapes];
float[]size = new float [shapes];
float[]speedX = new float[shapes];
float[]speedY = new float[shapes];
color[]c = new color[shapes];//colors of the triangles
float angle=0;
float angleSpeed;//the smaller ellipses' rotating speed
int i=0;
int D=40;//half the length of the bottom
int I=0;//x coordinate of an anchor point
int H=0;//y coordinate of an anchor point
int k=100;//controls sizes of the shapes
int R1=150;//controls the size of the smaller ellipses' orbit
int r1=5;//the smaller ellipses' radius
void setup(){
size(1000,1000);
background (70, 255, 295);
for (i=0; i<100; i++){
x[i]=random(width);
y[i]=random(height);
size[i]=random(1,2);
d[i]=40*size[i];
R[i]=100*size[i];
r[i]=5*size[i];
speedX[i]=random(5);
speedY[i]=random(5);
c[i]=color(random(500),random(500),random(500));
smooth();
angle=0;
angleSpeed=PI/10;
}
}
void draw(){
if (keyPressed==true){
background (10,57,48);
for(int i=0; i<100; i++){
display(x[i], y[i], d[i], R[i], r[i], size[i], c[i] );
x[i]=x[i]+speedX[i];
y[i]=y[i]+speedY[i];
angle+=angleSpeed;
if(x[i]>=width||x[i]<=0){
speedX[i]=-speedX[i];
}
if(y[i]>=height||y[i]<=0){
speedY[i]=-speedY[i];
}
}
}else{
background(70,255,259);
for(I=0;I<30; I++){
for(H=0;H<30; H++){
fill (random(500),random(500),random(500));
strokeWeight(1);
stroke(0);
triangle (k*I-D, k*H, k*I+D, k*H, k*I, k*H-1.73*D);
line (k*I, k*H, k*I, k*H-1.73*D);
noFill();
ellipse (k*I, k*H-0.577*D, 1.1418*D, 1.1418*D);
angle+=angleSpeed;
ellipse ( k*I+R1*cos(angle), k*H-0.577*D+R1*sin(angle), r1,r1);//smaller ellipses
}
}
}
}
void display(float x, float y, float d, float R, float r, float size, color c){
fill (c);
strokeWeight(4);
stroke(random(500),random(500),random(500));
triangle (size*(x-d), size*y, size*(x+d), size*y, size*x, size*(y-1.73*d));
line (size*x, size*y, size*x, size*(y-1.73*d));
noFill();
ellipse (size*x, size*(y-0.577*d), size*(1.1418*d), size*(1.1418*d));
angle+=angleSpeed;
fill (random(500),random(500),random(500));
ellipse ( size*x+R*cos(angle), size*y-0.577*d+R*sin(angle), r,r);//smaller ellipses
}
At first, when I still havenât figured out how to use arrays, my code looked like this:
float angle=0;
float angleSpeed;//the smaller ellipses' rotating speed
int d=40;//half the length of the bottom
int i=0;//x coordinate of an anchor point
int h=0;//y coordinate of an anchor point
int k=100;//controls sizes of the shapes
int R=150;//controls the size of the smaller ellipses' orbit
int r=5;//the smaller ellipses' radius
void setup(){
size(800,800);
background (70, 255, 295);
smooth();
angle=0;
angleSpeed=PI/50;
}
void draw(){
for(i=0;i<30; i++){
for(h=0;h<30; h++){
fill (random(500),random(500),random(500));
triangle (k*i-d, k*h, k*i+d, k*h, k*i, k*h-1.73*d);
line (k*i, k*h, k*i, k*h-1.73*d);
noFill();
ellipse (k*i, k*h-0.577*d, 1.1418*d, 1.1418*d);
angle+=angleSpeed;
ellipse ( k*i+R*cos(angle), k*h-0.577*d+R*sin(angle), r,r);
}
}
}
When I started using arrays, my code looked like this:
(I combined these two and made the final version above)
int shapes = 100;
float[]x = new float [shapes];
float[]y = new float [shapes];
float[]d = new float [shapes];
float[]R=new float [shapes];
float[]r=new float [shapes];
float[]size = new float [shapes];
float[]speedX = new float[shapes];
float[]speedY = new float[shapes];
color[]c = new color[shapes];//colors of the triangles
float angle=0;
float angleSpeed;//the smaller ellipses' rotating speed
int i=0;
void setup(){
size(1000,1000);
for (i=0; i<100; i++){
x[i]=random(width);
y[i]=random(height);
size[i]=random(1,2);
d[i]=40*size[i];
R[i]=100*size[i];
r[i]=5*size[i];
speedX[i]=random(5);
speedY[i]=random(5);
c[i]=color(random(500),random(500),random(500));
smooth();
angle=0;
angleSpeed=PI/10;
}
}
void draw(){
background (10,57,48);
for(int i=0; i<100; i++){
display(x[i], y[i], d[i], R[i], r[i], size[i], c[i] );
x[i]=x[i]+speedX[i];
y[i]=y[i]+speedY[i];
angle+=angleSpeed;
if(x[i]>=width||x[i]<=0){
speedX[i]=-speedX[i];
}
if(y[i]>=height||y[i]<=0){
speedY[i]=-speedY[i];
}
}
}
void display(float x, float y, float d, float R, float r, float size, color c){
fill (c);
triangle (size*(x-d), size*y, size*(x+d), size*y, size*x, size*(y-1.73*d));
line (size*x, size*y, size*x, size*(y-1.73*d));
noFill();
ellipse (size*x, size*(y-0.577*d), size*(1.1418*d), size*(1.1418*d));
angle+=angleSpeed;
fill (random(500),random(500),random(500));
ellipse ( size*x+R*cos(angle), size*y-0.577*d+R*sin(angle), r,r);//smaller ellipses
}