Abstract clock

This is my abstract clock, I try to record my schedule in a day. Like during the day, I typed notes, or during the night, I drank coffee. The hour plays a role in changing the background color, the minute plays a role in changing the scene content, and the second plays a role in the flicking of elements.

Abstract Clock

//Jason Jiang
//Section E


function setup() {
    createCanvas(400, 400);
    colorMode(HSB)
    }
    


function draw() { 
//Setting scenes for different time 
    if(hour()>=0 & hour()<=6){
        sleep() 
    }
    if(hour()>=6 && hour()<=18){
        note()
    }
    if(hour()>=18 && hour()<=24){
        coffee() 
    }
}

//0:00-6:00
function sleep(){
    var secondcount = map(minute(), 0, 60, 0, 3600)+second()
    var c = map(hour(), 0, 6, 0, 100)
    var h = map(secondcount, 0, 3600, 0, 90)

    //Changing background color per hour
    background(80, 100-c, 100)

    //Drawing battery
    noFill();
    strokeWeight(10)
    rect(width/2-25, height/2-50, 50, 100)
    rect(width/2-7.5, height/2-60, 15, 5)
    
    //Changing color and height of battery per second, the battery becomes full per hour
    strokeWeight(0)
    push()
    translate(width/2, height/2)
    rotate(radians(180))
    fill(255-c, c, 0)
    rect(-20, -45, 40, h)
    pop()
    //Drawing lightning
    lightning()
}

//Flickering lightning per second
function lightning(){
    if (second()%2==0){
        push()
        translate(width/2, height/2)
        strokeWeight(8)
        rotate(radians(-10))
        line(10, -25, -10, 0)
        line(-10, 0, 10, 0)
        line(10, 0, -10, 25)
        pop()
    }   
}

//6:00-18:00
function note(x, y, m){
    var secondcount = map(minute(), 0, 60, 0, 3600)+second()
    var m = floor(map(minute(), 0, 60, 0, 10))
    var x = map(secondcount, 0, 3600, 0, 340)
    var y = 10+m*40
    var c = map(hour(), 6, 18, 0, 100)
    //Changing background color per hour
    background(30, c, 100)
    
    //Changing line length per second, a row takes 6 minutes
    fill(50)
    strokeWeight(0)
    rect(25, y, x, 15) 
    strokeWeight(5)

    //Flickering line per second
    if(second()%2==0){
        line(x+30, y-5, x+30, y+20)  
        } 
    //Adding lines for previous minutes
    for(var i=0; i<m; i++){
        strokeWeight(0);
        rect(25, 10+i*40, 340, 15)    
        }
}

//18:00-24:00
function coffee() {
    var secondcount = map(minute(), 0, 60, 0, 3600)+second()
    var c = map(hour(), 18, 24, 0, 100)
    var h = map(secondcount, 0, 3600, 0, 140)
    
    //Changing background color per hour
    background(200, c, 50)

    //Drawing coffee cup
    fill(20, 50, 40);
    strokeWeight(10)
    rect(width/2-50, height/2-50, 100, 150)
    noFill();
    strokeWeight(15)
    rect(width/2-92.5, height/2-10, 40, 60)
    strokeWeight(0)
    fill(255)

    //Changing height of coffee per min
    rect(width/2-45, height/2-45, 90, h)

    //Adding heat
    heat()
}

//Flickering heat per second
function heat(){
    strokeWeight(6)
    noFill()
    var w = width/2 
    var h = height/2
    if (second()%2==0){
        for(i=0; i<3; i++){
            bezier(w-30, h-70, w-20, h-80, w-40, h-100, w-30, h-110)
            w+=30
        }
    }
}