Xiaoyu Kang-Project 06-Abstract Clock

sketch

//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-06

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

function draw(){
    background(233,217,120);
    noStroke();

    var s = second();
    var m = minute(); 
    var h = hour();

    //background circle
    fill(62,124,208);
    circle(150, 150, 270);

    //arc of second
    strokeWeight(10);
    stroke(180,230,255);
    arc(width/2, height/2, 230, 220, PI + HALF_PI, PI + HALF_PI + 2 * PI * (s/60));

    //arc of minute
    strokeWeight(20);
    stroke(147,193,255);
    arc(width/2, height/2, 170, 170, PI + HALF_PI, PI + HALF_PI + 2 * PI * (m/60));

    //arc of hour
    strokeWeight(30);
    stroke(110,148,255);
    fill(71,93,137);
    arc(width/2, height/2, 90, 90, PI + HALF_PI, PI + HALF_PI + 2 * PI * (h/12));
    
    //center circle 
    fill(233,217,120);
    noStroke();
    circle(width/2, height/2, 15);

    //marks on the sides
    fill(255);
    noStroke();
    rect(width/2 - 20/2, 0, 20, 50);
    rect(width/2 - 20/2, height - 50, 20, 50);
    rect(0, height/2 - 20/2, 50, 20);
    rect(width - 50, height/2 - 20/2, 50, 20);
}

For this project, I thought about the more modern design of watches that is designed nowadays. So I tried to keep the way of representing the time simple and easy to understand. I also tries to use some pop of color to make the image visually pleasing.