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.
//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
}
}
}