Project 2: Right Twice a Day

Preliminaries

Start by remixing this starter glitch project. You’ll be creating multiple iterations in the coming weeks, so every time you need a fresh copy you can create another remix.

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:

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"

To see these values ‘live’, take a look at the verbatim example sketch which prints out each of the raw values as text.

Goal

Examples

To get yourself situated, try looking over some of the following examples:

  1. text-clock
  2. bar-clock
  3. color-clock
  4. analog-clock
  5. lunar-sliderule
  6. turn-turn-turn
  7. verbatim
  8. wave

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.

Process