HW2: Loops

CONCEPT

I took inspiration from this one example shown in the COMPUTER GRAPHICS and ART magazine for May, 1976  suggested by the professor. It made me think of buildings and cables under walls. In my sketch, I attempt to imitate a nightlife of a residential building, with the light in the windows randomly turning off and on, and the cables exposed over the walls indicating some activity.

IMPLEMENTATION

I created three functions to draw each element of the sketch: cables, windows, and walls. FrameRate function is set to 1 because the change is too fast-paced otherwise and the sketch looks less like a building in a night time.

I started by making the overlapping cables, which created the outline for the brick walls and windows. The cables are done in a for loop nested three times: the first time to draw multiple rectangles over itself, the second time to make a row of those rectangles, and the third time to make it a grid. The rectangles overlap with each other in a row, to make a narrow compartment for a window to fit snugly into. The outline of the rectangle is different each time because, in my mind, it makes sense that a change of color signals whether the cable is on or off.

For windows, I have used a nested loop to make a grid of rectangles. An array of two colors and a random function are used to update the fill value. This helps to imitate the lights being turned off and on in each apartment unit and gives the building some life.

I had the most struggles drawing the bricks. Initially, I wanted to make a 6 by 4 grid of brick walls so that they don’t go beneath the windows but stay separately from one another. However, when I tried implementing that, the editor would crash. I assume that it’s because I have nested the for loop 4 times. I tried a few more times until I realized that it would be easier to make a singular 50 by 27 brick wall and call this function before the other two.

Essentially, all three of my functions are similar to one another. I attach the brick wall function snippet because it took me the longest to come up with.

//drawing the bricks
function brickBuild() {
  noStroke();
  fill(222);
  let brX = 0;
  //initial Y indentation
  let brY = 33;

  for (brGridH = 0; brGridH < 50; brGridH++) {
    //move the row down
    brY = brY + 9;
    //initial X indentation for each row
    brX = 28;

    for (brGridW = 0; brGridW < 27; brGridW++) {
      //draw 12*8 brick
      rect(brX, brY, 12, 8);
      //move to the left
      brX = brX + 13;
    }
  }
}

WHAT WOULD I CHANGE

Perhaps, to make the sketch imitate a residential building more closely I could make each of the windows update the fill value at a different point so that they would change the colors asynchronously. The cables could do the same things (change asynchronously), but I would also add a pulsation effect when they change their color and width/height values.