float mSecond = 0;
float mMinute = 0;
float mHour = 0;
float my = 0;
int ellWidth = 15;
float graynumber = 240;
int rgbSky = hour() * 10;


void setup () {
  size(720,300);
  smooth();
}

//theoretically changes the background color to match the hour...
void draw () {
  if (hour() < 13) {
    rgbSky = hour() * 8;
  }
  else {
    rgbSky = 255 - (hour() * 10);
  }

  background(rgbSky - 80, rgbSky - 40, 105);

  //=========================================
  //================lines====================
  //=========================================


  for(int i = 0; i < 720; i += 12) {    


    stroke(graynumber,graynumber,graynumber, 45 );
    strokeWeight(0.5);
    line(i,0, i,height);    
  }

  for(int i = 0; i < 720; i += 60) {    
    stroke(graynumber,graynumber,graynumber, 60 );
    strokeWeight(2);
    line(i,0, i,height);

  }

  //=========================================
  //=======================beads=============
  //=========================================

  noStroke();

  float r = 255;
  float g = 255;
  float b = 0;
  int transparency = 100;

  fill(r,g,b, transparency); 
  ellipse(mHour,my, ellWidth + 40, ellWidth + 40);

  fill(r,g,b, transparency);
  ellipse(mMinute,my - 5, ellWidth, ellWidth);

  fill(r,g,b, transparency); 
  ellipse(mSecond,my + 20, ellWidth - 5, ellWidth - 5);

  mSecond = 0.95*mSecond +0.05*(second()*12);
  mMinute = 0.95*mMinute +0.05*(minute()*12);
  mHour = 0.95*mHour +0.05*((hour() %13 )*60);

  my = (0.97*my +0.03*mouseY) %height;

  my = constrain(my, 28, height-28);


  //===========================================

}