Deliverables 02 (Due 9/16)

Due Friday 9/16 at the beginning of class. 

This assignment has two sub-components, which are detailed below:

  1. Looking Outwards 02: Some Technological Art or Design that has Inspired You
  2. A Clock.

1. Looking Outwards #02.

Topic: Some Technological Art or Design that has Inspired You

This deliverable is your second Looking Outwards report. (As a reminder about what that means, please refer to this document.) I thought it would be nice, at this early stage, to share a touchstone. Perhaps even a project you saw that made you want to take this class.

Think about an interactive and/or computational project (from anywhere, by anyone except yourself) that you knew about before starting this course, and which you find inspirational. In a blog post of about 100-200 words,

  • Please discuss the project. What do you admire about it, and why do you admire these aspects of it?
  • How many people were involved in making it, and how did they organize themselves to achieve it? (Any idea how long it took her/him/them to create it?)
  • To the best of your knowledge, did creating this project require the development of custom software/scripts, or did the authors create the project using “off-the-shelf” (commercial) software? or some combination of these approaches?
  • What prior works might the project’s creators have been inspired by?
  • To what opportunities or futures does the project point, if any?
  • Provide a link (if possible) to the work, and a full author and title reference.
  • Embed an image and a YouTube/Vimeo video of the project (if available).
  • Label your blog post with the Category, LookingOutwards02.
  • Title your blog post: nickname-lookingoutwards02.

2. A Clock.

Before you begin, enrich your concept of clocks and timekeeping by reading/viewing the following resources:

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. The goal of this assignment is to give you practice in using code to control visual design over time.

Try to devise a novel graphic concept; we 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 p5’s 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 thisthat, 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 p5.js. If you have a good reason to use a different programming toolkit (Processing, openFrameworks, three.js, 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.
  • When you’re done, embed your p5.js sketch in a WordPress blog post on this site, using the (usual) instructions here.
  • Ensure that your p5.js code is visible and attractively formatted in the 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 captured with your phone.
  • Label your project’s blog post with the Category, 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.

clock-template

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