Code

//The Canvas displays a simple scene, and some of its elements are manipulated and move with time. Clouds, the sun, the moon, the color of the sky and the water.
Sand s;
Water w;
Sky sky;
Sun sun;
Moon moon;
MinutesCloud cl;
SecondsCloud sl;

void setupImages(){
  noStroke(); 
  BImage b; 
  b = loadImage("pail.gif"); 
  image(b, 400, 470,150,110); 

  BImage b2;
  b2=loadImage("starfish.jpg");
  image(b2,100,470);

}
void setup(){
  int sec = second();  // Values from 0 - 59 
  int m = minute();  // Values from 0 - 59 
  int h = hour();    // Values from 0 - 23 
  background(255);
  size(600,600);
  sky=new Sky();
  sky.draw();

  cl=new MinutesCloud();
  sl=new SecondsCloud();
  w=new Water();
  s=new Sand();
  moon=new Moon(20,h);
  sun=new Sun(20,h);
    setupImages();
}

void loop(){
  
  int sec = second();  // Values from 0 - 59 
  int m = minute();  // Values from 0 - 59 
  int hr = hour();    // Values from 0 - 23 
  color c1;
  sky.draw();
  sun.draw();  
  w.draw();
  moon.draw();
  cl.draw();
  sl.draw();
  
}

class Sand{
  Sand(){
        noStroke(); 
        color c1=color(241,203,70);
        fill(c1);
        rect(0, 450,800,150); 
  }
}

class Sky{
  int defRed=150;
  int defGreen=200;
  int defBlue=255;
  float a=0.1;
  int darkRed=0;
  int darkGreen=75;
  int darkBlue=150;
  int lasthour;
  color c1;
  
  Sky(){
        noStroke(); 
   }
  
   void draw(){
     int hr=hour();
     color c1;
     if(hr==16){
         fill(30,184,243);
         rect(0, 0,800,400);
         return;
       }
       else
       if(hr==17){
         fill(104,165,231);
         rect(0, 0,800,400);
         return;
       }
       else
       if(hr==18){
         fill(82,142,208);
         rect(0, 0,800,400);
         return;
       }
       else
       if(hr==19){
         fill(70,130,190);
         rect(0, 0,800,400);
         return;
       }
       else
       if(hr == 20){
           fill(50,110,175);
           rect(0, 0,800,400);
           return;
       }
       else if(hr==21){
           fill(30,87,150);
           rect(0, 0,800,400);
           return;
       }
       else if(hr==22){
           fill(5,64,128);
           rect(0, 0,800,400);
           return;
       }
       else if(hr==23){
           fill(5,64,128);
           rect(0, 0,800,400);
           return;
           
       }
       else
       if(hr==0 || hr==1 || hr==2 || hr==3){
         fill(0,35,74);
         rect(0, 0,800,400); 
         return;
       }
       if(hr==4){
         fill(5,64,128);
         rect(0, 0,800,400);
         return;
       }
       if(hr==5){
         fill(30,87,150);
         rect(0, 0,800,400);
         return;
       }
       if(hr==6){
         fill(90,150,210);
         rect(0, 0,800,400);
         return;
       }
       if(hr==7){
         fill(115,176,229);
         rect(0, 0,800,400);
         return;
       
       }
       else {
         fill(150,200,255); 
         rect(0, 0,800,400);
         return;
     }
  }
}

 class Water{
  Water(){
  }
  
  void draw(){
    int h=hour();
    if(h>=18 || h<=6){
      fill(21,50,167);
    }
    else{
      fill(141,172,234);
    }
    noStroke(); 
    //color c1=color(141,172,234);
    //fill(c1);
    rect(0, 380,800,70);
  }

}

class Sun{
  int r,g,b;
  int currenty;
  int currentx=350;
  int w=50;
  int h=50;
  int initTime=12;
  int initY=30;
  int currtime;
  int up=-20;
  int down=20;
  int y;
  boolean visible=false;
  Sun(int y,int currentHour){
    y=y;
    currtime=currentHour;
    //print(currtime);
  }
  
