Anyway, this is where I put my time (lol clock puns) for this week’s homeworks.

(ps the gif is massive and won’t play so open it in a new tab on its own)

Anyway. The way this works is that the largest square represents the hour, the medium one the minute and the smallest one the second; the secondary square inside the hour square increases in size every minute, the secondary square inside the minute square increases by the second, and so on.

The colors being used to represent each number on the “clock” are my synesthetic associations for each number; for example, the time being shown in the gif I’ve added is 4:12 into 4:13 (white being 1, blue 2, red 3, purple 4). The green square beginning to grow inside the hour square will eventually fill that entire space to represent 5 o’clock.

I was going to make the background change colors with the days of the week, but I couldn’t figure out how to make that work with the days function because that operates in terms of days in the month and I didn’t want to have to fill out a whole chart of color values for every single day of the month.

void setup(){
  size(500,500);
  background(120,210,240);
  noStroke();
  rectMode(CENTER);
    //the  reason i'm copypasting this code is because
    //it's awkward if the current  hour  isn't rendered as a square at the start
    //so this just renders the square in the correct color
    //possibly i don't need the entire code in two different places but here goes?
      float hr = hour();
        if ((hr == 1) || (hr == 13)){
          fill(255);
        } else if ((hr == 2) || (hr == 14)){
            fill(50,185,242);
        } else if ((hr == 3) || (hr == 15)){
            fill(225,80,60);
        } else if ((hr == 4) || (hr == 16)){
            fill(160,100,200);
        } else if ((hr == 5) || (hr == 17)){
            fill(100,232,80);
        } else if ((hr == 6) || (hr == 18)){
            fill(234,95,175);
        } else if ((hr == 7) || (hr == 19)){
            fill (232,113,33);
        } else if ((hr == 8) || (hr == 20)){
            fill(50,70,180);
        } else if ((hr == 9) || (hr == 21)){
            fill(60,190,100);
        } else if ((hr == 10) || (hr == 22)){
            fill(195,160,130);
        } else if ((hr == 11) || (hr == 23)){
            fill(212,242,250);
        } else if ((hr == 0) || (hr == 12) || (hr == 24)){
            fill(100,145,185);
        }
  rect(330,330, 280,280);
}

