Recitation 8: Arrays

Step 1:

My previous work is random changing patterns of lipsticks. Their sizes are various and each pattern contains two color variables. 

Code:

float size = 30;
float x;
float y;
void setup() {
  size(660, 660);
  frameRate(6);
}
void draw() {
  background(90, 10, 10);

  for (float i=60; i<width; i+=60) {
    for (float j=60; j<height; j+=60) {
      pattern(i+random(-20, 20), j+random(-20, 20), random (20, 40), random (0, 10), color(random(200, 255), random(10, 200), random(10, 200)), color (random(0,255)));
    }
  }
}
void pattern (float x, float y, float size, float rotation, color c, color c2) {
pushMatrix();
  translate(x, y);
  rotate(rotation);
  noStroke();
  rectMode(CENTER);
  fill (c2);
  rect(0, 0, size, size*2); 
  fill(#F0C000);
  rect(0, 0+size*0.5, size*0.95, size*0.15); 
  fill(c);
  arc(0, 0+size, size*0.7, size*1.3, 0, PI);
  popMatrix();
}

 

Step 2:

In this step I added Arrays as we learned in the lecture class. I changed all the parameters using arrays. 

Code: 

int a = 100;
float xs[] = new float[a];
float ys[] = new float[a];
float size[] = new float[a];
float rotation[] = new float[a];
int c[] = new int[a];
int c2[] = new int[a];
void setup() {
  size(660, 660);
  frameRate(6);
  for (int i=0; i < xs.length; i++) {
      xs[i] = random(50, width-50);
      ys[i] = random(50, height-50);
      size[i] = random(20, 50);
      rotation[i] = random (0, 10);
      c[i] = color(random(200, 255), random(10, 200), random(10, 200));
      c2[i] = color (random(0, 255));
      //pattern[i] (i+random(-20, 20), j+random(-20, 20), random (20, 40), random (0, 10), color(random(200, 255), random(10, 200), random(10, 200)), color (random(0, 255)));
    }
  }

void draw() {
  background(90, 10, 10);
  for (int i=0; i < xs.length; i++) {
    pattern(xs[i], ys[i], size[i], rotation[i], c[i], c2[i]);
  }
}
void pattern (float x, float y, float size, float rotation, color c, color c2) {
  pushMatrix();
  translate(x, y);
  rotate(rotation);
  noStroke();
  rectMode(CENTER);
  fill (c2);
  rect(0, 0, size, size*2); 
  fill(#F0C000);
  rect(0, 0+size*0.5, size*0.95, size*0.15); 
  fill(c);
  arc(0, 0+size, size*0.7, size*1.3, 0, PI);
  popMatrix();
}

Step 3:

To create some various movements I used another array to control the y of patterns. In this way those lipsticks float up and down on the screen. I also added the “checkEdges ()” function as we have learned to limit the graphics within the canvas. 

For the optional requirement, I made another “mousePressed()” function so that when people pressed the mouse the patterns would be positioned randomly again. 

Code: 

int a = 100;
float xs[] = new float[a];
float ys[] = new float[a];
float size[] = new float[a];
float rotation[] = new float[a];
int c[] = new int[a];
int c2[] = new int[a];
float yspeed[] = new float[a];
void setup() {
  size(660, 660);
  frameRate(20);
  for (int i=0; i < xs.length; i++) {
    xs[i] = random(50, width-50);
    ys[i] = random(50, height-50);
    size[i] = random(20, 50);
    rotation[i] = random (0, 10);
    c[i] = color(random(200, 255), random(10, 200), random(10, 200));
    c2[i] = color (random(0, 255));
    yspeed[i] = random(-5, 5);
    //pattern[i] (i+random(-20, 20), j+random(-20, 20), random (20, 40), random (0, 10), color(random(200, 255), random(10, 200), random(10, 200)), color (random(0, 255)));
  }
}

void draw() {
  background(90, 10, 10);
  for (int i=0; i < xs.length; i++) {
    pattern(xs[i], ys[i], size[i], rotation[i], c[i], c2[i]);
  }
  move();
  checkEdges();
}
void pattern (float x, float y, float size, float rotation, color c, color c2) {
  pushMatrix();
  translate(x, y);
  rotate(rotation);
  noStroke();
  rectMode(CENTER);
  fill (c2);
  rect(0, 0, size, size*2); 
  fill(#F0C000);
  rect(0, 0+size*0.5, size*0.95, size*0.15); 
  fill(c);
  arc(0, 0+size, size*0.7, size*1.3, 0, PI);
  popMatrix();
}

void move() {
  for (int i=0; i < xs.length; i++) {
    ys[i] += yspeed[i];
  }
}
void checkEdges() {
  for (int i=0; i < xs.length; i++) {
    if (ys[i]>height-size[i] || ys[i]<size[i] ) {
      yspeed[i] = -yspeed[i];
    }
  }
}
void mousePressed() {
  for (int i=0; i < xs.length; i++) {
      xs[i]=random(50,600);
  }
}

Question: What is the benefit of using arrays? How might you use arrays in a potential project?

The best part I felt using Arrays is that one can set the repeat times of one object, and store different data/variables. Even though I now only set the data as a random variable, I know each data can be managed individually. I also think one array is a way to categorize data in a more complex project. 

For my intended project, the photography studio, arrays are really helpful in controlling the intensity and position of different lights because there are different variables under categories(lights). 

Homework

Part 1

Code: 

int col=25, row=25;
int a =col*row;
int padding=140;
float size=20;
float xs[] = new float[a];
float ys[] = new float[a];
color [] c = new color [a];

void setup() {
  size(800,800);
  colorMode(HSB,360,100,100);
  rectMode(CENTER);
  for (int i=0; i < col; i++) {
    for (int j=0; j < row; j++) {
    int index=i+j*col;
    xs[index]=map(i,0,col-1,padding, width-padding);
    ys[index]=map(j,0,row-1,padding, height-padding);
    c[index]=color(random(360), 50,70);
  }
  }
}
void draw() {
  background(0);    
for (int i=0; i<a; i++) {
    one(xs[i],ys[i], c[i]);
}
}
void one(float x, float y, color c) {
  pushMatrix();
  pushStyle();
  translate(x,y);
  noStroke();
  fill(c);  
  rect(0,0, size, size);
  popMatrix();
}

 

Part 2+3

int col=25, row=25;
int a =col*row;
int padding=140;
float size=20;
float xs[] = new float[a];
float ys[] = new float[a];
color [] c = new color [a];

void setup() {
  size(800,800);
  colorMode(HSB,360,100,100);
  rectMode(CENTER);

  for (int i=0; i < col; i++) {
    for (int j=0; j < row; j++) {
    int index=i+j*col;
    xs[index]=map(i,0,col-1,padding, width-padding);
    ys[index]=map(j,0,row-1,padding, height-padding);
    c[index]=color(random(360), 50,70);
  }
  }
}
void draw() {
  background(0);    
for (int i=0; i<a; i++) {
  float offset=dist(mouseX, mouseY,xs[i],ys[i]);
  offset=max(offset,0.01);
  
  float scale=constrain(offset*0.01,0,1);
  float hue=hue(c[i]);
  c[i]=color(hue+1,saturation(c[1]),brightness(c[i]));
  one(xs[i],ys[i], c[i], scale);
}
}

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