  void draw(){
    int time=hour();
    int tempLoc=30;
    //Computer and map the hour to the position.
    if(time>6 && time<18){
      visible=true;
      if(time>=6 && time<=12 ){
        tempLoc=(initTime-time)*60;
      }
      else
      if(time>12 && time<18){
        tempLoc=(time-initTime)*60;
      }
    }
    else{
      visible=false;
    }  
    if(visible){
      noStroke(); 
      color c1=color(243,240,26);
      fill(c1);
      push();
      ellipse(375,tempLoc,w,h);   
      pop();
    }
 }
}

class Moon{
  int r,g,b;
  int currenty;
  int currentx=360;
  int w=50;
  int h=50;
  int initTime=0;
  int initY=30;
  int currtime;
  int up=-20;
  int down=20;
  int y;
  boolean visible=false;
  
  Moon(int y,int currentHour){
    y=y;
    currtime=currentHour;
  }
   
  void draw(){
    int time=hour();
    int tempLoc=30;
    if(time>=18 ||time<6){
      visible=true;
      if(time>0 && time<=6){
        tempLoc=(time-initTime)*60;
      }
      else
      if(time>=18 && time<=23 ){
        
        tempLoc=(23-time)*60;
      }
    }
    else{
      visible=false;
    }  
    if(visible){
      noStroke(); 
      color c1=color(255,255,255);
      fill(c1);
      push();
      ellipse(375,tempLoc,w,h);   
      //print(tempLoc);
      pop();
    }
  }
 }
 
 class MinutesCloud{
   int y=10;
   int initX=30;
   int initY=10;
   int w=55;
   int h=50;
   MinutesCloud(){
   }
   
   void draw(){
     int hr=hour();
     int min=minute();
     int x=initX+ min*10;
     if(hr > 17 || hr < 6){
       fill(145,145,145);
     }
     else{
       fill(255,255,255);
     }
     ellipse(x,initY,w,h);
     ellipse(x-15,initY-10,w,h);
     ellipse(x-25,initY-15,w,h);
     ellipse(x-25,initY+25,w,h);
     ellipse(x-30,initY,w+30,h);
     ellipse(x-55,initY-10,w+40,h);
     ellipse(x-60,initY-5,w,h);
     ellipse(x-75,initY+30,w,h);
     ellipse(x-75,initY-20,w,h);
     ellipse(x-100,initY,w+5,h);
     return;
   }
 }
 
 class SecondsCloud{
   int y=10;
   int initX=30;
   int initY=30;
   int w=55;
   int h=50;
   
   SecondsCloud(){
   }
    
   void draw(){
     int sec=second();
     int x=initX+ sec*10;
     fill(158,158,158);
     ellipse(x,initY,w,h);
     ellipse(x-15,initY-10,w,h);
     ellipse(x-25,initY-15,w,h);
     ellipse(x-25,initY+25,w,h);
     ellipse(x+25,initY-15,w,h);
     ellipse(x+10,initY+10,w,h);
     ellipse(x-60,initY-5,w,h);
     ellipse(x-75,initY+30,w,h);
     ellipse(x-75,initY-20,w,h);
     ellipse(x-100,initY,w+5,h);
     
     return;
     
   }
 }

Project 1: Display the progress of time in a non-traditional way.

Statement:From the central heartbeat of the central processor, to the obsessive timestamping of files and blog entries, to ever present clock displays, time is a fundamental feature of computation. Display the progress of time in a non-traditional way. It is OK to consider large temporal scales (e.g. seasons), but smaller temporal scales should also be displayed (or be available to be displayed, perhaps as a function of user input). You may make use of mouse input if you wish.
//The Canvas displays a simple scene, and some of its elements are manipulated and move with time. Clouds, the sun, the moon, the color of the sky and the water.

hide brief