void draw(){
  //seconds
float sec = map(second(),0,59, 1,60); //I'M SO SORRY THIS IS RIDICULOUSLY LONG
    if ((sec == 1) || (sec == 11)){
      fill(255,255,255, 150);
    } else if ((sec == 2) || (sec == 12) || (sec == 20) || (sec == 22)){
        fill(50,185,242, 150);
    } else if ((sec == 3) || (sec == 13) || (sec == 30) || (sec == 33)){
        fill(225,80,60, 150);
    } else if ((sec == 4) || (sec == 14) || (sec == 40) || (sec == 44)){
        fill(160,100,200, 150);
    } else if ((sec == 5) || (sec == 15) || (sec == 50) || (sec == 55)){
        fill(100,232,80, 150);
    } else if ((sec == 6) || (sec == 16) || (sec == 60)){
        fill(234,95,175, 150);
    } else if ((sec == 7) || (sec == 17)){
        fill (232,113,33, 150);
    } else if ((sec == 8) || (sec == 18)){
        fill(50,70,180, 150);
    } else if ((sec == 9) || (sec == 19)){
        fill(60,190,100, 150);
    } else if (sec == 10){
        fill(195,160,130, 150);
    } else if (sec == 21){
        fill(120,212,240, 150);
    } else if ((sec == 23) || (sec == 32)){
        fill(138,132,151, 150);
    } else if ((sec == 24) || (sec == 42)){
        fill(105,142,221, 150);
    } else if ((sec == 25) || (sec == 52)){
        fill(75,209,161, 150);
    } else if (sec == 26){
        fill(142,140,209, 150);
    } else if (sec == 27){
        fill(141,139,148, 150);
    } else if (sec == 28){
        fill(50,128,211, 150);
    } else if (sec == 29){
        fill(55,187,171, 150);
    } else if (sec == 31){
        fill(255,167,158, 150);
    } else if ((sec == 34) || (sec == 43)){
        fill(208,90,130, 150);
    } else if ((sec == 35) || (sec == 53)){
        fill(177,156,70, 150);
    } else if (sec == 36){
        fill(244,88,117, 150);
    } else if (sec == 37){
        fill (244,97,46, 150);
    } else if (sec == 38){
        fill(152,75,120, 150);
    } else if (sec == 39){
        fill(158,135,180, 150);
    } else if (sec == 41){
        fill (208,177,228, 150);
    } else if ((sec == 45) || (sec == 54)){
        fill(130,166,140, 150);
    } else if (sec == 46){
        fill(197,97,187, 150);
    } else if (sec == 47){
        fill(196,107,116, 150);
    } else if (sec == 48){
        fill(105,85,190, 150);
    } else if (sec == 49){
        fill (110,145,150, 150);
    } else if (sec == 51){
        fill(177,244,167, 150);
    } else if (sec == 56){
        fill(167,164,129, 150);
    } else if (sec == 57){
        fill(166,173,56, 150);
    } else if (sec == 58){
        fill(75,151,130, 150);
    } else if (sec == 59){
        fill(80,211,90);
    }
  float l=map(millis()%1000,0,1000, 0,60);
  rect(70,50, l,l);
  
//minutes
      //minute color determiner
  float min = map(minute(),0,59, 1,60); //SORRY THIS ONE IS LONG ALSO
      if ((min == 1) || (min == 11)){
        fill(255,255,255, 150);
      } else if ((min == 2) || (min == 12) || (min == 20) || (min == 22)){
          fill(50,185,242, 150);
      } else if ((min == 3) || (min == 13) || (min == 30) || (min == 33)){
          fill(225,80,60, 150);
      } else if ((min == 4) || (min == 14) || (min == 40) || (min == 44)){
          fill(160,100,200, 150);
      } else if ((min == 5) || (min == 15) || (min == 50) || (min == 55)){
          fill(100,232,80, 150);
      } else if ((min == 6) || (min == 16) || (min == 60)){
          fill(234,95,175, 150);
      } else if ((min == 7) || (min == 17)){
          fill (232,113,33, 150);
      } else if ((min == 8) || (min == 18)){
          fill(50,70,180, 150);
      } else if ((min == 9) || (min == 19)){
          fill(60,190,100, 150);
      } else if (min == 10){
          fill(195,160,130, 150);
      } else if (min == 21){
          fill(120,212,240, 150);
      } else if ((min == 23) || (min == 32)){
          fill(138,132,151, 150);
      } else if ((min == 24) || (min == 42)){
          fill(105,142,221, 150);
      } else if ((min == 25) || (min == 52)){
          fill(75,209,161, 150);
      } else if (min == 26){
          fill(142,140,209, 150);
      } else if (min == 27){
          fill(141,139,148, 150);
      } else if (min == 28){
          fill(50,128,211, 150);
      } else if (min == 29){
          fill(55,187,171, 150);
      } else if (min == 31){
          fill(255,167,158, 150);
      } else if ((min == 34) || (min == 43)){
          fill(208,90,130, 150);
      } else if ((min == 35) || (min == 53)){
          fill(177,156,70, 150);
      } else if (min == 36){
          fill(244,88,117, 150);
      } else if (min == 37){
          fill (244,97,46, 150);
      } else if (min == 38){
          fill(152,75,120, 150);
      } else if (min == 39){
          fill(158,135,180, 150);
      } else if (min == 41){
          fill (208,177,228, 150);
      } else if ((min == 45) || (min == 54)){
          fill(130,166,140, 150);
      } else if (min == 46){
          fill(197,97,187, 150);
      } else if (min == 47){
          fill(196,107,116, 150);
      } else if (min == 48){
          fill(105,85,190, 150);
      } else if (min == 49){
          fill (110,145,150, 150);
      } else if (min == 51){
          fill(177,244,167, 150);
      } else if (min == 56){
          fill(167,164,129, 150);
      } else if (min == 57){
          fill(166,173,56, 150);
      } else if (min == 58){
          fill(75,151,130, 150);
      } else if (min == 59){
          fill(80,211,90);
      }
  float s=map(second(),0,59, 0,120);
  rect(190,105, s,s);
  
//hours
      // hour color determiner
float hr = map(hour(),0,23, 1,24); 
    if ((hr == 1) || (hr == 13)){
      fill(255);
    } else if ((hr == 2) || (hr == 14)){
        fill(50,185,242);
    } else if ((hr == 3) || (hr == 15)){
        fill(225,80,60);
    } else if ((hr == 4) || (hr == 16)){
        fill(160,100,200);
    } else if ((hr == 5) || (hr == 17)){
        fill(100,232,80);
    } else if ((hr == 6) || (hr == 18)){
        fill(234,95,175);
    } else if ((hr == 7) || (hr == 19)){
        fill (232,113,33);
    } else if ((hr == 8) || (hr == 20)){
        fill(50,70,180);
    } else if ((hr == 9) || (hr == 21)){
        fill(60,190,100);
    } else if ((hr == 10) || (hr == 22)){
        fill(195,160,130);
    } else if ((hr == 11) || (hr == 23)){
        fill(212,242,250);
    } else if ((hr == 0) || (hr == 12) || (hr == 24)){
        fill(100,145,185);
    }
  float m=map(minute(),0,59, 0,280);
  rect(330,330, m,m);
  
}

