Recitation 7

Part 1: Grid Pattern

For this part, we need to create a function and make it covers the entire screen. I chose the doughnut to be my pattern because I really miss its flavor during the quarantine.

I first only use numbers to build the image; however, I later found out that I need to make use of variables like ‘x’ and ‘y’. Therefore, I changed my code.

int numberOfInstances = 100;

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

void draw() {
  background(#EDF2F5);
  for (int i = 0; i < 10; i++) {
    for (int j = 0; j < 10; j++) {
      doughnut(i*width/8, j*height/8, color(map(j+8*i, 0, numberOfInstances, 0, 360), map(i+8*j, 0, numberOfInstances, 0, 360), map(4*i+4*j, 0, numberOfInstances, 0, 360)));
    }
  }
}

void doughnut(float x, float y, color c ) {
  noStroke();
  fill(c);
  circle(x-27.5, y, 20);
  circle(x-17.5, y-17.5, 20);
  circle(x-17.5, y+17.5, 20);
  circle(x, y-27.5, 20);
  circle(x, y+27.5, 20);
  circle(x+17.5, y-17.5, 20);
  circle(x+17.5, y+17.5, 20);
  circle(x+27.5, y, 20);

  stroke(222, 152, 186);
  strokeWeight(1.2);
  line(x-27.5, y, x-25.5, y+2);
  line(x-17.5, y-17.5, x-15.5, y-15.5);
  line(x-17.5, y+17.5, x-15.5, y+19.5);
  line(x, y-27.5, x+2, y-25.5);
  line(x, y+27.5, x+2, y+29.5);
  line(x+17.5, y-17.5, x+19.5, y-15.5);
  line(x+17.5, y+17.5, x+19.5, y+19.5);
  line(x+27.5, y, x+29.5, y+2);
}

 

Part 2: Moving Shapes

Since I was not familiar with ‘array’, I went to the array workshop on Monday and learned some basic knowledge about it.

Then, I adapted some parts of the recitation code to my code, and want to make it rotate. However, I made some errors, and the result really funny and awkward.

 

After I fixed the bug, I decided to add some other changes, such as odd-numbered columns rotating clockwise and even-numbered columns rotating counterclockwise, size out and size in. During this period, I asked LA Coco for debugging.

Moreover, I wanted to change the doughnuts’ color when I clicked the screen, but I can only make it change one time. Therefore, I went to another LA’s office hour for help. After I changed the color code under void draw(), I finally reached my goal. 

boolean state = false;

float[] x = new float[10];
float[] y = new float[10];
float[] sizeOut = new float [100];
float r,g,b;
//colorMode(HSB,400);

void setup() {
  size(800, 800);
  for (int i = 0; i < 10; i++) {
    for (int j = 0; j < 10; j++) {
      x[i] = i*width/8;
      y[j] = j*height/8;
      sizeOut[i +10*j] = 17.5;
    }
  }
}

void draw() {
  background(#EDF2F5);
  for (int i = 0; i < 10; i++) {
    for (int j = 0; j < 10; j++) {
      if (sizeOut[i +10*j]> 20.0) {
        sizeOut[i +10*j] = 0;
      } else {
        sizeOut[i +10*j]= sizeOut[i +10*j] +0.1;
      }

      pushMatrix();
      if (j%2 != 0) {
        translate(x[i], y[j]);
        rotate(frameCount/40.0);
        //map(j+8*i, 0, 100, 0, 360) map(4*i+4*j, 0, 100, 0, 360)
        doughnut(0, 0, color(r, g, b), sizeOut[i +10*j]);
      } else if (j%2 == 0) {
        translate(x[i], y[j]);
        rotate(-frameCount/40.0);
       doughnut(0, 0, color(map(j+8*i, 0, 100, 0, 360), map(8*j+i, 0, 100, 0, 360), map(4*i+4*j, 0, 100, 0, 360)), sizeOut[i +10*j]);
      }
      popMatrix();

      
    }
  }
}

void doughnut(float x, float y, color c, float size) {
  noStroke();
  fill(c);
  circle(x-size * 27.5 / 17.5, y, size * 20 / 17.5);
  circle(x-size, y-size, size * 20 / 17.5);
  circle(x-size, y+size, size * 20 / 17.5);
  circle(x, y-size * 27.5 / 17.5, size * 20 / 17.5);
  circle(x, y+size * 27.5 / 17.55, size * 20 / 17.5);
  circle(x+size, y-size, size * 20 / 17.5);
  circle(x+size, y+size, size * 20 / 17.5);
  circle(x+size * 27.5 / 17.5, y, size * 20 / 17.5);
}
void mouseClicked() {
  state = true;
  if (state) {
        //colorMode(RGB, 400);
        r = random(255);
        g = random(255);
        b = random(255);
        //fill(r, g, b);

      }
}

Q1: In the reading “Art, Interaction and Engagement” by Ernest Edmonds, he identifies four situations in an interactive artwork: ‘Static’, ‘Dynamic-Passive’, ‘Dynamic-Interactive’ and ‘Dynamic-Interactive(Varying)’. From the exercise you did today which situations you identify in every part you executed? Explain.

In my opinion, the original exercise two is ‘Dynamic-Passive’ because the program just operates itself and the audience could not interact with it. However, because I added the ‘mouseClicked’ function to make the doughnuts change their color, it becomes a ‘Dynamic-Interactive’ project. The users can interact with the computer even though it is still not a high-level interaction. 

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

I think the benefits must be to simplify the code, making the overall code clear and readable. I may use it when I have lots of similar arrangements that can be organized by an array instead of int them separately.