Assignment 05

This assignment is due Wednesday, October 1st at the beginning of class.  

This assignment has 5 parts: 

  • Readings
  • Assignment-05-Clock
  • Assignment-05-1Line
  • Assignment-05-10Lines
  • Assignment-05-1000Lines

You may, if you wish, work on any of these sub-projects in a two-person team. If you do, add some text to your narrative which describes how you worked together.

Readings

Please read the following: 

In Getting Started with Processing:

  • “Response” / Chapter 5 (pp. 51-73)

In Processing, a Handbook (pp. 173-255):

  • Structure 2: Continuous
  • Structure 3: Functions
  • Shape 3: Parameters, Recursion
  • Input 1: Mouse I
  • Drawing 1: Static Forms
  • Input 2: Keyboard
  • Input 3: Events
  • Input 4: Mouse II
  • Input 5: Time, Date
  • Development 2: Iteration, Debugging
  • Synthesis 2: Input and Response

One Line

Develop a composition which in which one line responds to the position of the cursor.

  • Sketch first. (By this I mean, “sketch on paper”.)
  • You are restricted to black and white.
  • You may not use the mouse button.
  • In a blog post, include still/video documentation, a text narrative of approximately 100 words, and your code. If you’re working in P5.JS, embed the app using the WordPress plugin.
  • Categorize your project with the category, Assignment-05-1Line.

Ten Lines

Develop a composition which in which ten lines respond to the position of the cursor.

  • Sketch first.
  • You are restricted to black and white.
  • You may not use the mouse button.
  • Blog post, still/video documentation, narrative, code, etc. as above.
  • Categorize your project with the category, Assignment-05-10Lines.

One Thousand Lines

Develop a composition which in which one thousand lines respond to the position of the cursor. You may only use lines.

  • Sketch first.
  • You may use any colors you please.
  • You may use the mouse button if you wish.
  • Blog post, still/video documentation, narrative, code.
  • Categorize your project with the category, Assignment-05-1000Lines.

Assignment-05-Clock

Create a “visual clock”. It is not essential that the time of day be literally readable from it, but your clock should appear different at all times of the day, and it should repeat its appearance every 24 hours. (You can make a 12-hour clock if you prefer). The final piece should somehow show the current time, either literally or abstractly.

Try to devise a novel graphic concept, e.g. not just a clock face with/without numbers. Feel free to experiment with any of the graphical tools at your disposal, including color, shape, etc. Reactivity to the cursor is optional. You’ll probably need to use hour(), minute(), second(), millis(), etc., but you’re also welcome to use day() and month() for a calendar-sensitive clock.

If you do decide to make the time literally readable (e.g. by counting graphic elements, visualizing numeric bit patterns, etc.), you are not permitted to use conventional numerals (Roman/Arabic/Chinese etc.).

  • Sketch first.
  • Develop your project in Processing or P5JS.
  • In a blog post, document your project in video, an animated GIF, and/or a selection of stills from various times of day. Include scans or photos of your sketches.
  • Please write a short paragraph about your goals, your process, and your own evaluation of your results.
  • Categorize your project with the category, Assignment-05-Clock.

Incidentally, the convention that we use 12 (or 24) hour time is totally arbitrary — an artifact of ancient Egyptian astronomy. Other systems have been used and proposed. For example, until quite recently, a six-hour day was used in Thailand. During the French Revolution, when the metric system was invented, people seriously proposed decimal time. Here’s a decimal clock from the late 1700s:

Here’s some Processing (Java) code to get you started, so that you can access the current time. This example also shows milliseconds that roll-over correctly, in synchrony with the advancing seconds. Note the use of the core functions: hour(), minute(), second(), millis():

int prevSec;
int millisRolloverTime;

//--------------------------
void setup() {
  size(300, 100);
  millisRolloverTime = 0;
}

//--------------------------
void draw() {
  background(255);
  fill(0);

  // Fetch the current time
  int H = hour();
  int M = minute();
  int 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;
  int mils = millis() - millisRolloverTime;

  // Format strings so that single-digit numbers
  // are written with a pre-pended zero, etcetera.
  String HouStr = "" + (H%12); 
  String MinStr = nf(M, 2); 
  String SecStr = nf(S, 2);
  String MilStr = nf(mils, 3); 
  String meridian = (H > 12) ? "pm" : "am";

  String theTimeString = HouStr + ":" + MinStr + ":" + SecStr + "." + MilStr + " " + meridian;

  textAlign(CENTER);
  text(theTimeString, width/2, 55);

  // make a bar which smoothly interpolates across 1 minute: 
  float secondsWithFraction = S + mils/1000.0; // 0...60 with fractional remainder
  float secondsWithNoFraction = S;
  float rectWidthSmooth = map(secondsWithFraction,   0,60, 0,width); 
  float rectWidthChunky = map(secondsWithNoFraction, 0,60, 0,width); 
  noStroke(); 
  fill(0); 
  rect(0, 0, rectWidthSmooth,10); 
  fill(128); 
  rect(0,10, rectWidthChunky,10); 
}

This assignment allows a wide range of creative responses, and is intended to push all of your skills as both a software engineer and artist/designer. Expectations for advanced students are therefore higher.