Project-06-Abstract-Clock

sketch

function setup() {
    createCanvas(400, 400);
    angleMode(DEGREES);
}

function draw() {
    background(240, 217, 156);

    fill(220);

    strokeWeight(2);
    ellipse(200,200,395);


    fill('magenta');
    stroke(150,255,100);
    ellipse(200,180,50);

    fill(183, 156, 240);
    strokeWeight(6);
    arc(200,250,200,150,0,180,CHORD);


    let hr = hour();
    let mn = minute();
    let sc = second();

    strokeWeight(4);
    stroke(255,100,150);
    noFill();
    let end1 = map(sc,0,60,0,360);
    arc(120,120,35,35,0,end1);
    arc(280,120,35,35,0,end1);

    stroke(150,100,255);
    let end2 = map(mn,0,60,0,360);
    arc(120,120,28,28,0,end2);
    arc(280,120,28,28,0,end2);

    stroke(150,255,100);
    let end3 = map(hr % 12,0,12,0,360);
    arc(120,120,20,20,0,end3);
    arc(280,120,20,20,0,end3);


    stroke("orange");
    let s = map(second(),0,60,0,360) - 180;
    line(200,180,200 + cos(s)*50, 180 + sin(s)*50);

    strokeWeight(2);
    text('hehe: \n' + s, 100, 190);
    text('hehe: \n' + s, 300, 190);


    strokeWeight(1);
    stroke('red');
    text('Hey_time: \n' + hr + 'hours' + mn + 'minutes', 100, 50);



}

function mouseIsPressed() {
    if (s % 5 == 0){
    fill('blue');
    strokeWeight(6);
    stroke(0);
    arc(200,250,200,150,0,180,CHORD);
    } else {
        fill(183, 156, 240);
        strokeWeight(6);
        stroke(0);
        arc(200,250,200,150,0,180,CHORD);
    }
}

This project was quite challenging. I had to search through the internet to learn how to call the numbers using javascript. It turned out to be easy. However, contextualizing my concepts to code was again very difficult. I tried to create a cute face using functions that implement the numbers of the clock. However, as always, it turned out quite differently than my sketch. I used lines on the nose and used the print function to print the time on the top left corner of the canvas.