Documentation — Recitation 8

 Documentation — Recitation 8

By Xiaoyi Cai (Mia)   Date: 4/16/ 2021

• ARRAYS

During the recitation, I made three works based on the graphic I made in the last recitation. 

One: Searching🔎

By using the functions of arrays and float, the flowers with random size and speed, and radius are rotating around a certain point.

Here’s the code:

float angle = 0;

float[] xpos = new float[100];
float[] ypos = new float[100];
float[] sizes = new float[100];


float[] r = new float[100];
float[] theta = new float[100];
float[] speed = new float[100];

void setup() {
  size(800, 800);


  for (int i=0; i<xpos.length; i++) {
    xpos[i] = random(width);
    ypos[i] = random(height);
    sizes[i] = random(10, 35);
    r[i] = random(10, 50);
    theta[i] = random(TWO_PI);
    speed[i] = random(-0.25, 0.25);
  }
}

void draw() {  
  background(250, 247, 217);
  for (int i=0; i<xpos.length; i++) {
    float xOffset = r[i] * cos(theta[i]);
    float yOffset = r[i] * sin(theta[i]);
    theta[i]+=speed[i];
    flower (xpos[i]+xOffset, ypos[i]+yOffset, sizes[i]);
   
  }


  angle += 0.02;
  
}

void flower(float x, float y, float s) {
  stroke(255);
  pushMatrix();
  translate(x, y);
  rotate(angle);
  fill(255, 174, 23);
  circle(0, 0, s);
  for (int a =0; a < 12; a++) {
    rotate(radians(30));
    fill(250, 216, 144);
    ellipse(-s*1.36, 0, s*2, s/2);
  }

  popMatrix();
}

 

Two: Snowing ❄

By using the functions of arrays and if, flowers with random size are falling like snowing.

float angle = 0;

float[] xpos = new float[100];
float[] ypos = new float[100];
float[] sizes = new float[100];


void setup() {
  size(800, 800);


  for (int i=0; i<xpos.length; i++) {
    xpos[i] = random(width);
    ypos[i] = random(height);
    sizes[i] = random(5, 23);

  }
}

void draw() {  
  background(250, 247, 217);
  for (int i=0; i<xpos.length; i++) {
    flower (xpos[i], ypos[i], sizes[i]);
    ypos[i] += 4;
    if (ypos[i] > height) {
      ypos[i] = 0;
    }
  }


  angle += 0.02;
  
}

void flower(float x, float y, float s) {
  stroke(255);
  pushMatrix();
  translate(x, y);
  rotate(angle);
  fill(255, 174, 23);
  circle(0, 0, s);
  for (int a =0; a < 12; a++) {
    rotate(radians(30));
    fill(250, 216, 144);
    ellipse(-s*1.36, 0, s*2, s/2);
  }

  popMatrix();
}

 

Three: Wreath 🏵

By using the functions of arrays and float, the flowers with random size and speed are rotating around the center point of the screen, which shows the shape of a wreath.

Here’s the code:

float angle = 0;

float[] xpos = new float[100];
float[] ypos = new float[100];
float[] sizes = new float[100];


//float[] r = new float[10];
float[] theta = new float[100];
float[] speed = new float[100];

void setup() {
  size(800, 800);

  for (int i=0; i<xpos.length; i++) {
    xpos[i] = random(width);
    ypos[i] = random(height);
    sizes[i] = random(10, 30);
    //r[i] = random(0, 10);
    theta[i] = random(TWO_PI);
    speed[i] = random(0, 0.2);
  }
}

void draw() {  
  background(250, 247, 217);

  fill(250, 216, 144);
  pushMatrix();
  translate(400, 400);
  ellipse(-20, 0, 20*2, 20/2);
  rotate(radians(90));
  ellipse(-20, 0, 20*2, 20/2);
  rotate(radians(90));
  ellipse(-20, 0, 20*2, 20/2);
  rotate(radians(90));
  ellipse(-20, 0, 20*2, 20/2);

  popMatrix();
  fill(255, 174, 23);
  circle( 400, 400, 8);

  for (int i=0; i<xpos.length; i++) {
    float xOffset = 20 * cos(theta[i])*10;
    float yOffset = 20 * sin(theta[i])*10;


    theta[i]+=speed[i];
    flower (width/2+xOffset, height/2+yOffset, sizes[i]);
  }


  angle += 0.02;
}

void flower(float x, float y, float s) {
  stroke(255);
  pushMatrix();
  translate(x, y);
  rotate(angle);
  fill(255, 174, 23);
  circle(0, 0, s);
  for (int a =0; a < 12; a++) {
    rotate(radians(30));
    fill(250, 216, 144);
    ellipse(-s*1.36, 0, s*2, s/2);
  }

  popMatrix();
}

 

• QUESTION:

By using arrays, it will be more convenient for us to write the code, and can also help us to make the code more precise and easily understandable. With the help of arrays, we can store plenty of values with a single name, which enables us to better add functions to the shape we created.

As for my final project, I might use arrays to make our electronic tree more vivid on the computer.

 

• Additional Homework

Here’s the code of the additional homework:

int col = 25, row = 25;
int number = col*row;
int padding = 140;
float defaultSize = 20;

float [] xpos = new float [number];
float [] ypos = new float [number];
color [] colors = new color [number];

void setup(){
  size(800, 800);
  colorMode(HSB, 360, 100, 100);
  rectMode(CENTER);
  
  for( int j = 0; j < row; j++){
    for( int i = 0; i < col; i++){
      int index=i+j*col;
      
      xpos[index] = map(i, 0, col-1, padding, width-padding);
      ypos[index] = map(j, 0, row-1, padding, height-padding);
      colors[index] = color(random(360), 50, 80);
      
      
    }
  }
  
}

void draw(){
  background(0);
  
  for(int i = 0; i<number; i++){
    float offset = dist(mouseX, mouseY, xpos[i], ypos[i]);
    offset = max(offset, 0.01);
    
    float scale = constrain(offset*0.01, 0, 1);
    
    float hue = hue(colors[i]);
    colors[i] = color (hue+1, saturation(colors[i]), brightness(colors[i]));
    
    
    drawShape(xpos[i], ypos[i], colors[i], scale);
  }
    
}

void drawShape(float x, float y, color c, float scale){
  pushMatrix();
  pushStyle();
  
  translate(x, y);
  fill(c);
  noStroke();
  scale(scale);
  rect(0, 0, defaultSize, defaultSize);
  
  popStyle();
  popMatrix();
}