#3 (Due 9/21)

This set of Deliverables has three parts, due at the beginning of class on Friday, 9/21:

  1. Reading #03: First Word Art, Last Word Art
  2. Looking Outwards #02
  3. A Clock

1. Reading #03: First Word Art, Last Word Art

Please read the one-page essay, "First Word Art / Last Word Art" by Michael Naimark. A backup PDF of this article can be found here. You are asked to write a brief (two-paragraph) response to this essay.

Please contemplate technical novelty in relation to the arts. The author of this reading, Michael Naimark, is a new-media artist who has been active in experimental cinema and virtual reality since the mid-1970s. The duality Naimark describes is one attempt to understand how culture accommodates new technologies, delineating a spectrum from the well-understood to the utterly novel.

Make a new blog post in this WordPress site. In your blog post, please write about 150-200 words reflecting on Naimark's article. Some possible starting points for your reflection could include (but are not limited to):

  • Where do you locate your interests along this spectrum?
  • What are some ways in which new technologies shape culture?
  • What are some ways in which culture shapes technological development?
  • We might aspire to make stuff of lasting importance, but when our work is technologically novel, it doesn't always age well. Discuss.

When you are done, please give your blog post the title: nickname-Reading01, and categorize your blog post with the WordPress category, 03-Reading.

2. (Reminder) Looking Outwards #02

This deliverable is your second Looking Outwards report. The topic for this week is Generative Art: art whose forms (images, sculptures, etc.) have been generated by algorithms -- algorithms created by artists, designers, architects, musicians, and poets.

A complete description of this Looking Outwards assignment, including links to recommended starting points, can be found in last week's Deliverables page.

  • Remember to label your blog post with the Category, LookingOutwards02 
  • And remember to title your blog post, nickname-LookingOutwards02.

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 800 x 800 pixels, please. Within this limitation, your clock may have any aspect ratio you 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.
  • 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 code 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.

Code Templates:

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