#3 Abstract Clock

This project has 3 components, due by the beginning of class on Wednesday, 9/16:

  1. Meander Reading & Response
  2. Readings & Viewings on Timekeeping
  3. Abstract Clock

1. “Meander” Reading & Response.

Robert Hodgin is a new-media artist and designer who has been professionally active since ~1998.  Earlier this year he developed a project called “Meander“, a “procedural system for generating historical maps of rivers that never existed”.

  • Please read Robert’s 1100-word writeup of his Meander project. (This should take about 7-10 minutes).
  • In a blog post, please write two sentences about something you learned from this writeup.
  • Title your blog post, nickname-meander.
  • Categorize your post 03-Meander.

Robert Hodgin.

2. Readings and Viewings: Timekeeping

You are asked to enrich your concept of clocks and timekeeping by reviewing and/or examining the following resources. Taken together, these readings and viewings should take less than half an hour.

Now:

  • In a blog post, please write two sentences about something that stuck with you from these readings/viewings.
  • Title your blog post, nickname-timekeeping.
  • Categorize your post 03-Timekeeping.

3. Abstract Clock

(Above) “Proposals for Clocks” by David Horvitz

The interactive and dynamic control of visual media over time is a core concern in new media arts. In this  project, you are asked to design an abstract visualization that displays a novel or unconventional representation of the time. Your clock should appear different at all times of the day, and it should repeat its appearance every 24 hours (or other relevant cycle, if desired). You are restricted from using Roman, Arabic, or Chinese numerals, and discouraged from using type; instead, you should make the time readable through other means, such as by visualizing numeric bit patterns, or using iteration to present countable graphic elements.

If your project is judged to be suitable for public display*, it will be presented on rotation with the other students’ projects at Forbes Digital Plaza in the Oakland neighborhood for two weeks.

Through completion of this assignment, you will:

  • Become acquainted with the history of systems and devices for timekeeping
  • Devise technologies and graphic concepts for representing time that go beyond conventional methods of visualization and mediation
  • Refine craft skills in the use of code to govern a spatiotemporal design, by effectively and expressively controlling shape, color, form, and motion

Try to devise a novel graphic concept. I encourage you to seriously question basic assumptions about how time is represented. Feel free to experiment with any of the graphical tools at your disposal, including color, shape, transparency, etc. Naturally, you’ll need to use the hour(), minute(), second(), and millis() functions, but you’re also welcome to use day(), month(), and year() functions in order to build a clock that evolves over longer timescales, lifetimes, etc.

Requirements:

  • Ponder things like biological time (chronobiology), ultradian rhythms and infradian rhythms, solar and lunar cycles, celestial time, geological time, decimal time, historical time, psychological time, and subjective time.
  • Sketch first on paper.
  • Consider how your project will appear and operate in the context of a large LED display in a public square. Note that your project will likely not have an internet connection and should work offline.
  • Create your clock in p5.js.
  • Your design must be 800×600 pixels, please. This is necessary because of the public LED display.
  • In your blog post, embed at least three animated GIFs (or screenshot images) of your clock, showing what it looks like or how it behaves at different times of day.
  • In your blog post, link to your p5 sketch at the Editor web site.
  • Write a paragraph or two (~100-150 words) reflecting on your process and evaluating your product.
  • Document your work by embedding images of paper sketches from your notebook. These could be as simple as photos of your sketches, captured with your phone.
  • Label your project’s blog post with the Category, 03-Clock.
  • Title your project’s blog post with the title, nickname-clock.

Below are some code templates you can use to get started. This p5.js example shows milliseconds that roll-over correctly, in synchrony with the advancing seconds.

// Simple p5.js (JavaScript) Clock Template
// Golan Levin, 2016-2018
 
var prevSec;
var millisRolloverTime;
 
//--------------------------
function setup() {
  createCanvas(300, 300);
  millisRolloverTime = 0;
}
 
//--------------------------
function draw() {
  background(255, 200, 200); // My favorite pink
 
  // Fetch the current time
  var H = hour();
  var M = minute();
  var S = second();
 
  // Reckon the current millisecond, 
  // particularly if the second has rolled over.
  // Note that this is "more correct" than using millis()%1000;
  if (prevSec != S) {
    millisRolloverTime = millis();
  }
  prevSec = S;
  var mils = floor(millis() - millisRolloverTime);
 
  noStroke();
  fill('black');
  var currTimeString = "Time: "+ (H%12)+ ":" + nf(M,2)+ ":"+ nf(S,2)+ ((H>12) ? "pm":"am");
  text(currTimeString, 10, 25);
  text("Hour: "   + H, 10, 40);
  text("Minute: " + M, 10, 55);
  text("Second: " + S, 10, 70);
  text("Millis: " + mils, 10, 85);
 
  var hourBarWidth   = map(H, 0, 24, 0, width);
  var minuteBarWidth = map(M, 0, 60, 0, width);
  var secondBarWidth = map(S, 0, 60, 0, width);
 
  // Make a bar which *smoothly* interpolates across 1 minute.
  // We calculate a version that goes from 0...60, 
  // but with a fractional remainder:
  var secondsWithFraction   = S + (mils / 1000.0);
  var secondsWithNoFraction = S;
  var secondBarWidthChunky = map(secondsWithNoFraction, 0, 60, 0, width);
  var secondBarWidthSmooth = map(secondsWithFraction,   0, 60, 0, width);
 
  fill(40);
  rect(0, 100, hourBarWidth, 50);
  fill(80);
  rect(0, 150, minuteBarWidth, 50);
  fill(120);
  rect(0, 200, secondBarWidthChunky, 50);
  fill(160);
  rect(0, 250, secondBarWidthSmooth, 50);
}

*NOTE about PUBLIC DISPLAY:

Owing to the fact that this will be exhibited on a screen owned by OBID, in a heavily-trafficked public space on University of Pittsburgh property, your work is expected to be G-rated (suitable for a general audience), and will be subject to multiple stages of review. In particular, it is subject to ‘time, place, and manner restrictions‘ and must hew to the following conditions:

  • No depictions of obscenity, nudity, drugs, violence, gore, or death
  • No hate speech, symbols, or insignia
  • No flags or corporate logos
  • No defamation or slander
  • No intense flashing

Please note that your assignment is to produce a clock; the public display of your work is a special opportunity separate from the graded project. You are welcome to make any design you want, but OBID and the University of Pittsburgh are under no obligation to host it.