Assignment 05

This Assignment has 2 parts. (A third part has been postponed.) Collectively they will be due Thursday September 26th. 

  • Please note: This has been postponed from 9/24 to 9/26, since so many of you are attending Maker Faire.
  • Please note: The “recommended completion date” for the VisualClock is Tuesday September 17th, but its due date is the 26th, with the rest of the othe sub-projects. So: no pressure, but it will help you pace yourself if you finish this first, and soon.

The 3 parts are as follows: 

  • Assignment-05-VisualClock. I recommend you complete this part first. 
  • Assignment-05-FaceOSC.

Assignment-05-VisualClock.

The “recommended completion date” for the VisualClock is Tuesday September 17th, but its due date is still Thursday September 26th.

Make a “visual clock”. It’s not essential that the precise 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). If you do decide to make the time literally readable, you are not permitted to use conventional numerals (Roman/Arabic/Chinese etc.) — instead, you’d have to use countable graphic elements, visualizing numeric bit patterns, or some other system you devise.

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 need to use millis(), second(), etc. (but you’re also welcome to use day(), month() for a calendar-sensitive clock!).

The goal of this assignment is to give you practice in using code to control design over time. Sometimes this is called animation, but the practical demands of producing a “day-long animation” illustrate the necessity of code to achieve this.

Remember to SKETCH FIRST!

Here’s an inspiration if you like. These are Java applets, you’ll need to allow your browser (Firefox works best) to run Java.

Now:

  • It would be best if your project worked in ProcessingJS.
  • Upload your project to OpenProcessing and add it to our classroom.
  • In a blog post, embed the OpenProcessing applet (get their iFrame code using the ’embed’ button); embed your code using WP-Syntax; and..
  • Write a paragraph about your goals, curiosities and/or inspirations that motivated your design. What do you believe you achieved well? And what about not-so-well?
  • Label your blog post with the Category, Assignment-05-VisualClock.

Here’s a simple demonstration / sample-program:

int prevSecond; 
int lastRolloverTime; 

void setup(){
  size (400, 260); 
  lastRolloverTime = 0; 
}

void draw(){
  background(255); 

  //-------------------------------------------------
  // Fetch the components of the time (hours, minutes, seconds, milliseconds).
  // Incidentally, you can also get day(), month(), year(), etc. 
  int h = hour(); 
  int m = minute(); 
  int s = second(); 

  // The millis() are not synchronized with the clock time. 
  // Instead, the millis() represent the time since the program started. Grrr. 
  // To approximate the "clock millis", we have to check when the seconds roll over. 
  if (s != prevSecond){ 
    lastRolloverTime = millis(); 
  }
  int mils = millis() - lastRolloverTime;
  prevSecond = s;

  //-------------------------------------------------
  // Assemble a string to display the time conventionally.
  String hourStr   = nf(((h > 12)? h-12:h), 2); // format String with 2 digits
  String minuteStr = nf(m, 2); // format String with 2 digits
  String secondStr = nf(s, 2); // format String with 2 digits
  String ampmStr   = (h < 12) ? "AM" : "PM"; 
  String milsStr   = nf(mils, 3); 
  String theTimeString = hourStr + ":" + minuteStr + ":" + secondStr; 
  theTimeString += "." + milsStr + " " + ampmStr; 

  fill (0); 
  textAlign (CENTER); 
  text (theTimeString, width/2, 30); 

  //-------------------------------------------------
  // Draw some rectangles which "abstractly" indicate the time. 

  float margin = 10;
  float rectWidth = width - 2*margin;
  float hw = map (h, 0,24,      0,rectWidth); 
  float sw = map (s, 0,60,      0,rectWidth); 
  float mw = map (m, 0,60,      0,rectWidth); 
  float ww = map (mils, 0,1000, 0,rectWidth); 

  // background (grey) rectangles
  fill (180); 
  rect (margin, 50, rectWidth,50);
  rect (margin,100, rectWidth,50); 
  rect (margin,150, rectWidth,50); 
  rect (margin,200, rectWidth,50); 

  // foreground (indicator) rectangles
  fill (255, 220, 20); 
  rect (margin, 50, hw,50);
  rect (margin,100, mw,50);
  rect (margin,150, sw,50);
  rect (margin,200, ww,50);
}

