Mapping Time

Preliminaries

Gather all the necessary software and files to get started:

• The Sublime Text 3 editor
• The GitHub Desktop GUI client
• Clone a copy of http://github.com/samizdatco/dvia-2017

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:

• The coordinate system
• Shape primitives: rect()/ellipse()/arc()/ line()
• Setting colors: fill()/stroke()
• Mixing colors: color()/lerpColor()
• The current time: hour()/minute()/second()
• Iteration: for(…;…;…)/[].forEach(…)/while(…)

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.

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!
• This is to be a creative interpretation of the idea of a clock. Your focus should be on inventiveness and polished visuals. 
• Use P5’s time functions so that your sketch is always displaying the current time in your draw() function.
• 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).
• For the extra-ambitious:
  • Rather than just plotting the current time as a static quantity, plot the relative amount of time between 2 or more ‘events’ in a given day. Consider tracking your own behavior or the occurrence of a repeating event in the world and depicting when it happens – relative either to the time-of-day or to other occurrences.
  • Calendar time is much more complicated than ‘wall clock’ time. But you can attempt to visualize days, weeks, months, seasons, years, etc. using the P5 date functions (day()/month()/year()) ... if you dare.

Process

• Make sure you only create or modify files within the students/<your-name> subdirectory.
• 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.
• 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 on 13 Sept.