Curran Zhang- Project 06 – Abstract Clock

sketch

/*Curran Zhang
curranz
Project 6
Section A
*/

function setup(){
  createCanvas(600,600);
 }

function draw(){
  background(204,230,255);
  angleMode(DEGREES);
  var hr = hour();
  var min = minute();
  var sec = second();
  var rSec = map(sec,0,59,50,width - 50);
  var rSec1 = map(sec,0,59,width - 50, 50);
  var rMin = map(min,0,59,50,width - 50);
  var rMin1 = map(min,0,59,width - 50,50);
  var rHr = map(hr,0,23,50,width - 50);

  //Sun(based on the hours)
    fill(255, 200, 60)
    ellipse(rHr, 100,50,50);

  //Sun Inner Rays(based on the minutes)
    for (var i = 1; i <= min; i++) {
      var x = 0
      push();
      translate(rHr,100);
      rotate(180);
      rotate(6 * i);
      stroke(255, 204, 51);
      line(0,0,0,50)
      pop();
    }

  //Sun Outer Rays(based on the seconds)
    for (var i = 1; i <= sec; i++) {
      var x = 0
      push();
      translate(rHr,100);
      rotate(180);
      rotate(6 * i);
      stroke(255, 234, 81);
      strokeWeight(1.5);
      line(rSec,0,0,50)
      pop();
    } 

  //Clouds(based on the minutes)
    fill(275);
      ellipse(rMin - 20,200, 50,50);
      ellipse(rMin - 40,220,35,30);
      ellipse(rMin,210,90,60);
      ellipse(rMin + 35,200,40,40);
      ellipse(rMin + 40,220,80,50);

      ellipse(rMin1 - 20,200, 50,50);
      ellipse(rMin1 - 40,220,35,30);
      ellipse(rMin1,210,90,60);
      ellipse(rMin1 + 35,200,40,40);
      ellipse(rMin1 + 40,220,80,50);

  //Tree
    fill(165,113,100);
      beginShape();
      vertex(530,0,590,0);
      vertex(530,0);
      vertex(540,150);
      vertex(540,180);
      vertex(530,340);
      vertex(590,340);
      vertex(580,180);
      vertex(580,150);
      vertex(590,0);
      endShape();

  //Land
    fill(255, 209, 179);
     beginShape();
      vertex(0,550);
      vertex(280,375);
      vertex(283,366);
      vertex(325,360);
      vertex(335,350);
      vertex(360,340);
      vertex(385,326);
      vertex(470,330);
      vertex(485,333);
      vertex(527,331);
      vertex(553,326);
      vertex(558,324);
      vertex(584,326);
      vertex(600,330);
      vertex(600,600);
      vertex(0,600);
      endShape(CLOSE);
 
  //Sea
    fill(0,204,255);
      noStroke();
      rect(0,400,600,300);

    for (var i = 0; i <= 10; i++) {
      fill(0,204,255);
      stroke(275);
      strokeWeight(1);

      if (i % 2 == 0) 
        {arc(30 + 60 * i ,400,60,15, 180, 0)
        }
        else { 
          if (i < 5) 
          {fill(204,230,255);
          arc(30 + 60 * i ,400,60,15, 0,180)
          }
          else{
            fill(255, 209, 179);
            arc(30 + 60 * i ,400,60,15, 0,180)
          } 
        }
    }

  //SeaFloor
    noStroke();
    fill(0,100,102);
      beginShape();
      vertex(0,557);
      vertex(10,554);
      vertex(31,540);
      vertex(40,540);
      vertex(57,538);
      vertex(93,545);
      vertex(133,557);
      vertex(182,548);
      vertex(231,544);
      vertex(241,546);
      vertex(325,584);
      vertex(403,571);
      vertex(425,567);
      vertex(469,567);
      vertex(518,548);
      vertex(580,534);
      vertex(600,526);
      vertex(600,600);
      vertex(0,600);
      endShape(CLOSE);

  //Fish (based on the seconds)
    fill('orange')
      ellipse(rSec, 500,40,25);
      triangle(rSec - 10,500,rSec - 30,515,rSec - 30,480);

    fill(255,102,204)
      ellipse(rSec1, 460,40,25);
      triangle(rSec1 + 10,460,rSec1 + 30,475,rSec1 + 30,445);

  //Text
    fill(0);
      text( "Hour:" + hr ,40,560);
      text( "Minute:" + min ,40,575);
      text( "Second:" + sec ,40,590);
}

For this project, I wanted to design a clock that shows the environment changing through time. Given how I previously done a mountain scenery, I thought it would be nice to create a beach scenery. The Sun itself has component that is linked to the hour, minute, and second. There are also other components to help show the minute and seconds more clearly.