I had wanted to use an element of growth to represent time, so my clock is a plant with twelve leaves, each growing depending on the hour (12 hour clock). Every time the clock rolls over from 12, the leaves fade, and the cycle restarts.
If revisited, I would create more of an animated element to the plant (leaves tilting back and forth on a fulcrum, or the leaves changing colour and then falling down to the ground after 12).

void setup () {
  size (500, 600);
}

void draw () {
  background (242, 241, 223);

  fill (222, 217, 197);
  rect (0, 500, 600, 100);
  
  // stem
  stroke (185, 222, 149);
  strokeWeight (2);
  line (300, 500, 300, 100);


  noStroke ();
  fill (209, 99, 77); 
  
  
  beginShape (); // planter pot shape

    vertex (300, 500);
  vertex (200, 500);
  vertex (270, 360);
  vertex (330, 360);


  endShape ();

 // set up time
  int hour24 = hour();
  int hour = hour24 % 12;
  int second = second();
  int minute = minute();

  
  float spacing = 25;

// leaves
  for (int i = 0; i < 12; i++) {
    float distFromStem = i * spacing;
    boolean flip = (i % 2) == 0; // boolean in order to arrange leaves in opp. order

 // @ midnight, leaves fade and reset
    if (hour24 == 0 && minute == 0) {
      float opacity = 1 - (float(second)/59.0); 
      println(opacity);
      fill(185, 222, 149, opacity*255);
      beginShape();
      if (flip == true) { 
        vertex(300, 340 - distFromStem); 
        vertex(320, 350 - distFromStem);
        vertex(320, 335 - distFromStem);
        vertex(300, 340 - distFromStem);
      } else {    
        vertex(300, 340 - distFromStem);
        vertex(280, 350 - distFromStem);
        vertex(280, 335 - distFromStem);
        vertex(300, 340 - distFromStem);
      }
      endShape();
    }

    println(hour);

    if (i <= hour) {

      

      fill (185, 222, 149);

      if (i == hour) {
        int shrink = int(20*(float(minute) / 60.0));  // leaf growth w/ hr   
        beginShape();
        if (flip == true) {
          vertex(300, 340 - distFromStem);
          vertex(300 + shrink, 350 - distFromStem);
          vertex(300 + shrink, 335 - distFromStem);
          vertex(300, 340 - distFromStem);
        } else {    
          vertex(300, 340 - distFromStem);
          vertex(300 - shrink, 350 - distFromStem);
          vertex(300 - shrink, 335 - distFromStem);
          vertex(300, 340 - distFromStem);
        }
        endShape();
      } else {
        beginShape(); //leaf
        if (flip == true) {
          vertex(300, 340 - distFromStem);
          vertex(320, 350 - distFromStem);
          vertex(320, 335 - distFromStem);
          vertex(300, 340 - distFromStem);
        } else {    
          vertex(300, 340 - distFromStem);
          vertex(280, 350 - distFromStem);
          vertex(280, 335 - distFromStem);
          vertex(300, 340 - distFromStem);
        }
      }
      endShape();
    }
  }
}

This is a 24-hour clock that allows one to tell the time by counting how many pigeons are on the roof (The gifs above are sped-up versions of the clock). The location that the pigeons fly in from and out to are randomized, in addition to the pigeon’s sizes and colors. A big thanks to Golan Levin and John Choi for tirelessly explaining the inner workings of classes to me.

To improve on this project, I’d implement behavior that would allow the pigeons to shuffle around the rooftop after landing. I’d also add some visible wings to the pigeons when they fly on and off of the screen.

 //Miranda Jacoby
