Recitation 7: Functions and Arrays

Recitation Exercise

Task: use the coding concepts covered in this week’s class to create a sketch with many similar items at the same time.

Step 1:

displays some graphic of your own design.

I used 4 shapes to create a cute duck. Since the angle of the arc is unusual, I calculated it out. And the color of the duck’s face and peak should be fixed, otherwise, we could not figure out it is a duck.

Step 2:

Create a for loop in the setup() to display 100 instances of your graphic in a random variety of positions and colors.

At first, I put the for loop in void draw(), but it was blinking, then I changed it to void setup(). Putting for loop in void setup() is like setting the location of those 100 ducks once, and it turns out to be a still graph. However, putting for loop in void draw() is like continuously set the location of those 100 ducks. void draw() is a loop, which means it repeats the action infinitely, so the graph is animated.

Step 3:

Create three Arrays to store the x, y, and color data. In setup(), fill the arrays with data using a for loop, then in draw() use them in another for loop to display 100 instances of your graphic (that’s two for loops total).

At first, the color difference is made by random() in void draw(), and it turns out to be better in setup().

Step 4:

Add individual movement to each instance of your graphic by modifying the content of the x and y arrays. Make sure that your graphics stay on the canvas (hint: use an if statement).

Here’s the final work:

Here’s the code:

color[] c = new color[100];
color[] d = new color[100];
float[] x = new float[100];
float[] y = new float[100];
float[] _x = new float[100];
float[] _y = new float[100];

void setup() {
  size(700, 700);
  for (int i = 0; i < 100; i++){
   c[i] = color(random(255), random(255), random(255));
   d[i] = color(random(255), random(255), random(255));
   x[i] = random(width);
   y[i] = random(height);
   _x[i] = random(-6,6);
   _y[i] = random(-1,1);
  }
  
}
void draw() {
  background(#755446);
  for (int i = 0; i < 100; i = i + 1){
   duck(200, 100, x[i], y[i], c[i], d[i]); 
   if (x[i] + _x[i] > width || x[i] + _x[i]< 0){
    _x[i] = -_x[i];
   }
   if (y[i] + _y[i] > height || y[i] + _y[i]< 0){
    _y[i] = -_y[i];
   }
   x[i] = x[i] + _x[i];
   y[i] = y[i] + _y[i]; 
  }
}

void duck(int x, int y,float a, float b, color c, color d) {
  //Use these parameters to create your graphics
  fill(#E26A45);
  arc(a+25, b+13, 50, 20, 1.5 *PI, 2.5*PI, OPEN);
  fill(#F7D484);
  stroke(c);
  ellipse(a, b, 60,80);
  triangle(a-5, b-40, a, b-55, a+5, b-40);
  fill(d);
  circle(a+10, b-5, 10);
  
}

I camp up with the idea to set new value x, y as _x, _y to let the ducks move, and the If statement set boundaries to prevent them from moving out of the canvas.

Additional Homework

This week assignment is so difficult, so I went to the workshop and learned it. While I could understand these steps through listening, I could not use them if I did it myself. Just as the instructor said, we just need to understand and memorize it. lol

video here:

My code here:

int row=25;
int col=25;
int totalNumber=row*col;
int padding=140;

int defaultSize=10;

float[] xPositionsOriginal = new float [totalNumber];
float[] yPositionsOriginal = new float [totalNumber];
float[] scaleFactors = new float [totalNumber];
float[] xPositions = new float [totalNumber];
float[] yPositions = new float [totalNumber];

float lerpFactors=0.5;

void setup(){
  size(800,800);
  for(int i=0;i<col;i++){
    for(int j=0;j<row;j++){
      int index=j+i*row;
      xPositionsOriginal[index]=map(i,0,col-1,padding,width-padding);
      yPositionsOriginal[index]=map(j,0,col-1,padding,height-padding);
      
      xPositions[index]=xPositionsOriginal[index];
      yPositions[index]=yPositionsOriginal[index];
      scaleFactors[index]=1.0;
    }
  }
}

void draw(){
   background(255);
   for(int i=0;i<totalNumber; i++){
      float circleRadius = dist(mouseX, mouseY, xPositionsOriginal[i], yPositionsOriginal[i]);
      circleRadius=max(circleRadius,0.001);
      
      float newX=xPositionsOriginal[i]-(25/circleRadius)*(mouseX-xPositionsOriginal[i]);
      float newY=yPositionsOriginal[i]-(25/circleRadius)*(mouseY-yPositionsOriginal[i]);
      
      
      xPositions[i]=lerp(xPositions[i],newX,lerpFactors);
      yPositions[i]=lerp(yPositions[i],newY,lerpFactors);
      
      scaleFactors[i]=100/circleRadius;
      scaleFactors[i]=max(scaleFactors[i], 0.4);
      scaleFactors[i]=min(scaleFactors[i], 2);
      //drawCircles(xPositions[i],yPositions[i],sizeFactors[i]);
      fill(0);
      circle(xPositions[i],yPositions[i],scaleFactors[i]*defaultSize);
      }
    }

Documentation

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(). 
At first, I put the for loop in void draw(), but it was blinking, then I changed it to void setup(). Putting for loop in void setup() is like setting the location of those 100 ducks once, and it turns out to be a still graph. However, putting for loop in void draw() is like continuously set the location of those 100 ducks. void draw() is a loop, which means it repeats the action infinitely, so the graph is animated. 

Question 2: What is the benefit of using arrays? How might you use arrays in a potential project?     
The array plays the role to offer many storage space inside. In void setup(), each storage space was packed with one specific data, and then void draw() repetitively showed us the stored data. Since the data in the arrays are memorized, and it can’t be stored without arrays, the graph of step 3 is still but the last one is animated. In my future project, I could utilize the arrays to replace the number when I need to change, which save time and tidy our codes.