#03 (Due 2/9)

This assignment has two parts, due Friday February 9 at the beginning of class.

1. Looking Outwards #03.

From blogs and any other sources, identify and discuss a project which presents a specific form of interactivity or real-time processing that you find interesting. Try to identify forms of interaction that beyond solo screen experiences (though those are OK too).

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

Some places to look: 

Here are some artists to consider:

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, a better-known interactive 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. A Clock.

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 clock to represent the current time. Our goal is for you to practice using code to control visual design over time.

Before you begin, enrich your concept of clocks and timekeeping by reading/viewing 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, etcetera. Reactivity to the cursor is optional. Naturally, you’ll need to use the hour(), minute(), second(), and millis()functions, but you’re also welcome to use day() and month() for a clock which changes with the time of year.

Requirements:

  • Sketch first on paper.
  • No, really. 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. Read about the incredibly interesting history of timekeeping. Check out this, that, and the other link we recommended to you above.
  • 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 800 x 800 pixels, please.
  • Embed at least three animated GIFs (or screenshot imagess) of your clock, showing what it looks like or how it behaves at different times of day. (Mac users can use LiceCAP to capture screen-recordings directly to GIFs.)
  • Embed your live (p5.js) sketch in the browser, if possible.
  • Ensure that your code is visible and attractively formatted in the blog post.
  • 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, 03-Clock.
  • Title your project’s blog post with the title, nickname-clock.

Below is some p5.js code to get you started. This example shows milliseconds that roll-over correctly, in synchrony with the advancing seconds. Links to similar templates for Processing (Java) and Processing.py (Python) will appear here shortly.

p5.js Clock Template at OpenProcessing

// Simple p5.js Clock Template
// Golan Levin, 2016
 
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);
 
  fill(128,100,100);
  text("Hour: "   + H, 10, 22);
  text("Minute: " + M, 10, 42);
  text("Second: " + S, 10, 62);
  text("Millis: " + mils, 10, 82);
 
  var hourBarWidth   = map(H, 0, 23, 0, width);
  var minuteBarWidth = map(M, 0, 59, 0, width);
  var secondBarWidth = map(S, 0, 59, 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);
 
  noStroke();
  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);
}

 

Posted in