project 6

sketch.js

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

//--------------------------
function draw() {
    background(255);
    noStroke();
    
    // current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // widths of the rectangles
    //map(value, start1, stop1, start2, stop2, 

    var mappedH = map(H, -5,23, width,0);
    var mappedM = map(M, -5,59, width,0);
    var mappedS = map(S, -5,59, width,0);
    var rectHeight = width / 3;
    
    // rectangle time bars


//Hour
    fill (0)
    rect(0*rectHeight,0, rectHeight,width);
    fill(255);
    rect(0*rectHeight,0, rectHeight,mappedH);
//minute
    fill(50);
    rect(1*rectHeight,0, rectHeight,width);
    fill(255); //background color
    rect(1*rectHeight,0,rectHeight, mappedM);
  //second  
    fill(100);
    rect(2*rectHeight,0, rectHeight,width);
    fill(255);
    rect(2*rectHeight,0, rectHeight,mappedS); //rectangle that moves


//text
    fill(255);
    textFont('Georgia');
    text("Hour " +H, 0*rectHeight+95, mappedH +15);
    text("Minute " +M, 1*rectHeight + 95,mappedM +15 );
    text("Second " +S, 2*rectHeight +95, mappedS +15);//mapped allows the text to move with the bars
    
}

My clock was inspired by a bar graph. I used the mapped function we learned.