ifv-Project-06-Clock

sketch

//Isabelle Vincent
//Section E
//ifv@andrew.cmu.edu
//Project-06
function setup() {
  createCanvas(480,480);
  var H = hour();
  var cChange = map(H,0,23,0,50)
  background(31+cChange,30+cChange,72+cChange);
}


function draw() {
  var H = hour();
  var M = minute();
  var S = second();
    //change color in relation to hours
    var cChange = map(H,0,23,0,50)
    background(31+cChange,30+cChange,72+cChange,20);
    var c=color(200+cChange,134+cChange,54+cChange);
    fill(c)

    //SunRays
    for(var i=0; i < 60;i++){
      strokeWeight(3);
      var col = color(c);
      if(minute() == i) {
        col = color(200+cChange,134+cChange,54+cChange,40);
      }
      drawRay(i, color(col));
    }
    //sun center
    noStroke();
    ellipse(width/2,height/3,width/8,height/8);

    //Glare
    push();
    translate(width/2,height/3);
    var secondz = map(S,0,59,0,360);
    rotate(radians(secondz));
    fill(255,255,255,70);
    ellipse(width/3.5,0,15,15);
    ellipse(width/3.7,0,10,10);
    pop();
      //triangle
      fill(255,255,255,40);
      noStroke();
      var hgt =0;
      var sc = map(S,0,59,0,height/7);
      hgt +=sc
      triangle(0,height,width/2,height-hgt,width,height)

}
//Instruction on how draw Ray
function drawRay(count,col) {
  push();
  translate(width/2,height/3);
  rotate(radians(count*6));
  stroke(col);
  var H = hour();
  var rayH = map(H,0,0,140);
  line(0,0,(width/10),height/5);
  pop();
}

The color of the sun and the background color are affected by the hour. One of the rays changes color according to the minute. The white “flare” circles around the sun in relation to the passing seconds. The triangle and flare leave a ghostly trail because a semi-transparent background is being drawn on top of past iterations. My result was very different from my original idea, I made some compromises for simplicity. I was happy with the changes I met and the result has the same general tone I originally intended when making my sketch.