#4 (Clock, Due 9/18)

Deliverables #4

This set of deliverables has three parts, due at the beginning of class on Wednesday, 9/18:

  1. Looking Outwards #03
  2. Drucker Reading (no response required)
  3. Clock

 

1. Looking Outwards #03

From blogs and any other sources, identify and discuss a project which presents a specific form of interactivity that you find interesting. Try to identify forms of interaction that go beyond solo screen experiences (though those are OK too). The starting points below come mostly from new-media art, but 'games' are fine, too.

  • Title your blog post nickname-LookingOutwards03.
  • Categorize your blog post LookingOutwards-03.

Some places to look: 

Here are a handful artists to consider. This list is by no means exhaustive!:

Andrea Polli, sound/interative media artist
Béatrice Lartigue, interactive artworks and interventions
Bernie Lubell, interactive wooden machines
Camille Utterback, interactive artworks and permanent public installations
Caroline Record, sound + new media installation/performance artist
Christine Sugrue, artist of poetic interactive new-media installations
Daily Tous Les Jours (Melissa Mongiat & Mouna Andraos), public interactive installations
Danny Rozin, creator of interactive mirrors
David Rokeby, pioneer of audiovisual interactive art
Eva Schindling, installations, sculpture and performance
Heather Kelley, indie game developer and educator
Karolina Sobecka, artist/developer of interactive media installations
Katherine Bennett, educator and new media artist
Lauren McCarthy, new media artist and creator/lead-developer of p5.js!
Luisa Pereira, creator of interactive audiovisual systems and machines
Lynn Hershman-Leeson, pioneer of interactive narrative art, active since mid-1970s
Mimi Son, creator of interactive artworks with novel displays
Molmol Kuo, artist-designer of images, kinetics and interactive sculptures
Nova Jiang, interactive sculpture and installation
Rafael Lozano Hemmer, an interaction artist
Scott Snibbe, experimental/playful/mindful interactive art
Theo Watson & Emily Gobeille, interactions for young publics
Zachary Lieberman, interaction artist, co-founder of YesYesNo

 

2. Reading by Johanna Drucker

Please read this five-page chapter on "Timekeeping" (PDF) by design theorist Johanna Drucker, from her book Graphesis: Visual Forms of Knowledge Production (Harvard Press, 2014). (No written or other response is required.)

 

3. A 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 open-ended project, you are asked to create a visualization which represents the current time. 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

Before you begin, you are asked to enrich your concept of clocks and timekeeping by reviewing and/or examining the following resources:

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. Reactivity to the user/cursor/etc. is optional. 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.

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.
  • Stuck for ideas? It's OK. Play with typography. Riff on the classic analog (circular) clock design. Make an interesting alarm clock.
  • Consider new contexts for your clock, off the screen of your laptop. Optionally, you are invited to free yourself from the desktop or laptop screen, and design your clock for a context of your own choosing. If you could place your design anywhere, where would it be? On the side of a building? As a piece of furniture? In someone's pocket? As a digital tattoo? If you wish, include a drawing, rendering or other mockup showing your clock as you imagine it in situ.
  • Create your clock in (preferably) p5.js. If you have a good reason to use a different programming toolkit (Processing, Processing.py, etc.), that's okay; please inform the professor to make alternative arrangements.
  • Limit your design to a canvas which is no larger than 720 x 720 pixels, please. Within this limitation, your clock may have any aspect ratio you please.
  • 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. Some instructions for screen-capping to GIFs can be found here.
  • In your blog post, link to your p5 sketch at the Editor web site.
  • Consider new contexts for your clock, off the screen of your laptop. Optionally, you are invited to free yourself from the desktop or laptop screen, and design your clock for a context of your own choosing. If you could place your design anywhere, where would it be? On the side of a building? As a piece of furniture? In someone's pocket? As a digital tattoo? If you wish, include a drawing, rendering or other mockup showing your clock as you imagine it, in situ.
  • 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, 04-Clock.
  • Title your project's blog post with the title, nickname-clock.

Below is 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. Links to similar templates for Processing (Java) and Processing.py (Python) are also provided.

Also acceptable: Android watch programs (tutorial), coded with Processing for Android:

// 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);
}