Recitation 7

Step 1

I created lightbulbs as my graphics. And repeated into a grid. At first I misunderstood the instructions. I made a shape instead of a function. 

And I also figured out that if I want to display the shape in random sizes and colors, I need to place those settings inside the for loop.

 

 

float x;
float y;

float size;
float r;
float g;
float b;
color c;

void setup() {
  background(50);
  size(1000, 1000);
  noLoop();
}

void draw() {
  for (int i=100; i<width; i+=100) {
    for (int j=50; j<height; j+=100) {

      size=random(50, 100);
      r = random(255, 255);
      g = random(230, 255);
      b= random(0, 255);
      c=color(r, g, b);
      lightbulb(i, j, size, c);
    }
  }
}

void lightbulb(float x, float y, float size, color c) {
  noStroke();
  fill(c);
  ellipse(x, y, size, size);

  triangle(x-size*0.4, y+size*0.3, x+size*0.4, y+size*0.3, x, y+size*1.02);
  rectMode(CENTER);
  fill(0);
  rect(x, y+size*0.9, size*0.4, size*0.1, 28);
  rect(x, y+size*0.8, size*0.4, size*0.1, 28);
  rect(x, y+size, size*0.4, size*0.1, 28);
}

Step 2

I made the graphics move around and bounce within the canvas borders. And I added a little interaction. If I press the mouse, the graphics gather at it. But I did face a problem. I didn’t know how to develop the movement from the original grid pattern, so I set them with random(x,y). If I have a more time, I may try how to let them move around the border of the canvas as well(like once they touch the right side of the wall, they move down along the border to the down side of the wall).

 

int count=100;
float x[]= new float[count];
float y[]= new float[count];

float size[]= new float[count];

float r[]= new float[count];
float g[]= new float[count];
float b[]= new float[count];
color c[]= new color[count];

float xspeed[]= new float[count];
float yspeed[]= new float[count];

void setup() {
  background(50);
  size(1000, 1000);

  for (int i=0; i<x.length; i++) {
    x[i] = random(100,width-100);
    y[i] = random(100,height-100);
    size[i] = random (50, 100);
    r[i] = random(255,255);
    g[i] = random(230,255);
    b[i] = random(0,255);
    c[i]= color(r[i], g[i], b[i]);

    xspeed[i]=random(2,10);
    yspeed[i] =random(2,10);
  }
}

void draw() {
  background(50);
  for(int i=0; i<x.length; i++){
    lightbulb(x[i], y[i], size[i], c[i]);
    if (mousePressed){
    
  x[i]+=(mouseX-x[i])*0.05;
  y[i]+=(mouseY-y[i])*0.05;
  }
  }
  move();
  bounce();
  

}
void move(){
  
  
  for(int i=0; i<x.length; i++){
    
  x[i]+=xspeed[i];
  y[i]+=yspeed[i];
  }
}
void bounce(){
  for(int i=0; i<x.length; i++){
  if(x[i]<=0+size[i]/2 || x[i]>= width-size[i]/2){
    xspeed[i]=-xspeed[i];
    
    
  }
  if(y[i]<=0+size[i]/2 || y[i]>= height-size[i]/2){
      yspeed[i]=-yspeed[i];
    
    
  }
  
  }
}

void mousePressed(){
  for(int i=0; i<x.length; i++){
  x[i]+=mouseX-x[i];
  y[i]+=mouseY-y[i];
}
}

void lightbulb(float x, float y, float size, color c) {
  noStroke();
  fill(c);
  ellipse(x, y, size, size);

  triangle(x-size*0.4, y+size*0.3, x+size*0.4, y+size*0.3, x, y+size*1.02);
  rectMode(CENTER);
  fill(0);
  rect(x, y+size*0.9, size*0.4, size*0.1, 28);
  rect(x, y+size*0.8, size*0.4, size*0.1, 28);
  rect(x, y+size, size*0.4, size*0.1, 28);
}

Question 1

I feel like it was Dynamic Passive at the first part because the size and color can change everytime I reopen the program. But it’s not really interact with me. And at the second part, it was Dynamic Interactive, since the shapes changed and moved by themselves, and I can engage in it activly.

Question 2

An array save us a lot of time and energy if we want create a massive amount of copy of something. We can use it when we want to make an animated poster with complicated patterns.