Focus Grid Book

Cover

“Make sure you are using your time appropriately” -Don Adleta, 2014

Initial Grids

Initially, we were instructed to create a collection of simple sketches of grids that were not iconographic or textural in nature. This was to be achieved by using a grid no less the 10×10 or no more than 16×16. These sketches are simple in nature, but well thought out in anticipation of alterations.

After a group critique, we selected the two grids that were both vastly versatile in future expansion as well as not being too analogous to others in the class. The two that were determined for me to explore are shown on the next spread, both of which are exceptionally simple in comparison to some of my other studies which I felt were more visually stimulating.

Square Grid Manipulations

With the square grid, I found myself gravitating to alterations that did not hide or destroy the grid but seemed to expand the space in the grid, at times creating optical illusions that would make the viewer see black in the gaps between the squares also with the alteration of the size of the white space causing an appearance of concave or convex surfaces. 

I quickly came to recognize that the minimalism of the grids was not a hindrance as I dreaded but rather a great liberator for artistic exploration. The simplicity of the grids allowed an appropriate amount of structure that lent them to various astonishingly pleasing alterations. The act of taking away only white or black was a gratifying process that allowed me to produce striking compositions in a short amount of time.

Circle Grid Manipulations

The most alluring explorations to come from the grid of circles. Some of the studies, upon a second look, reminded me of pop-art artists such as Roy Lichtenstein, as seen in Figure 1, and Keith Haring, figure 2. The most successful has a white line that intersects each circle in a continuous line that links all circles together, while also allowing each one to remain its own entity.

I quickly came to recognize that the minimalism of the grids was not a hindrance as I dreaded but rather a great liberator for artistic exploration. The simplicity of the grids allowed an appropriate amount of structure that lent them to various astonishingly pleasing alterations. The act of taking away only white or black was a gratifying process that allowed me to produce striking compositions in a short amount of time.

Selected Manipulations

With further exploration of the most successful study, I found that keeping the line relatively simple keeps the aesthetic the most interesting. Many times in a trance-like state producing sketches at a fast pace paying mind only to the natural flow of the grid as I felt it at the time these moments of inspiration produced sketches with a simple yet astatically pleasing flow.

Color Studies

The application of color brought out the true appeal of the grid. The closure principle of Gestalt comes into effect in some studies where it looks like there is an actual line going through each circle consecutively.

Application of the grid

After much consideration of an application, I decided to take on the task of rethinking the clock. This was a daunting task; the clock has been around for centuries. In researching clocks, I concluded that I should make an easy-to-read clock that could be applied to a clock application within a twenty-four-hour time zone clock. I also found that the trending websites for international time zones are visually appalling and hard to navigate with ease. I have decided to use the coding software processing to create a clock and use the application Brackets to make a website.

As I researched the functionality of the clock, I decided to not follow the conventional clock formats of digital or analog, but instead to develop a new timekeeping system. My reimagined system consists of three ellipses varying in opacities that grow from the left side of the standard top or 12-time placements. The ellipses then slowly shrink into nothingness, visually demonstrating how the seconds, minutes, and hours are gradually diminishing as the day goes by.

As I looked into different ways of making a functional timekeeping system I decided on using Processing, an open-source program developed by Fathom Information Design, University of California, Los Angeles Arts Software Studio, and New York University’s Interactive Telecommunications Program. Processing is a simple form of writing code that can easily be converted into Javascript. The code I wrote pulls the time from the user’s computer and then translates this into degrees. These different degrees translate to the correct time. To the right is the initial code in Prepossessing as well as the result of that code. I commented on the code to show how each line of code performs.

void setup(){
  size(500,500); // Set the size of the canvas.
  noStroke(); //Remove stroke from shapes.
  smooth(); // Smooth jagged edges of shapes.
}

void draw(){
background(#79BD8F); // Sets the background color.

  fill(#2B3644); // Draw a stationary blue base circle.
  ellipse(width/2, height/2, 300, 300); // Draw a stationary blue base circle.

  translate(width / 2, height / 2); // Translate the origin to the center of the canvas.

// Calculate angles for the hour, minute, and second hands.
float ah = map(hour()+minute()/60.0,0,24,0,radians(180)); // Hour hand angle.
  float am = map(minute()+second()/60.0,0,60,0,radians(360)); // Minute hand angle.
  float as = map(second(),0,60,0,radians(360)); // Second hand angle.

  rotate(radians(270)); // Rotate the canvas to set the starting point at 12 o’clock.

  // Draw the hour hand.
  fill(#f32e1b, 200); // Set the color and transparency for the hour hand.
  arc(0, 0, 300, 300, ah, radians(360)); // Draw the hour hand as an arc.

  // Draw the minute hand.
  fill(#FFFF9D, 150); // Set the color and transparency for the minute hand.
  arc(0, 0, 300, 300, am, radians(360)); // Draw the minute hand as an arc.

  // Draw the second hand.
  fill(#FF6138, 200); // Set the color and transparency for the second hand.
  arc(0, 0, 300, 300, as, radians(360)); // Draw the second hand as an arc.
}