Dynamic Application in Processing

Posted: September 22nd, 2010 | Author: genevieve | Filed under: ICM | No Comments »

This week in ICM, we were assigned to work in pairs to create a “dynamic application.” We had a few more tools at our disposal than week 1, like variables, setup() and draw() loops, mousePressed() events, and some random(). But we’re still in the early stages of learning how to program interactivity. That said, I’m pretty happy with what my partner Alex Dodge and I were able to come up with.

After a few experiments, we decided to make a sort of minimal clock, or timer. The inner circle keeps track of seconds, the next minutes, and so on and so forth. We stopped at four rings, but further iterations could contain rings for weeks, months, years, etc. The trickiest part was pushing the code from a timer (based on frameCount()) into an actual clock, where the starting point of the half-circle would correspond to the hour or minute position of an analog clock.

View applet and source code here.

View applet and source code here.

View applet and source code here.

/* BAUHAUS CLOCKS - s-m-h-d
By Alex Dodge and Genevieve Hoffman
September 21, 2010 - ITP*/
 
//Sets the current minutes start position
float mc = second()*6; 
//Sets the current hour start position
float hc = ((minute()/60.0)+hour())*30.0; 
//Sets the current day start position
float dc = hour()*15.0;
 
void setup(){
  size(500,500);
  smooth();
  background(255);
  noStroke();
}
 
void draw(){  
 
  //Day Hemisphere
  float d = map(millis(), 0, 86400000, 0, 360);
  fill(0,127,0,50); 
  arc(250,250,400,400,radians(-90+d+dc),radians(90+d+dc));
 
  //Hours Hemisphere
  float h = map(millis(), 0, 3600000, 0, 360);
  fill(255,255,0,50); 
  arc(250,250,300,300,radians(-90+h+hc),radians(90+h+hc));
 
  //Minutes Hemisphere
  float m = map(millis(), 0, 60000, 0, 360);
  fill(0,0,255,50); 
  arc(250,250,200,200,radians(-90+m+mc),radians(90+m+mc));
 
  //Seconds Hemisphere
  float s = map(millis(), 0, 1000, 0, 360);
  fill(255,0,0,50); 
  arc(250,250,100,100,radians(-90+s),radians(90+s));
 
  //semi-opaque matte - creates the fade gradient
  fill(255,255,255,10); 
  rect(0, 0, width, height);
}

Leave a Reply