Assignment 40

by golan @ 2:45 pm September 28, 2011

Due Monday October 10

Assignment 40
Make a “visual clock” (and upload it to OpenProcessing). 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). 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 Roman/Arabic/Chinese etc. numerals.

Try to devise a novel graphic concept, e.g. not just a clock face 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!).

This assignment allows the widest possible range of creative responses; this assignment is intended to push all of your skills as both a software engineer and artist/designer. Expectations for advanced students are therefore higher. Also: remember to SKETCH FIRST!

Want to see a nice example? Check out Lee Byron’s CenterClock.

And here’s some code to get you started, so that you can access the current time:

int prevSec;
int millisRolloverTime;
void setup(){
  millisRolloverTime = 0;
void draw(){
  // 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;
  text(theTimeString, width/2,34);

Assignment 41
Make a puppet with limbs. Give it a dynamic behavior; you might find it helpful to use the noise() function. See the PuppeTool demo by Frederic Durieu (LeCielEstBleu):

You may also be helped by the moving limb example here.

Here is another example of using the noise() function to control something dynamically over time:

void setup(){
  size(600, 400); 
void draw(){
  textAlign (CENTER);
  rect (50,100,100,200);
  fill(0) ;
  // Choose different values of the noise field. 
  // The special numbers just ensure that we're fetching values 
  // from different places in the noise landscape. 
  float noiseValue1 = noise(  millis()/1000.0 ); 
  float noiseValue2 = noise( (millis()+12345)/1357.9  ); 
  float noiseValue3 = noise( (millis()+23456)/1111.1  );
  float noiseValue4 = noise( (millis()+34567)/1212.1  );
  // Animate the position of something
  float x1 = map(noiseValue1, 0,1,  50, 150); 
  float y1 = map(noiseValue2, 0,1,  100,300); 
  text ("Translation", 100, 50); 
  translate(x1, y1); 
  ellipse (0,0, 30,30); 
  // Animate the rotation of something
  float noiseAngle = map(noiseValue3, 0,1,  -40,40); 
  text ("Rotation", 300, 50); 
  translate (300, 100); 
  rotate( radians(noiseAngle)); 
  line (0,0, 0,200);
  ellipse (0,200, 30,30); 
  // Animate the size of something
  float noiseScale = map(noiseValue4, 0,1,  0.75, 2.0); 
  text ("Scale", 500, 50); 
  translate (500, 200); 
  scale ( noiseScale);
  ellipse (0,0, 30,30); 


TrackBack URI

Leave a comment

You must be logged in to post a comment.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2017 CMU Electronic Media Studio II, Fall 2011, Section A | powered by WordPress with Barecity