//EMS Interactivity Section A
//majacoby@andrew.cmu.edu
//Copyright Miranda Jacoby 2014

//A big thanks o John Choi for walking me through OOP.

//Implement personal space
 //for i 
 //if px[i] becomes a high or low value
//Implement hour spawn/despawn
//Implement nice movement for pigeon entering/leaving screen

//Initialize pigeon
Pigeon[] pigeonArray = new Pigeon[24];//22? at 0 o'ckloc there is no pigeon.
int hours = hour();//second()% 24;
int pigeonCount = hours;
float detailOffset = width/20;
int newvar = 0;
int oldvar = 0;
boolean deleted = true;
int delay = 0;

void setup(){
  size(600, 400);

  for (int i =0; i < pigeonCount; i ++){
      pigeonArray[i] = new Pigeon(i);
  }
}


void draw(){
  background(50, 130, 230);
  hours = hour();//second()% 24;
  //Function calls!
  //draw pigeons first so that they are layered under the building
     newvar = hours;
    
    if (oldvar != newvar){
         if (oldvar == 23 && newvar == 0){
           flyAllAway();
           delay = 10;
           deleted = false;
     
        }
         else if (delay <= 0){
           createPigeon();
         }
    }
    oldvar = newvar;
    delay = delay - 1;
    
    if(deleted == false && delay <= 0){
      pigeonArray = new Pigeon[24];
      pigeonCount = 0;
      deleted = true;
    }
    
    for (int i =0; i < pigeonCount; i ++){
    pigeonArray[i].update();
    }
    drawBuilding();
    
}

void createPigeon(){
  pigeonArray[pigeonCount] = new Pigeon(hours);
  pigeonCount = pigeonCount + 1;
}

void flyAllAway(){
  for (int i =0; i < pigeonCount; i ++){       pigeonArray[i].isFlyingAway = true;   } }  class Pigeon {    //Final position    float fpx, fpy;    //Starting position    float spx = random(0, 600), spy = -30;    //Current position    float cpx, cpy;    //Fly away position    float rpx, rpy;    int hour;    float pdiam = random (12, 16);//14;    float colorPicker = random (0, 5);    float spacing = 20;    float velx = 0.1, vely = 0.1;    boolean isFlyingAway = false;    //Work on personal space    boolean isLanded = false;           //Constructor: draw the pigeon, initialize variables    Pigeon (int hour){         fpx = (hour * spacing) + 50;         fpy = 285;//height - height/3.5;         cpx = spx;         cpy = spy;         rpx = random(0, 600);//random (-600, 1200);         rpy = random (-200, -300);             }        void update(){      if (isFlyingAway == true){        flyAway();      }            if (isFlyingAway == false){        move();      }      display(cpx, cpy, colorPicker);    }        void display(float px, float py, float colPicker){            //draws individual pigeon, does not increment        noStroke();     //body      bodyColor(colPicker);      ellipse(px, py + pdiam/2, pdiam * 1.5, pdiam * 1.5);      fill(192, 190, 214);      ellipse(px, py + pdiam/1.5, pdiam * 1.2, pdiam * 1.2);     //neck     //for (colPicker >= 0){
     bodyColor(colPicker);
    //}
     ellipse(px, py, pdiam, pdiam * 1.2);
    //eyes
     fill(227, 121, 34);
    //left eye
     ellipse(px - pdiam/3, py - (pdiam - pdiam/2.7), pdiam/8, pdiam/8 );
    //right eye
     ellipse(px + pdiam/3, py - (pdiam - pdiam/2.7), pdiam/8, pdiam/8 );
    //head
     bodyColor(colPicker);
     ellipse(px, py - (pdiam - pdiam/2.5), pdiam/2, pdiam/2);
    //beak
     stroke(0);
     line(px - 1, py - (pdiam - pdiam/2.5), px - 1 + (pdiam/10), py - (pdiam - pdiam/2.5) );
     noStroke();
     fill(255);
     ellipse(px, py - (pdiam - pdiam/2.7), pdiam/10, pdiam/10 );
 
   }
 
 void move(){

   //Move pigeons between positions with easing
   cpx = cpx + velx * (fpx - cpx);
   cpy = cpy + vely * (fpy - cpy);
    //Move pigeons between positions withouy easing
    //cpx = fpx;
    //cpy = fpy;
 }
 
 void flyAway(){
   
   //Move pigeons between positions with easing
   cpx = cpx + velx * (rpx - cpx);
   cpy = cpy + vely * (rpy - cpy);
   //Move pigeons between positions without easing
   //cpx = rpx;
   //cpy = rpy;
}

