Reading Reflection – Week 2

Are order and randomness truly mutually exclusive? I found it very fascinating when the speaker spoke about the process behind the commission for a building incorporating chance and randomness, the actual procedure of preparing and creating the art was so orderly. Seen in this way, order can lead to, or support the creation of, chaos. On the other hand, there are plenty of examples from nature that shows randomness can lead to order, including in bird swarms and ant colonies. The relationship between order and randomness, therefore, seem to not be so simple.

As much as it is mesmerizing to observe the “creation”  of chance and randomness, I do think randomness should be utilized consciously. It may be easy to leave everything to chance, whether in art or elsewhere, and let it dictate the meaning of the final output; however, incorporating randomness to any work should not take time away from the ideation and meaningful reflection process that needs to happen throughout. Now that I have been introduced to great examples of how randomness can be utilized in art, I hope to explore (the presence or absence of) the boundary between order and chaos, while at the same time ensuring that, unless the main intention of the work is to observe randomness, randomness is not forced and incorporated just for the sake of having it in.

Week 2: Creating Art

Concept

I was intrigued by one particular artwork in the computer graphics magazine and wanted to similarly create a sketch using a single type of shape:

Computer Graphics and Art, May 1976

I was walking along the highline thinking of potential ideas for my sketch when I saw the A3 building and quite liked how the windows were of different widths and colors so I decided to use the building as my inspiration:


Process

I incorporated randomness into my art in multiple ways — in the position and width of the windows, the weight of the strokes, as well as in the choice of colors. I wanted to add interactivity to my sketch this time and after thinking of different ways of incorporating action, I decided to embrace the original inspiration of the A3 building. On a mouse click, if it lands on a window, the corresponding window (home) lights up to give a warm ambience, and if it lands outside of any window, the background changes color to represent the shift from day to night, and vice versa.

Writing the logic for the mouse click action was harder than I expected. I needed to differentiate between a click outside and inside a window (rectangle) to toggle the background, while also checking if the current window being clicked is the same as before to turn the light off.

function mouseClicked() {
  let insideWindow = false;

  for (let r of rectangles) {
    // check if mouse click falls inside a window
    if (mouseX >= r.x && mouseX <= r.x + r.w && mouseY >= r.y && mouseY <= r.y + length) {
      insideWindow = true;
      let newLightPosition = {x: r.x + r.w / 2, y: r.y + length / 6};

      if (lightPosition && lightPosition.x === newLightPosition.x && lightPosition.y === newLightPosition.y) {
        lightPosition = null;
      } else {
        lightPosition = newLightPosition;
      }
      break;
    }
  }
  
  // if mouse click falls outside a window, toggle the background
  if (!insideWindow) {
    lightsOff = !lightsOff;
  }
}

To draw the light and the illumination, I found a sunshine palette online and sketched multiple circles of varying sizes and colors. I learned that the fill function can take a 4th argument for transparency, which I found to be very useful in creating the illuminated effect.

function lightsUp(x, y) {
  noStroke();
  // light bulb light
  fill(255, 228, 169);
  circle(x, y, 10);
  fill(255, 218, 138);
  circle(x, y, 8);
  fill(255, 210, 112);
  circle(x, y, 6);
  fill(255, 201, 83);
  circle(x, y, 5);
  fill(255, 191, 62);
  circle(x, y, 4);
  
  // light bulb illumination
  fill(255, 228, 169, 30);
  circle(x, y, 200);
  fill(255, 218, 138, 30);
  circle(x, y, 300);
  fill(255, 210, 112, 30);
  circle(x, y, 400);
  fill(255, 201, 83, 30);
  circle(x, y, 500);
  fill(255, 191, 62, 30);
  circle(x, y, 850);
}

Reflections & Improvements for Future Work

I am quite happy about how the sketch turned out, especially the way the light is drawn in multiple layers. I also got to incorporate many of the concepts we learned in class into p5.js, including loops, mouse clicks, booleans, global/local variables and arrays. As this sketch is more or less a static work with simple mouse click triggers, I hope to continue exploring randomness and play with transformations to create live continuous actions on the canvas in the next assignments.

Week 1: Self-Portrait

Concept

I wanted my portrait to be somewhat realistic and visually representative of me to a certain extent, so I put a great emphasis on colors. I pulled up a photo of myself online and used a Chrome extension (ColorZilla) to find the exact colors of my facial features, i.e. eyes, brows, cheeks, lips, skin, hair, and used them in my sketch. The blue background color is taken from a photo of a clear sky I took 2 weeks ago on campus.

Process

I finished a bulk of my sketch before our second class when we learned it is actually possible to find precise coordinates using our mouse.  Even though it was a very tedious process to guess the coordinates of where I wanted my shapes to be and do some rough calculations in my head, in hindsight, I think it was helpful as it led to lots of experimentation that made sketching any shape more intuitive later on.

There are many different ways to draw nose and lips, but I decided to use triangles for both based on sculpting techniques. To sculpt nose and lips, it is very common to create triangular blobs out of the clay first and then shape them delicately with your fingers, so I used that idea in my sketch.

The part I found to be the most difficult was the hair. The first time I created the hair, I was using many individual shapes, which made it not only overly complicated but also unfitting with the rest of the sketch.

//   hair
  fill(56, 48, 47);
  rect(160, 50, 275, 50);
  rect(160, 100, 50, 250);
  rect(385, 100, 50, 250);
  triangle(210, 100, 240, 100, 210, 150);
  triangle(355, 100, 385, 100, 385, 150);
//   hair top edges
  fill(101, 163, 204);
  triangle(160, 50, 210, 50, 160, 120);
  triangle(445, 50, 395, 50, 445, 130);

After trying out different shapes, I realized that I could use the same combination of circle and rectangle I used for my neck for the hair. Sketching the hair this way made it look a lot better, as there were no strange angles and gaps anymore. This also became a reminder that, sometimes, simple solutions can lead to much better outcomes.

//   hair
  fill(56, 48, 47);
  rect(167, 159, 264, 190);
  circle(299, 170, 265);

Finally, I added two musical notes to my sketch to represent my love for music. I wanted my portrait to be symmetrical, so I sketched both notes to be on either side of the sketch to follow the same symmetrical pattern. I had learned to find coordinates using my mouse at this point, so sketching the notes took a lot less time than most of the other shapes on the portrait.

//   left musical note
  fill(0);
  stroke(0);
  strokeWeight(2);
  ellipse(49, 106, 17, 12);
  ellipse(89, 126, 17, 12);
  line(57, 72, 57, 102);
  line(97, 93, 97, 123);
  line(57, 72, 97, 93);
// right musical note
  ellipse(499, 126, 17, 12);
  ellipse(539, 106, 17, 12);
  line(507, 94, 507, 124);
  line(547, 73, 547, 103);
  line(507, 94, 547, 73);

Reflections & Improvements for Future Work

I had a lot of fun working on my portrait. I began working on this assignment quite early without having read through the documentation first to check all of its functionality, so it is mostly based on what we learned in class and is limited to 2D primitive shapes only. Next time, I want to experiment with curves and transformations, and play with the draw function to create animations. As I focused on making the sketch (somewhat?) realistic this time, I hope to explore my creativity and produce more imaginative pieces next time!