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