Right Twice a Day

Christian Swinehart |

Mapping Time

Preliminaries

Gather all the necessary software and files to get started:

The P5.js site has an extensive Reference section with a full listing of the drawing commands that make up its API. It’s also got a somewhat sparser set of Tutorials that might help you get started (but mostly seem to be written to an audience that’s familiar with the original Processing environment so YMMV).

For this assignment, make sure you’ve got a handle on these basics:

Your project files are also set up to allow you to use a pair of exceedingly useful libraries (though don’t feel like you need to learn them immediately). Take a look at their documentation pages and see if anything jumps out at you:

  • lodash – the unnoficial 'standard library' of javascript with utility functions for every use-case under the sun
  • chroma – powerful color-math functions useful for interpolating between colors, applying hue/saturation/brightness transformations, etc.

To get yourself situated, try looking over the sample code in the examples directory. Note the basic form of each of the programs (i.e., their setup() and draw() definitions), how they employ the drawing commands listed above, and particularly their use of variables to hold partial computations and for-loops to encapsulate repeated procedures.

Dataset

For this project the ‘data’ you'll be working with are the numerical aspects of time. You should familiarize yourself with the clock() function I've provided to help access the current date & time. The function returns a time Object with the current instant broken down into individual components. You can get numerical values for hour, min, sec, and ms on the time side of things and year, season, month, moon, day, and weekday if you’re interested in dates.

For instance, you can use the current year to work backwards:

var now = clock()
var age = 64
var born = now.year - age
print(`A ${age}-year-old would have been born in ${born}`)

To determine what half of the day it currently is, access the am and pm attributes, each of which contains a Boolean. You could conceivably use this to set the background color depending on whether it’s before- or afternoon.

function draw(){
  var now = clock()
  
  if (now.pm){
    background(0)
  }else{
    background(255)
  }
}

The object returned by clock() also provides a mechanism for measuring the current time in terms of the cyclic features of the calendar. By accessing fields of its progress attribute, you can get the fraction of various periods that have elapsed before the current moment. The clock represents progress as a number between 0 and 1 for each of: year, season, moon, month, week, day, halfday, hour, min, and sec.

For instance, if you wanted to be fairly literal and draw a progress bar for the day, try drawing a black rectangle whose width is proportional to the ‘doneness’ of the current 24-hour cycle:

function draw(){
  background(255)
  noStroke()
  fill(0)

  var now = clock()
  var pct = now.progress.day
  rect(0,0, width*pct, height)
}

The full set of attributes you can access via the clock function is as follows:

var now = clock()

// numerical values for elements of current time
now.hours // hour in 0–23 'military' time
now.hour  // hour in 1–12 'am/pm' time
now.min   // minute
now.sec   // seconds
now.ms    // milliseconds
now.am    // true for hours 0-11
now.pm    // true for hours 12-23

// numerical values for elements of current date
now.year    // the full 4-digit year
now.month   // month number 1–12
now.moon    // the fullness of the moon 0–1.0
now.day     // the day 1–{28,29,30,31}
now.weekday // the day of the week 1-7
now.season  // the current season 1-4 (starting with spring)

// a string-based representation that can be used as an argument to clockStart
now.timestamp // "2001/12/31 23:45:56"

// values between 0.0 and 1.0 measuring the current time's %-completion of various cycles
now.progress.year
now.progress.season
now.progress.month
now.progress.moon
now.progress.week
now.progress.day
now.progress.halfday
now.progress.hour
now.progress.min
now.progress.sec

// string versions of the date & time (in case you want to print it out)
now.text.time    // "11:45:56 P.M."
now.text.hour    // "11"
now.text.hours   // "23"
now.text.min     // "45"
now.text.sec     // "56"
now.text.ampm    // "P.M."
now.text.date    // "31 Dec 2001"
now.text.year    // "2001"
now.text.season  // "Winter"
now.text.month   // "December"
now.text.mon     // "Dec"
now.text.day     // "31"
now.text.weekday // "Monday"

Goal

  • Create a visual representation of the current local time using only graphics primitives, symbols, and formal elements like color/texture/size — no text or alphanumeric characters!
  • Use the clock() function so that your sketch is always displaying the current time in your draw() function.
  • This is to be a creative interpretation of the idea of a clock. Your focus should be on inventiveness and polished visuals.
  • Your interpretation needs to be legible to you (the author), and you need to be able to explain how the time is derived visually at any given point.
  • Your clock concept needs a name (put that in the <title> tag of the index.html file).
  • We will be working in two phases
    1. Representing the current hour, minute, and second by mapping their numerical values onto form
    2. Representing longer-term ‘calendar time’ units such as days, weeks, months, moon phases, seasons, years, etc.
  • In each case your task is to develop an encoding of either the numerical unit itself (e.g., the number 11 if it’s 11 A.M.) or its proportional relationship to the passage of time (0.42 since 11 a.m. is 42% of the way through the course of the day) and a visual representation that makes use of what we’ve learned about Bertin’s retinal variables

Process

  • Start off by making some hand-drawn (or mocked up in a drawing app) sketches of clock ideas and put these images into the process folder of your subdirectory.
  • Update the README.md file in your process folder describing what’s in your various sketch files, the logic of the representation, etc. Be sure to explain, either in words or diagrammatically, your chosen mapping of time components to Bertin-ian Retinal Variables.
  • Start coding by editing the project/sketch.js file. If you want to explore multiple options in parallel, use the Finder’s Duplicate command to clone the whole project directory and give it a sensible name (i.e., not just project copy or project2). You can then start working on the sketch.js in the new folder without disturbing your previous work.
  • Commit your changes whenever you’ve made some modifications that feel like they’re in a stable state (or if you stumble onto a glitchy visual that points in a direction you’d like to explore). This will let you ‘rewind’ to that point in the future if you’ve hit a dead-end or need to remember how you did something.
  • When you make a commit, select just the files (or even just the lines within one) that are part of the ‘conceptual unit’ of change that you made and type a brief description of what changed into the Summary field.
  • Sync your local repository with the copy on GitHub before the start of class next week.

Student Work

Github links TKTK

Show Comments