void bodyColor(float colPicker){
          if ((colPicker == 0) || (colPicker < 1)){
            fill(132, 95, 137);
        }
        else if ((colPicker == 1) || (colPicker < 2)){
            fill(118, 145, 158);
        }
        else if ((colPicker == 2) || (colPicker < 3)){
            fill(118, 122, 131);
        }
        else if ((colPicker == 3) || (colPicker < 3.5)){
            fill(147, 107, 93);
          //fill(137, 91, 73);
        }
//        else if ((colPicker == 4) || (colPicker < 5)){
//            fill(245, 235, 225);
//        }
        else {
            fill(115, 101, 131);
        }
}
 
 }
void drawBuilding(){
  detailOffset = width/40;
  noStroke();
    //Orange Rect
  fill(211, 135, 58);
  rect(width/8, height - height/4, width - width/4, height - height/4);
  
  //White trapezoid
  fill(247, 225, 202);
  quad(width/10 - detailOffset          , height - height/4, 
       width - width/10  + detailOffset , height - height/4,
       width - width/10  - detailOffset , height - height/8,
       width/10 + detailOffset          , height - height/8);

  //Offwhite detail
  stroke(219, 190, 161);
  strokeCap(SQUARE);
  
   //Middle line
  strokeWeight(16);
  line(width/10        , height - height/5.75, 
       width - width/10, height - height/5.75);
       
  //Bottom line    
  strokeWeight(8);
  line(width/10 + detailOffset        , height - height/8, 
       width - width/10 - detailOffset, height - height/8);
       
  //Top line
   strokeWeight(12);
   line(width/10 - detailOffset        , height - height/4.30, 
        width - width/10 + detailOffset, height - height/4.30);
   //Middle line white detail    
   stroke(247, 225, 202);
   strokeWeight(4);
   line(width/10        , height - height/5.75, 
        width - width/10, height - height/5.75);   
 }
 

I was trying to make a 12hour clock that would take a flower shape and for each hour the petal of the flower would be added to the middle part of the flower. For each minutes the orange dots would be randomly placed in the circle and for the seconds smaller brown dots would be placed in it.

I had hard time trying to make the circles be in a circular shape and trying to make the code work since it wouldn’t refresh itself every second and increase in the number of dots in the middle even though I wrote the function in the draw function.(I still couldn’t fix it) However, the shape came out as I wanted it to come out except that it isn’t working perfectly right now. I need to go back and see what the problem is.

void setup() {
size(400, 400);
}
void draw(){
  smooth();
  background(255);
  noStroke();
  float cx = width/2;
  float cy = height/2;
  float diameter = width*.6;
  float nbr_circles = 12;
  float lg_diam =  width * .55;                 // large circle's diameter
  float lg_rad  = lg_diam/2;                    // large circle's radius
  float lg_circ =  PI * lg_diam;                // large circumference
  float sm_diam = (lg_circ / nbr_circles);      // small circle's diameter
  float hourCount = hour();
  hourCount = hourCount%12;
  for (int i = 1; i < = nbr_circles; ++i) {
    if (hourCount > 0){
      fill(240,186,239);
      float angle = i * TWO_PI / nbr_circles;
      float x = cx + cos(angle) * lg_rad;
      float y = cy + sin(angle) * lg_rad;
      ellipse(x, y, sm_diam, sm_diam);
      println(hourCount);
      hourCount = hourCount - 1;
    }else{
      noFill();
      float angle = i * TWO_PI / nbr_circles;
      float x = cx + cos(angle) * lg_rad;
      float y = cy + sin(angle) * lg_rad;
      ellipse(x, y, sm_diam, sm_diam);
      hourCount = hourCount -1;
    }
  }

  fill(250,244,192);
  ellipse(cx, cy, lg_diam, lg_diam);

  float minuteCount = minute();
  for (int i = 1; i < = minuteCount; ++i){
    fill(245,144,77);
    ellipse(random(140,260),random(140,260),10,10);
  } noLoop();


  float secondCount = second();
  for (int i = 1; i <= secondCount; ++i){
    fill(108,81,68);
    ellipse(random(130,270),random(130,270),6,6);
  } noLoop();
}