2. Assignment-05-FaceOSC.

In this assignment, you’ll use Processing and FaceOSC to create an interactive face puppet.

Broadly speaking, your challenge is to create an interesting graphic system which responds in real-time to input from a high-quality facial analysis tool. The pedagogic purpose of this assignment is threefold:

  1. To increase your fluency in the codecraft and conceptual application of computational visual design, through practice;
  2. To familiarize you with OSC, the most widely used protocol for inter-process data communications in the media arts;
  3. To familiarize you with the logistics of installing an extension library in Processing, a basic skill that significantly expands your tool-chest.

The face is the most intimate, yet most public, of all our features. A significant portion of our brain is dedicated to processing and interpreting the faces of those around us. The face is one of the few visual patterns which, it is believed, is innately understood by newborn infants.

Kyle McDonald writes: “One of the most salient objects in our day-to-day life is the human face. Faces are so important that the impairment of our face-processing ability is seen as a disorder, called prosopagnosia, while unconsciously seeing faces where there are none is an almost universal kind of pareidolia.”

For this assignment:

  • Browse some inspirations in character design from Pictoplasma, here and here.
  • Sketch some designs on paper… first!
  • Create a program in Processing that responds to FaceOSC.
  • Your work will be a Java program, and won’t be able to run in the browser. To document it, capture 30-60 seconds of screen-grabbed video in which you are puppeteering your design. There’s some information about how to screengrab video here.
  • Upload this video to YouTube and embed it in a blog post. There are instructions for embedding YouTube videos here.
  • Also in the blog post, write a paragraph about your inspirations, aspirations, and evaluations of your work.
  • Mention the specific OSC properties of the face that you used. How many dimensions of control does your design have?
  • Label your blog post with the Category, Assignment-05-FaceOSC.

Your screengrabbed video might look something like this:

[youtube=http://youtu.be/SUJJn2yjc3g&w=640&h=240&rel=0]

If you can’t see the above YouTube video, then here’s a still of a basic layout:

faceoscp5

By the way, here’s the code for my interactive face-controlled box:

import oscP5.*;
OscP5 oscP5;

int     found;
PVector poseOrientation = new PVector();

//----------------------------------
void setup() {
  size(640, 480, OPENGL);
  oscP5 = new OscP5(this, 8338);
  oscP5.plug(this, "found", "/found");
  oscP5.plug(this, "poseOrientation", "/pose/orientation");
}

//----------------------------------
void draw() {
  background (180);
  strokeWeight (3); 
  noFill();

  if (found > 0) {
    pushMatrix(); 
    translate (width/2, height/2, 0);
    rotateY (0 - poseOrientation.y); 
    rotateX (0 - poseOrientation.x); 
    rotateZ (    poseOrientation.z); 
    box (200, 250, 200); 
    popMatrix();
  }
}

//----------------------------------
public void found (int i) { found = i; }
public void poseOrientation(float x, float y, float z) {
  poseOrientation.set(x, y, z);
}

To get started technically:

  • Download FaceOSC for Mac OSX here: http://cmuems.com/resources/FaceOSC.zip (See below for other operating systems).
  • You will need to download the oscP5 library by Andreas Schegel, which allows Processing to communicate over OSC with other applications: http://www.sojamo.de/libraries/oscP5/
  • Install oscP5 into your Processing libraries folder. Instructions for doing this can be found in the file INSTALL.txt found in the oscP5 zip. You’ll need to restart Processing after doing so.
  • You obviously need a camera on your computer. Run the FaceOSC.app and keep it open. If it sees your face, it should start transmitting data to whomever is listening.
  • Open and work on FaceOSCReceiver.pde (inside the FaceOSC download zip) or, preferably, a duplicate of it. When your sketch is running it should automatically communicate with FaceOSC.
  • You may find this very helpful, the FaceOSC message format specification: https://github.com/kylemcdonald/ofxFaceTracker/wiki/Osc-message-specification
  • The FaceOSCReceiver is extremely crude. Don’t forget that FaceOSC is also transmitting things like 3D rotations!

Here are some additional links you might find helpful: