For my final version of my clock I didn’t changed the clock time ticking and how it is displayed because I like how it looked. However for the alarm, when you set it the snakes appear slithering across the screen on a loop until the alarm goes off then they disappear. Once the alarm goes off a different set of snakes appear and they are a dark and faster version of the previous ones. As well as the clock shakes until the alarm is finished. I thought the clock didn’t loop when I tested it in the debugger and some other things, so I tested it again but at midnight and it loops! I like how my clock turned out, I think it was a good idea to change the colours of the snakes so that they fit better with the rest of the theme. Next time what I would do better is do something more with the alarm snakes so they are more interesting than just watching slither across the screen on loop. As well as maybe turning the ticking seconds would be interesting to see them as small snakes ticking across slowly.
Last active
March 22, 2018 22:45
-
-
Save Marithia/62987049fb98363b193387840edb340e to your computer and use it in GitHub Desktop.
CC2 Assignment 1: Clock
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let secondBarWidth2 = 0; | |
let secondBarHeight = 0; | |
let a, b; | |
let c, v; | |
let shake = 0; | |
a = 850; | |
b = 120; | |
c = 850; | |
v = 120; | |
n = 850; | |
z = 120; | |
q = 850; | |
w = 120; | |
t = 850; | |
y = 120; | |
f = 850; | |
g = 120; | |
function draw_clock(obj) { | |
createCanvas(950, 500); | |
let hours = obj.hours; | |
let minutes = obj.minutes; | |
let seconds = obj.seconds; | |
let second = obj.second; | |
let alarmsec = obj.seconds_until_alarm | |
secondBarHeight = map(hours, 0, 59, height/2.2, 10); | |
secondBarHeighthalf = map(hours, 0, 59, height/4, 5); | |
secondBarHeight = map(minutes, 0, 59, height/2.2, 10); | |
secondBarHeighthalf = map(minutes, 0, 59, height/4, 5); | |
secondBarHeight = map(seconds, 0, 59, height/2.2, 10); | |
secondBarHeighthalf = map(seconds, 0, 59, height/4, 5); | |
secondBarWidth = map(alarmsec, 0, 20, 0, 800); | |
secondBarWidth2 = map(hours, 0, 59, 0, 130); | |
secondBarWidth2 = map(minutes, 0, 59, 0, 130); | |
secondBarWidth2 = map(seconds, 0, 59, 0, 130); | |
background(255); | |
//Alarm goes off shake | |
translate(random (-shake, shake), random (-shake, shake)) | |
shake = shake * -0.2; | |
if (alarmsec == 0) { | |
shake = 6; | |
} | |
//Alarm goes off shake end | |
fill(255, 170, 73); | |
//First and second slot | |
if(hours == 1){ | |
//draw 1 in the second slot | |
vertBar(300, 50, 30, 230); | |
}else if(hours == 2){ | |
//draw 2 in the second slot | |
halfvertBar(350, 50, 30, 130); | |
halfvertBar(250, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 3){ | |
//draw 3 in the second slot | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 4){ | |
//draw 4 in the second slot | |
vertBar(350, 50, 30, 230); | |
halfvertBar(250, 50, 30, 130); | |
horiBar(250, 150); | |
}else if(hours == 5){ | |
//draw 5 in the second slot | |
halfvertBar(250, 50, 30, 130); | |
halfvertBar(350, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 6){ | |
//draw 6 in the second slot | |
vertBar(250, 50, 30, 230); | |
halfvertBar(350, 150, 30, 130); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 7){ | |
//draw 7 in the second slot | |
horiBar(250, 50); | |
vertBar(350, 50, 30, 230); | |
}else if(hours == 8){ | |
//draw 8 in the second slot | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 9){ | |
//draw 9 in the second slot | |
halfvertBar(250, 50, 30, 130); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
}else if(hours == 10){ | |
//draw 10 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 250); | |
}else if(hours == 11){ | |
//draw 11 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(250, 50, 30, 230); | |
}else if(hours == 12){ | |
//draw 12 in the second slot | |
vertBar(150, 50, 30, 230); | |
halfvertBar(350, 50, 30, 130); | |
halfvertBar(250, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 13){ | |
//draw 13 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 14){ | |
//draw 14 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
halfvertBar(250, 50, 30, 130); | |
horiBar(250, 150); | |
}else if(hours == 15){ | |
//draw 15 in the second slot | |
vertBar(150, 50, 30, 230); | |
halfvertBar(250, 50, 30, 130); | |
halfvertBar(350, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 16){ | |
//draw 16 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(250, 50, 30, 230); | |
halfvertBar(350, 150, 30, 130); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 17){ | |
//draw 17 in the second slot | |
vertBar(150, 50, 30, 230); | |
horiBar(250, 50); | |
vertBar(350, 50, 30, 230); | |
}else if(hours == 18){ | |
//draw 18 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 19){ | |
//draw 19 in the second slot | |
vertBar(150, 50, 30, 230); | |
halfvertBar(250, 50, 30, 130); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
}else if(hours == 20){ | |
//draw 20 in the second slot | |
halfvertBar(150, 50, 30, 130); | |
halfvertBar(50, 150, 30, 130); | |
horiBar(50, 50); | |
horiBar(50, 150); | |
horiBar(50, 250); | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 250); | |
}else if(hours == 21){ | |
//draw 21 in the second slot | |
halfvertBar(150, 50, 30, 130); | |
halfvertBar(50, 150, 30, 130); | |
horiBar(50, 50); | |
horiBar(50, 150); | |
horiBar(50, 250); | |
vertBar(250, 50, 30, 230); | |
}else if(hours == 22){ | |
//draw 22 in the second slot | |
halfvertBar(150, 50, 30, 130); | |
halfvertBar(50, 150, 30, 130); | |
horiBar(50, 50); | |
horiBar(50, 150); | |
horiBar(50, 250); | |
halfvertBar(350, 50, 30, 130); | |
halfvertBar(250, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 23){ | |
//draw 23 in the second slot | |
halfvertBar(150, 50, 30, 130); | |
halfvertBar(50, 150, 30, 130); | |
horiBar(50, 50); | |
horiBar(50, 150); | |
horiBar(50, 250); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 0){ | |
//draw 0 in the second slot | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 250); | |
vertBar(50, 50, 30, 230); | |
vertBar(150, 50, 30, 230); | |
horiBar(50, 50); | |
horiBar(50, 250); | |
} | |
//Third and fourth slot | |
if(minutes == 1){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 1 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 2){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 2 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 3){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 3 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 4){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 4 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 5){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 5 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 6){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 6 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 7){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 7 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 8){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 8 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 9){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 9 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 10){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 10 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 11){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 11 in the last slot | |
vertBar(650, 50, 30, 230); | |
}else if(minutes == 12){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 12 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 13){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 13 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 14){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 14 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 15){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 15 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 16){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 16 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 17){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 17 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 18){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 18 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 19){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 19 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 20){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 20 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 21){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 21 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 22){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 22 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 23){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 23 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 24){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 24 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 25){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 25 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 26){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 26 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 27){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 27 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 28){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 28 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 29){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 29 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 30){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 30 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 31){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 31 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 32){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 32 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 33){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 33 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 34){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 34 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 35){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 35 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 36){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 36 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 37){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 37 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 38){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 38 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 39){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 39 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 40){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 40 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 41){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 41 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 42){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 42 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 43){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 43 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 44){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 44 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 45){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 45 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 46){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 46 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 47){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 47 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 48){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 48 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 49){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 49 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 50){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 50 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 51){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 51 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 52){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 52 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 53){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 53 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 54){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 54 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 55){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 55 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 56){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 56 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 57){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 57 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 58){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 58 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 59){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 59 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 0){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 60 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
} | |
//End of numbers | |
noStroke(); | |
//Snakes when alarm set | |
if(alarmsec > 0){ | |
fill(255, 101, 45); | |
rect(a, b, 400, 100); | |
fill(0); | |
fill(255, 225, 79); | |
rect(a, b, 50, 100); | |
rect(a+80, b, 20, 100); | |
rect(a+130, b, 50, 100); | |
rect(a+200, b, 10, 100); | |
rect(a+240, b, 35, 100); | |
rect(a+290, b, 15, 100); | |
rect(a+325, b, 10, 100); | |
rect(a+350, b, 40, 100); | |
fill(255); | |
ellipse(a+15, b+25, 15, 15); | |
ellipse(a+15, b+70, 15, 15); | |
a = a + random(-5.8, 0.2); | |
if (a < -400){ | |
a = 850; | |
} | |
} | |
if(alarmsec > 0){ | |
fill(255, 82, 63); | |
rect(c+100, v-120, 400, 80); | |
fill(255, 202, 89); | |
rect(c+100, v-120, 50, 80); | |
rect(c+180, v-120, 20, 80); | |
rect(c+230, v-120, 50, 80); | |
rect(c+300, v-120, 10, 80); | |
rect(c+340, v-120, 35, 80); | |
rect(c+390, v-120, 15, 80); | |
rect(c+255, v-120, 10, 80); | |
rect(c+450, v-120, 40, 80); | |
fill(255); | |
ellipse(c+115, v-100, 15, 15); | |
ellipse(c+115, v-60, 15, 15); | |
c = c + random(-6.95, 0.5); | |
if(c < -450) { | |
c = 850; | |
} | |
} | |
if(alarmsec > 0){ | |
fill(255, 230, 107); | |
rect(n+250, z+150, 400, 105); | |
fill(255, 166, 66); | |
rect(n+250, z+150, 50, 105); | |
rect(n+330, z+150, 20, 105); | |
rect(n+380, z+150, 50, 105); | |
rect(n+430, z+150, 10, 105); | |
rect(n+490, z+150, 35, 105); | |
rect(n+540, z+150, 15, 105); | |
rect(n+405, z+150, 10, 105); | |
rect(n+600, z+150, 40, 105); | |
fill(255); | |
ellipse(n+265, z+175, 15, 15); | |
ellipse(n+265, z+225, 15, 15); | |
n = n + random(-8, 0.5); | |
if(n < -600) { | |
n = 900; | |
} | |
} | |
//snakes when alarm set ends | |
//Snakes when alarm goes off | |
if(alarmsec == 0){ | |
fill(221, 4, 4); | |
rect(q+250, w+150, 400, 105); | |
fill(255, 135, 66); | |
rect(q+250, w+150, 50, 105); | |
rect(q+330, w+150, 20, 105); | |
rect(q+380, w+150, 50, 105); | |
rect(q+430, w+150, 10, 105); | |
rect(q+490, w+150, 35, 105); | |
rect(q+540, w+150, 15, 105); | |
rect(q+405, w+150, 10, 105); | |
rect(q+600, w+150, 40, 105); | |
fill(255); | |
ellipse(q+265, w+175, 15, 15); | |
ellipse(q+265, w+225, 15, 15); | |
q = q + random(-8, 0.1); | |
if(q < -600) { | |
q = 900; | |
} | |
} | |
if(alarmsec == 0){ | |
fill(255, 105, 56); | |
rect(t+100, y-120, 400, 80); | |
fill(255, 190, 86); | |
rect(t+100, y-120, 50, 80); | |
rect(t+180, y-120, 20, 80); | |
rect(t+230, y-120, 50, 80); | |
rect(t+300, y-120, 10, 80); | |
rect(t+340, y-120, 35, 80); | |
rect(t+390, y-120, 15, 80); | |
rect(t+255, y-120, 10, 80); | |
rect(t+450, y-120, 40, 80); | |
fill(255); | |
ellipse(t+115, y-100, 15, 15); | |
ellipse(t+115, y-60, 15, 15); | |
t = t + random(-7.85, 0.5); | |
if(t < -450) { | |
t = 850; | |
} | |
} | |
if(alarmsec == 0){ | |
fill(237, 124, 33); | |
rect(f, g, 400, 100); | |
fill(255, 201, 53); | |
rect(f, g, 50, 100); | |
rect(f+80, g, 20, 100); | |
rect(f+130, g, 50, 100); | |
rect(f+200, g, 10, 100); | |
rect(f+240, g, 35, 100); | |
rect(f+290, g, 15, 100); | |
rect(f+325, g, 10, 100); | |
rect(f+350, g, 40, 100); | |
rect(f+350, g, 40, 100); | |
fill(255); | |
ellipse(f+15, g+25, 15, 15); | |
ellipse(f+15, g+70, 15, 15); | |
f = f + random(-6.95, 0.2); | |
if (f < -400){ | |
f = 850; | |
} | |
} | |
} | |
//Snakes when alarm goes off ends | |
//Ticking seoncd bars across numbers | |
function horiBar(x, y){ | |
//moving bit | |
fill(255, 250, 20); | |
rect(x, y, secondBarWidth2, 30); | |
//color bit | |
fill(255, 0, 0, 90); | |
rect(x, y, 130, 30); | |
} | |
function vertBar(a, b, z, v){ | |
//moving bit | |
fill(255, 250, 20); | |
rect(a, b, z, secondBarHeight); | |
//color bit | |
fill(255, 0, 0, 90); | |
rect(a, b, z, v); | |
} | |
function halfvertBar(a, b, z, v){ | |
//moving bit | |
fill(255, 250, 20); | |
rect(a, b, z, secondBarHeighthalf); | |
//color bit | |
fill(255, 0, 0, 90); | |
rect(a, b, z, v); | |
} | |
function weirdShape(x, y){ | |
horiBar(x,y); | |
horiBar(x, y + 60); | |
horiBar(x, y + 80); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const CANVAS_WIDTH = 1000; | |
const CANVAS_HEIGHT = 500; | |
function setup () { | |
// create the drawing canvas, save the canvas element | |
var main_canvas = createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT); | |
main_canvas.parent('canvasContainer'); | |
// you can optionally add your own code here if you also have setup code | |
} | |
// Update this function to draw you own maeda clock | |
function draw () { | |
background(0); // light gray background | |
//strokeWeight(8); // Stroke weight to 8 pixels | |
//ellipse(480, 250, 190, 190); | |
// The rectangle draws on top of the ellipse | |
// because it comes after in the code | |
//rect(500, 280, 260, 20); | |
noStroke(); | |
fill(255); | |
//Number 4 | |
rect (180, 155, 40, 40); | |
rect (140, 195, 40, 40); | |
rect (100, 235, 40, 80); | |
rect (140, 275, 160, 40); | |
rect (220, 115, 40, 280); | |
//Number 1 | |
rect (500, 60, 60, 380); | |
rect (440, 120, 60, 60); | |
//Number 0 | |
rect (620, 120, 60, 260); | |
rect (860, 120, 60, 260); | |
rect (680, 60, 180, 60); | |
rect (680, 380, 180, 60); | |
//stroke(0); | |
fill(0); | |
//Number 4 | |
rect (185, 160, 35, 30); | |
rect (145, 200, 30, 30); | |
rect (105, 240, 30, 70); | |
rect (135, 280, 160, 30); | |
rect (225, 120, 30, 270); | |
//Number 1 | |
rect (510, 70, 40, 360); | |
rect (450, 130, 50, 40); | |
//Number 0 | |
rect (630, 130, 40, 240); | |
rect (870, 130, 40, 240); | |
rect (690, 70, 160, 40); | |
rect (690, 390, 160, 40); | |
} | |
// do not alter or remove this function | |
function keyTyped() { | |
if (key == '!') { | |
saveBlocksImages(); | |
} | |
else if (key == '@') { | |
saveBlocksImages(true); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* us p5.js to draw a clock on a 960x500 canvas | |
*/ | |
function draw_clock(obj) { | |
// draw your own clock here based on the values of obj: | |
// obj.hours goes from 0-23 | |
// obj.minutes goes from 0-59 | |
// obj.seconds goes from 0-59 | |
// obj.millis goes from 0-1000 | |
// obj.seconds_until_alarm is: | |
// < 0 if no alarm is set | |
// = 0 if the alarm is currently going off | |
// > 0 --> the number of seconds until alarm should go off | |
let hours = obj.hours; | |
let minutes = obj.minutes; | |
let seconds = obj.seconds; | |
let millis = obj.millis; | |
background(204); | |
background(255,255,200); // beige | |
fill(128,100,100); // dark grey | |
text("Hour: " + hours, 10, 22); | |
text("Minute: " + minutes, 10, 42); | |
text("Second: " + seconds, 10, 62); | |
text("Millis: " + millis, 10, 82); | |
let hourBarWidth = map(hours, 0, 23, 0, width); | |
let minuteBarWidth = map(minutes, 0, 59, 0, width); | |
let secondBarWidth = map(seconds, 0, 59, 0, width); | |
let millisBarWidth = map(millis, 0, 1000, 0, width); | |
noStroke(); | |
fill(40); | |
rect(0, 100, hourBarWidth, 50); | |
fill(80); | |
rect(0, 150, minuteBarWidth, 50); | |
fill(120) | |
rect(0, 200, secondBarWidth, 50); | |
fill(160) | |
rect(0, 250, millisBarWidth, 50); | |
// Make a bar which *smoothly* interpolates across 1 minute. | |
// We calculate a version that goes from 0...60, | |
// but with a fractional remainder: | |
let secondBarWidthChunky = map(seconds, 0, 60, 0, width); | |
let secondsWithFraction = seconds + (millis / 1000.0); | |
let secondBarWidthSmooth = map(secondsWithFraction, 0, 60, 0, width); | |
fill(100, 100, 200) | |
rect(0, 350, secondBarWidthChunky, 50); | |
fill(120, 120, 240) | |
rect(0, 400, secondBarWidthSmooth, 50); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* us p5.js to draw a clock on a 960x500 canvas | |
*/ | |
let secondBarWidth2 = 0; | |
let secondBarHeight = 0; | |
let a, b; | |
let c, v; | |
let shake = 0; | |
//function setup(){ | |
// a = width / 2; | |
// b = height; | |
//} | |
a = 850; | |
b = 120; | |
c = 850; | |
v = 120; | |
d = 850; | |
s = 120; | |
n = 850; | |
z = 120; | |
q = 850; | |
w = 120; | |
e = 850; | |
r = 120; | |
t = 850; | |
y = 120; | |
f = 850; | |
g = 120; | |
function draw_clock(obj) { | |
createCanvas(950, 500); | |
// draw your own clock here based on the values of obj: | |
// obj.hours goes from 0-23 | |
// obj.minutes goes from 0-59 | |
// obj.seconds goes from 0-59 | |
// obj.millis goes from 0-1000 | |
// obj.seconds_until_alarm is: | |
// < 0 if no alarm is set | |
// = 0 if the alarm is currently going off | |
// > 0 --> the number of seconds until alarm should go off | |
var x = 30; | |
var y = 30; | |
// let hours = obj.hours; | |
// hourBarWidth = map(hours, 0, 23, 0, width); | |
//let seconds = obj.seconds; | |
let hours = obj.hours; | |
let minutes = obj.minutes; | |
let seconds = obj.seconds; | |
let second = obj.second; | |
let alarmsec = obj.seconds_until_alarm | |
//let hourBarWidth = map(hours, 0, 23, 0, width); | |
//let minuteBarWidth = map(minutes, 0, 59, 0, width); | |
secondBarHeight = map(hours, 0, 59, height/2.2, 10); | |
secondBarHeighthalf = map(hours, 0, 59, height/4, 5); | |
secondBarHeight = map(minutes, 0, 59, height/2.2, 10); | |
secondBarHeighthalf = map(minutes, 0, 59, height/4, 5); | |
secondBarHeight = map(seconds, 0, 59, height/2.2, 10); | |
secondBarHeighthalf = map(seconds, 0, 59, height/4, 5); | |
secondBarWidth = map(alarmsec, 0, 20, 0, 800); | |
secondBarWidth2 = map(hours, 0, 59, 0, 130); | |
secondBarWidth2 = map(minutes, 0, 59, 0, 130); | |
secondBarWidth2 = map(seconds, 0, 59, 0, 130); | |
//let secondBarWidth3 = map(seconds, 0, 59, 0, 130); | |
background(255); | |
translate(random (-shake, shake), random (-shake, shake)) | |
shake = shake * -0.2; | |
if (alarmsec == 0) { | |
shake = 6; | |
} | |
fill(255, 170, 73); | |
// if(seconds > 10){ | |
// weirdShape(800, 400); | |
// } if(seconds == 1){ | |
// weirdShape(700, 400); | |
// } | |
// if(seconds > 10){ | |
// vertBar(150, 50, 30, 230); | |
// } | |
//if(hours = 0){ | |
// hours > 10; | |
//} | |
//minutes = minutes + 1; | |
//if(minutes > 30){ | |
// minutes = minutes + 1; | |
// if(minutes < 0) | |
// minutes = 0; | |
//}//else{ | |
// minutes < 0; | |
//minutes = minutes + 1; | |
//} | |
// if(minutes > 30){ | |
// minutes = minutes+1; | |
// }else if(minutes < 0){ | |
// minutes = 0; | |
// } | |
//else if (a > 100) { | |
//fill(0); | |
//ellipse(250, 250, 100 ,100); | |
//} | |
// if(seconds > 1){ | |
// //draw 1 in the first number slot | |
// vertBar(50, 50, 30, 230); | |
// } | |
if(hours == 1){ | |
//draw 1 in the second slot | |
vertBar(300, 50, 30, 230); | |
}else if(hours == 2){ | |
//draw 2 in the second slot | |
halfvertBar(350, 50, 30, 130); | |
halfvertBar(250, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 3){ | |
//draw 3 in the second slot | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 4){ | |
//draw 4 in the second slot | |
vertBar(350, 50, 30, 230); | |
halfvertBar(250, 50, 30, 130); | |
horiBar(250, 150); | |
}else if(hours == 5){ | |
//draw 5 in the second slot | |
halfvertBar(250, 50, 30, 130); | |
halfvertBar(350, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 6){ | |
//draw 6 in the second slot | |
vertBar(250, 50, 30, 230); | |
halfvertBar(350, 150, 30, 130); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 7){ | |
//draw 7 in the second slot | |
horiBar(250, 50); | |
vertBar(350, 50, 30, 230); | |
}else if(hours == 8){ | |
//draw 8 in the second slot | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 9){ | |
//draw 9 in the second slot | |
halfvertBar(250, 50, 30, 130); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
}else if(hours == 10){ | |
//draw 10 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 250); | |
}else if(hours == 11){ | |
//draw 11 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(250, 50, 30, 230); | |
}else if(hours == 12){ | |
//draw 12 in the second slot | |
vertBar(150, 50, 30, 230); | |
halfvertBar(350, 50, 30, 130); | |
halfvertBar(250, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 13){ | |
//draw 13 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 14){ | |
//draw 14 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
halfvertBar(250, 50, 30, 130); | |
horiBar(250, 150); | |
}else if(hours == 15){ | |
//draw 15 in the second slot | |
vertBar(150, 50, 30, 230); | |
halfvertBar(250, 50, 30, 130); | |
halfvertBar(350, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 16){ | |
//draw 16 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(250, 50, 30, 230); | |
halfvertBar(350, 150, 30, 130); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 17){ | |
//draw 17 in the second slot | |
vertBar(150, 50, 30, 230); | |
horiBar(250, 50); | |
vertBar(350, 50, 30, 230); | |
}else if(hours == 18){ | |
//draw 18 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 19){ | |
//draw 19 in the second slot | |
vertBar(150, 50, 30, 230); | |
halfvertBar(250, 50, 30, 130); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
}else if(hours == 20){ | |
//draw 20 in the second slot | |
halfvertBar(150, 50, 30, 130); | |
halfvertBar(50, 150, 30, 130); | |
horiBar(50, 50); | |
horiBar(50, 150); | |
horiBar(50, 250); | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 250); | |
}else if(hours == 21){ | |
//draw 21 in the second slot | |
halfvertBar(150, 50, 30, 130); | |
halfvertBar(50, 150, 30, 130); | |
horiBar(50, 50); | |
horiBar(50, 150); | |
horiBar(50, 250); | |
vertBar(250, 50, 30, 230); | |
}else if(hours == 22){ | |
//draw 22 in the second slot | |
halfvertBar(150, 50, 30, 130); | |
halfvertBar(50, 150, 30, 130); | |
horiBar(50, 50); | |
horiBar(50, 150); | |
horiBar(50, 250); | |
halfvertBar(350, 50, 30, 130); | |
halfvertBar(250, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 23){ | |
//draw 23 in the second slot | |
halfvertBar(150, 50, 30, 130); | |
halfvertBar(50, 150, 30, 130); | |
horiBar(50, 50); | |
horiBar(50, 150); | |
horiBar(50, 250); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 0){ | |
//draw 0 in the second slot | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 250); | |
vertBar(50, 50, 30, 230); | |
vertBar(150, 50, 30, 230); | |
horiBar(50, 50); | |
horiBar(50, 250); | |
} | |
if(minutes == 1){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 1 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 2){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 2 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 3){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 3 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 4){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 4 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 5){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 5 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 6){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 6 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 7){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 7 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 8){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 8 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 9){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 9 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 10){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 10 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 11){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 11 in the last slot | |
vertBar(650, 50, 30, 230); | |
}else if(minutes == 12){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 12 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 13){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 13 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 14){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 14 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 15){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 15 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 16){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 16 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 17){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 17 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 18){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 18 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 19){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 19 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 20){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 20 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 21){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 21 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 22){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 22 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 23){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 23 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 24){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 24 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 25){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 25 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 26){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 26 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 27){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 27 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 28){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 28 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 29){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 29 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 30){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 30 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 31){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 31 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 32){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 32 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 33){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 33 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 34){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 34 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 35){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 35 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 36){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 36 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 37){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 37 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 38){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 38 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 39){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 39 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 40){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 40 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 41){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 41 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 42){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 42 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 43){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 43 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 44){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 44 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 45){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 45 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 46){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 46 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 47){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 47 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 48){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 48 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 49){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 49 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 50){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 50 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 51){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 51 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 52){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 52 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 53){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 53 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 54){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 54 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 55){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 55 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 56){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 56 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 57){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 57 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 58){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 58 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 59){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 59 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 0){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 60 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
} | |
//if(seconds){ | |
// seconds = seconds + 1; | |
// if(seconds > 9) | |
// seconds = 1; | |
//} | |
noStroke(); | |
//fill(239, 239, 239); | |
//digit 1 | |
//rect(50, 50, 30, secondBarWidth); | |
//fill(0, 0, 0, 80); | |
//rect(50, 50, 30, 230); | |
// rect(50, 100, 30, 30); | |
// rect(50, 150, 30, 30); | |
// rect(50, 200, 30, 30); | |
// rect(50, 250, 30, 30); | |
//digit 2 first row across | |
// horiBar(250,50); | |
/*TESTING FUNCTION SO COMMENTED OUT | |
fill(255, 222, 222, 80); | |
rect(120, 50, secondBarWidth2, 30); | |
fill(255, 0, 0, 50); | |
rect(120, 50, 130, 30); | |
// rect(170, 50, 30, 30); | |
*/ | |
//Digit 2 first row going down | |
//fill(255, 222, 222); | |
//rect(350, 50, 30, secondBarWidth3); | |
//rect(350, 50, 30, 130); | |
//rect(150, 50, 30, 230); | |
//rect(220, 150, 30, 30); | |
//Digit 2 second row going across | |
//horiBar(250, 150); | |
//rect(120, 150, 30, 30); | |
//rect(120, 200, 30, 30); | |
//digit 2 second row going down | |
//fill(255, 222, 222, 80); | |
//rect(250, 150, 30, secondBarWidth3); | |
//fill(255, 0, 0, 50); | |
//rect(250, 150, 30, 130); | |
//rect(120, 250, 30, 30); | |
//rect(120, 250, 30, 30); | |
// fill(255, 222, 222, 80); | |
// rect(120, 250, secondBarWidth2, 30); | |
// fill(255, 0, 0, 50); | |
// rect(120, 250, 130, 30); | |
// //rect(170, 250, 30, 30); | |
// //rect(220, 250, 30, 30); | |
// vertBar(50, 50, 30, 230); | |
// vertBar(150, 50, 30, 230); | |
// vertBar(250, 50, 30, 230); | |
// vertBar(350, 50, 30, 230); | |
//vertBar(450, 50, 30, 230); | |
//vertBar(550, 50, 30, 230); | |
//vertBar(600, 50, 30, 230); | |
//vertBar(700, 50, 30, 230); | |
// halfvertBar(50, 50, 30, 130); | |
//halfvertBar(150, 50, 30, 130); | |
//halfvertBar(50, 150, 30, 130); | |
// halfvertBar(150, 150, 30, 130); | |
// halfvertBar(250, 50, 30, 130); | |
// halfvertBar(350, 50, 30, 130); | |
// halfvertBar(250, 150, 30, 130); | |
// halfvertBar(350, 150, 30, 130); | |
// halfvertBar(430, 50, 30, 130); | |
// halfvertBar(530, 50, 30, 130); | |
// halfvertBar(430, 150, 30, 130); | |
// halfvertBar(530, 150, 30, 130); | |
// halfvertBar(600, 50, 30, 130); | |
// halfvertBar(700, 50, 30, 130); | |
// halfvertBar(600, 150, 30, 130); | |
// halfvertBar(700, 150, 30, 130); | |
// halfvertBar(250, 50, 30, 230); | |
// halfvertBar(350, 50, 30, 230); | |
// halfvertBar(430, 50, 30, 230); | |
// halfvertBar(530, 50, 30, 230); | |
// halfvertBar(600, 50, 30, 230); | |
// halfvertBar(700, 50, 30, 230); | |
//horiBar(50, 50); | |
// horiBar(50, 150); | |
//horiBar(50, 250); | |
// horiBar(250, 50); | |
// horiBar(250, 150); | |
// horiBar(250, 250); | |
//horiBar(450, 50); | |
// horiBar(430, 150); | |
//horiBar(450, 250); | |
// horiBar(600, 50); | |
// horiBar(600, 150); | |
// horiBar(600, 250); | |
//function mousePressed(){ | |
if(alarmsec > 0){ | |
fill(85, 140, 85); | |
rect(a, b, 400, 100); | |
fill(0); | |
fill(255, 225, 79); | |
rect(a, b, 50, 100); | |
rect(a+80, b, 20, 100); | |
rect(a+130, b, 50, 100); | |
rect(a+200, b, 10, 100); | |
rect(a+240, b, 35, 100); | |
rect(a+290, b, 15, 100); | |
rect(a+325, b, 10, 100); | |
rect(a+350, b, 40, 100); | |
fill(255); | |
ellipse(a+15, b+25, 15, 15); | |
ellipse(a+15, b+70, 15, 15); | |
a = a + random(-5.8, 0.2); | |
if (a < -400){ | |
a = 850; | |
} | |
} | |
//else if(alarmsec > 20){ | |
// fill(0); | |
// ellipse(250, 250, 50, 50); | |
// | |
// } | |
// fill(255, 227, 73); | |
// rect(a-20, b+150, 300, 100); | |
// fill(255, 202, 89); | |
// rect(a-20, b+150, 50, 80); | |
// rect(a+10, b+150, 40, 80); | |
// rect(a+35, b+150, 45, 80); | |
// rect(a+60, b+150, 40, 80); | |
// rect(a+85, b+150, 40, 80); | |
// fill(255); | |
// ellipse(a-10, b+165, 15, 15); | |
// ellipse(a-10, b+185, 15, 15); | |
//hor | |
if(alarmsec > 0){ | |
fill(255, 227, 73); | |
rect(c+100, v-120, 400, 80); | |
fill(255, 202, 89); | |
rect(c+100, v-120, 50, 80); | |
rect(c+180, v-120, 20, 80); | |
rect(c+230, v-120, 50, 80); | |
rect(c+300, v-120, 10, 80); | |
rect(c+340, v-120, 35, 80); | |
rect(c+390, v-120, 15, 80); | |
rect(c+255, v-120, 10, 80); | |
rect(c+450, v-120, 40, 80); | |
fill(255); | |
ellipse(c+115, v-100, 15, 15); | |
ellipse(c+115, v-60, 15, 15); | |
c = c + random(-6.95, 0.5); | |
if(c < -450) { | |
c = 850; | |
} | |
} | |
if(alarmsec > 0){ | |
fill(165, 30, 0); | |
rect(d+220, s+300, 400, 80); | |
fill(255, 199, 0); | |
rect(d+220, s+300, 50, 80); | |
rect(d+300, s+300, 20, 80); | |
rect(d+350, s+300, 50, 80); | |
rect(d+420, s+300, 10, 80); | |
rect(d+460, s+300, 35, 80); | |
rect(d+510, s+300, 15, 80); | |
rect(d+375, s+300, 10, 80); | |
rect(d+570, s+300, 40, 80); | |
fill(255); | |
ellipse(d+235, s+320, 15, 15); | |
ellipse(d+235, s+360, 15, 15); | |
d = d + random(12, 0.5); | |
if(d < -600) { | |
d = 900; | |
} | |
} | |
if(alarmsec > 0){ | |
fill(255, 255, 0); | |
rect(n+250, z+150, 400, 105); | |
fill(195, 220, 145); | |
rect(n+250, z+150, 50, 105); | |
rect(n+330, z+150, 20, 105); | |
rect(n+380, z+150, 50, 105); | |
rect(n+430, z+150, 10, 105); | |
rect(n+490, z+150, 35, 105); | |
rect(n+540, z+150, 15, 105); | |
rect(n+405, z+150, 10, 105); | |
rect(n+600, z+150, 40, 105); | |
fill(255); | |
ellipse(n+265, z+175, 15, 15); | |
ellipse(n+265, z+225, 15, 15); | |
n = n + random(-8, 0.5); | |
if(n < -600) { | |
n = 900; | |
} | |
} | |
if(alarmsec == 0){ | |
fill(255, 255, 0); | |
rect(q+250, w+150, 400, 105); | |
fill(195, 220, 145); | |
rect(q+250, w+150, 50, 105); | |
rect(q+330, w+150, 20, 105); | |
rect(q+380, w+150, 50, 105); | |
rect(q+430, w+150, 10, 105); | |
rect(q+490, w+150, 35, 105); | |
rect(q+540, w+150, 15, 105); | |
rect(q+405, w+150, 10, 105); | |
rect(q+600, w+150, 40, 105); | |
fill(255); | |
ellipse(q+265, w+175, 15, 15); | |
ellipse(q+265, w+225, 15, 15); | |
q = q + random(-8, 0.1); | |
if(q < -600) { | |
q = 900; | |
} | |
} | |
// if(alarmsec == 0){ | |
// fill(165, 30, 0); | |
// rect(e+220, r+300, 400, 80); | |
// fill(255, 199, 0); | |
// rect(e+220, r+300, 50, 80); | |
// rect(e+300, r+300, 20, 80); | |
// //rect(e+350, r+300, 50, 80); | |
// rect(e+420, r+300, 10, 80); | |
// rect(e+460, r+300, 35, 80); | |
// rect(e+510, r+300, 15, 80); | |
// rect(e+375, r+300, 10, 80); | |
// rect(e+570, r+300, 40, 80); | |
// fill(255); | |
// ellipse(e+235, r+320, 15, 15); | |
// ellipse(e+235, r+360, 15, 15); | |
// e = e + random(-8, 0.1); | |
// if(e < -600) { | |
// e = 900; | |
// } | |
// } | |
if(alarmsec == 0){ | |
fill(255, 227, 73); | |
rect(t+100, y, 400, 80); | |
fill(255, 202, 89); | |
rect(t+100, y, 50, 80); | |
rect(t+180, y, 20, 80); | |
rect(t+230, y, 50, 80); | |
rect(t+300, y, 10, 80); | |
rect(t+340, y, 35, 80); | |
rect(t+390, y, 15, 80); | |
rect(t+255, y, 10, 80); | |
rect(t+450, y, 40, 80); | |
fill(255); | |
ellipse(t+115, y+20, 15, 15); | |
ellipse(t+115, y+60, 15, 15); | |
t = t + random(-7.85, 0.5); | |
if(t < -450) { | |
t = 850; | |
} | |
} | |
if(alarmsec == 0){ | |
fill(85, 140, 85); | |
rect(f, g+20, 400, 100); | |
fill(0); | |
fill(255, 225, 79); | |
rect(f, g+20, 50, 100); | |
rect(f+80, g+20, 20, 100); | |
rect(f+130, g+20, 50, 100); | |
rect(f+200, g+20, 10, 100); | |
rect(f+240, g+20, 35, 100); | |
rect(f+290, g+20, 15, 100); | |
rect(f+325, g+20, 10, 100); | |
rect(f+350, g+20, 40, 100); | |
fill(255); | |
ellipse(f+15, g+45, 15, 15); | |
ellipse(f+15, g+90, 15, 15); | |
f = f + random(-6.95, 0.2); | |
if (f < -400){ | |
f = 850; | |
} | |
} | |
// if (alarmsec == 0) { | |
// //vert | |
// fill(255, 207, 86); | |
// rect(q-50, w-50, 40, 120); | |
// fill(255, 229, 86); | |
// rect(q+30, w-120, 40, 120); | |
// fill(255, 133, 63); | |
// rect(q+110, w-200, 40, 120); | |
// fill(255, 207, 86); | |
// rect(q+200, w-80, 40, 120); | |
// fill(255, 229, 86); | |
// rect(q+300, w-160, 40, 120); | |
// fill(255, 133, 63); | |
// rect(q+380, w-290, 40, 120); | |
// fill(255, 207, 86); | |
// rect(q+460, w-70, 40, 120); | |
// fill(255, 133, 63); | |
// rect(q+540, w-260, 40, 120); | |
// fill(255, 229, 86); | |
// rect(q+630, w-100, 40, 120); | |
// fill(255, 207, 86); | |
// rect(q+710, w-230, 40, 120); | |
// w = w - random(-1,10); | |
// | |
// if (w < -300){ | |
// w = 700; | |
// } | |
// } | |
// | |
// if(alarmsec == 0){ | |
// fill(255, 124, 17); | |
// rect(e-50, r-100, 150, 50); | |
// fill(255, 142, 102); | |
// rect(e-150, r, 150, 50); | |
// fill(255, 124, 17); | |
// rect(e-210, r+190, 150, 50); | |
// fill(255, 163, 147); | |
// rect(e, r+100, 150, 50); | |
// e = e + random(-6.95, -5); | |
// | |
// if (e < -400){ | |
// e = 850; | |
// } | |
//} | |
//fill(0); | |
// rect(e-50, r-100, 150, 50); | |
// rect(e-150, r, 150, 50); | |
// rect(e-210, r+190, 150, 50); | |
// rect(e, r+100, 150, 50); | |
//vert | |
// fill(255, 170, 73); | |
// if(alarmsec > 0){ | |
// rect(d+400, s-40, 100, 50); | |
// rect(d+490, s+100, 50, 120); | |
// rect(d+300, s+50, 30, 110); | |
// rect(d+500, s, 60, 100); | |
// rect(d+600, s-40, 50, 100); | |
// rect(d, s-20, 70, 200); | |
// rect(d+150, s-50, 40, 130); | |
// rect(d+200, s-100, 40, 80); | |
// rect(d+300, s-90, 40, 130); | |
// rect(d+400, s-50, 40, 130); | |
// rect(d+200, s-60, 45, 85); | |
// s = s - random(-1,10); | |
// if (s < -300){ | |
// s = 700; | |
// } | |
// } | |
//} | |
//fill(239, 239, 239); | |
//rect(430, 50, 30, secondBarWidth); | |
//fill(0, 0, 0, 80); | |
//rect(430, 50, 30, 230); | |
// rect(430, 100, 30, 30); | |
// rect(430, 150, 30, 30); | |
// rect(430, 200, 30, 30); | |
// rect(430, 250, 30, 30); | |
//horiBar(430, 50); | |
//fill(239, 239, 239); | |
//rect(530, 50, 30, secondBarWidth); | |
//fill(0, 0, 0, 80); | |
//rect(530, 50, 30, 230); | |
// rect(530, 100, 30, 30); | |
// rect(530, 150, 30, 30); | |
// rect(530, 200, 30, 30); | |
//fill(239, 239, 239); | |
//rect(430, 250, secondBarWidth2, 30); | |
//fill(0, 0, 0, 80); | |
//horiBar(430, 250); | |
// fill(239, 239, 239); | |
// rect(430, 250, secondBarWidth2, 30); | |
// fill(0, 0, 0, 80); | |
// rect(430, 250, 130, 30); | |
// // rect(530, 250, 30, 30); | |
// // rect(480, 250, 30, 30); | |
//fill(255, 222, 222, 80); | |
// horiBar(600, 250); | |
// rect(700, 50, 30, secondBarWidth); | |
// fill(255, 0, 0, 50); | |
//rect(700, 50, 30, 30); | |
//rect(600, 250, 130, 30); | |
// rect(700, 150, 30, 30); | |
// rect(700, 200, 30, 30); | |
// rect(700, 250, 30, 30); | |
//fill(255, 222, 222, 80); | |
// horiBar(600, 50); | |
// rect(600, 50, secondBarWidth2, 30); | |
// fill(255, 0, 0, 50); | |
//rect(600, 50, 130, 30); | |
//rect(700, 250, 30, 30); | |
//fill(255, 222, 222, 80); | |
//rect(600, 50, 30, secondBarWidth); | |
//fill(255, 0, 0, 50); | |
//rect(600, 50, 30, 230); | |
//rect(600, 100, 30, 30); | |
//fill(255, 222, 222, 80); | |
// horiBar(600, 150); | |
// rect(600, 150, secondBarWidth2, 30); | |
// fill(255, 0, 0, 50); | |
//rect(600, 150, 130, 30); | |
//rect(600, 200, 30, 30); | |
//fill(255, 222, 222, 80); | |
//rect(600, 250, secondBarWidth2, 30); | |
//fill(255, 0, 0, 50); | |
//rect(700, 50, 30, 230); | |
// rect(650, 250, 30, 30); | |
// rect(650, 150, 30, 30); | |
} | |
function horiBar(x, y){ | |
//moving bit | |
fill(255, 250, 20); | |
rect(x, y, secondBarWidth2, 30); | |
//color bit | |
fill(255, 0, 0, 90); | |
rect(x, y, 130, 30); | |
} | |
function vertBar(a, b, z, v){ | |
//if (hours > 9){ | |
//moving bit | |
fill(255, 250, 20); | |
rect(a, b, z, secondBarHeight); | |
//color bit | |
fill(255, 0, 0, 90); | |
rect(a, b, z, v); | |
//} | |
} | |
function halfvertBar(a, b, z, v){ | |
//if (hours > 9){ | |
//moving bit | |
fill(255, 250, 20); | |
rect(a, b, z, secondBarHeighthalf); | |
//color bit | |
fill(255, 0, 0, 90); | |
rect(a, b, z, v); | |
//} | |
} | |
function weirdShape(x, y){ | |
horiBar(x,y); | |
horiBar(x, y + 60); | |
horiBar(x, y + 80); | |
} | |
//if(seconds){ | |
// seconds = seconds + 1; | |
// if(seconds > 9) | |
// seconds = 1; | |
//} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script> | |
<script language="javascript" type="text/javascript" src="z_purview_helper.js"></script> | |
<script language="javascript" type="text/javascript" src="debug.js"></script> | |
<script language="javascript" type="text/javascript" src="clock.js"></script> | |
<script language="javascript" type="text/javascript" src="runner.js"></script> | |
</head> | |
<body style="background-color:white"> | |
<div class="outer"> | |
<div class="inner"> | |
<div id="canvasContainer"></div> | |
</div> | |
<div class="inner" id="controls"> | |
<table> | |
<tr> | |
<td>debug</td> | |
<td id="checkboxDebug"></td> | |
</tr> | |
<tr> | |
<td>hours</td> | |
<td id="sliderHours"></td> | |
<td>minutes</td> | |
<td id="sliderMinutes"></td> | |
<td>seconds</td> | |
<td id="sliderSeconds"></td> | |
<td>millis</td> | |
<td id="sliderMillis"></td> | |
</tr> | |
<tr> | |
<td>alarm</td> | |
<td id="checkboxAlarm"></td> | |
<td>alarm_secs</td> | |
<td id="sliderAlarm"></td> | |
</tr> | |
</table> | |
</div> | |
</div> | |
</table> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var DEBUG=true; | |
var debugCheckbox; | |
var hourSlider; | |
var minSlider; | |
var secSlider; | |
var millisSlider; | |
var alarmSlider; | |
function debug_setup() { | |
debugCheckbox = createCheckbox('', false); | |
debugCheckbox.parent("checkboxDebug") | |
hourSlider = createSlider(0, 23, 12); | |
hourSlider.parent("sliderHours") | |
minSlider = createSlider(0, 59, 0); | |
minSlider.parent("sliderMinutes") | |
secSlider = createSlider(0, 59, 0); | |
secSlider.parent("sliderSeconds") | |
millisSlider = createSlider(0, 999, 0); | |
millisSlider.parent("sliderMillis") | |
alarmCheckbox = createCheckbox('', false); | |
alarmCheckbox.parent("checkboxAlarm") | |
alarmSlider = createSlider(0, 60, 0); | |
alarmSlider.parent("sliderAlarm") | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script> | |
<script language="javascript" type="text/javascript" src="z_purview_helper.js"></script> | |
<script language="javascript" type="text/javascript" src="clock.js"></script> | |
<script language="javascript" type="text/javascript" src="runner.js"></script> | |
</head> | |
<body style="background-color:white"> | |
<!-- <img src="preview.jpg" width="960" height="500"/> --> | |
<div class="outer"> | |
<div class="inner"> | |
<div id="canvasContainer"></div> | |
</div> | |
</div> | |
</table> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
<style> body {padding: 0; margin: 0;} </style> | |
</head> | |
<body style="background-color:white"> | |
<img src="preview.jpg" width="960" height="500"/> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script> | |
<script language="javascript" type="text/javascript" src="z_purview_helper.js"></script> | |
<script language="javascript" type="text/javascript" src="clock1.js"></script> | |
</head> | |
<body style="background-color:white"> | |
<div class="outer"> | |
<div class="inner"> | |
<div id="canvasContainer"></div> | |
</div> | |
</div> | |
</table> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"commits": [ | |
{ | |
"sha": "d60685fd9d967a31af41ade1f52a29fa588f3d0d", | |
"name": "final" | |
}, | |
{ | |
"sha": "cf593626096bc696b48b07d386e53e7dd9874473", | |
"name": "clock_alarm" | |
}, | |
{ | |
"sha": "51c30339ba3e88005141e4c3b38083e05c8b0b0d", | |
"name": "original_clock" | |
}, | |
{ | |
"sha": "5e72f5de7b3f6c5688203d90964f159246ae382d", | |
"name": "maeda_clock" | |
}, | |
{ | |
"sha": "e46d1502ca0d6e5b6d255c311b7b2c18a11b4683", | |
"name": "sketch" | |
} | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var canvasWidth = 960; | |
var canvasHeight = 500; | |
var prevSec; | |
var millisRolloverTime; | |
var nextAlarm; | |
var debug_is_on = (typeof DEBUG !== 'undefined'); | |
function setup () { | |
// create the drawing canvas, save the canvas element | |
var main_canvas = createCanvas(canvasWidth, canvasHeight); | |
main_canvas.parent('canvasContainer'); | |
// this is true if debug.js is included | |
if(debug_is_on) { | |
debug_setup(); | |
} | |
turn_off_alarm(); | |
} | |
function turn_on_alarm() { | |
nextAlarm = millis() + 20000; | |
print("Alarm on: T minus 20 seconds"); | |
} | |
function turn_off_alarm() { | |
nextAlarm = -1; | |
print("Alarm turned off"); | |
} | |
function mouseClicked() { | |
if (debug_is_on && debugCheckbox.checked()) { | |
return; | |
} | |
if (nextAlarm > 0) { | |
turn_off_alarm(); | |
} | |
else { | |
turn_on_alarm(); | |
} | |
} | |
// taking ideas from http://cmuems.com/2016/60212/deliverables/deliverables-02/ | |
function draw () { | |
var H, M, S, mils, alarm; | |
if (debug_is_on && debugCheckbox.checked()) { | |
hourSlider.removeAttribute('disabled'); | |
minSlider.removeAttribute('disabled'); | |
secSlider.removeAttribute('disabled'); | |
millisSlider.removeAttribute('disabled'); | |
alarmCheckbox.removeAttribute('disabled'); | |
alarmSlider.removeAttribute('disabled'); | |
H = hourSlider.value(); | |
M = minSlider.value(); | |
S = secSlider.value(); | |
mils = millisSlider.value(); | |
if (alarmCheckbox.checked()) { | |
alarm = alarmSlider.value(); | |
} | |
else { | |
alarm = -1; | |
} | |
} | |
else { | |
// Fetch the current time | |
H = hour(); | |
M = minute(); | |
S = second(); | |
if (nextAlarm > 0) { | |
now = millis(); | |
var millis_offset = nextAlarm - now; | |
if (millis_offset < -10000 ){ | |
// turn off alarm | |
nextAlarm = -1; | |
alarm = -1; | |
} | |
else if (millis_offset < 0) { | |
alarm = 0; | |
} | |
else { | |
alarm = millis_offset / 1000.0; | |
} | |
} | |
else { | |
alarm = -1; | |
} | |
// Reckon the current millisecond, | |
// particularly if the second has rolled over. | |
// Note that this is more correct than using millis()%1000; | |
if (prevSec != S) { | |
millisRolloverTime = millis(); | |
} | |
prevSec = S; | |
mils = floor(millis() - millisRolloverTime); | |
if (debug_is_on) { | |
hourSlider.attribute('disabled',''); | |
minSlider.attribute('disabled',''); | |
secSlider.attribute('disabled',''); | |
millisSlider.attribute('disabled',''); | |
alarmCheckbox.attribute('disabled',''); | |
alarmSlider.attribute('disabled',''); | |
hourSlider.value(H); | |
minSlider.value(M); | |
secSlider.value(S); | |
millisSlider.value(mils); | |
alarmCheckbox.checked(alarm >= 0); | |
alarmSlider.value(alarm); | |
} | |
} | |
obj = {}; | |
obj.hours = H; | |
obj.minutes = M; | |
obj.seconds = S; | |
obj.millis = mils; | |
obj.seconds_until_alarm = alarm; | |
draw_clock(obj); | |
} | |
function keyTyped() { | |
if (key == '!') { | |
saveBlocksImages(); | |
} | |
else if (key == '@') { | |
saveBlocksImages(true); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let secondBarWidth2 = 0; | |
let secondBarHeight = 0; | |
let a, b; | |
let c, v; | |
let shake = 0; | |
a = 850; | |
b = 120; | |
c = 850; | |
v = 120; | |
n = 850; | |
z = 120; | |
q = 850; | |
w = 120; | |
t = 850; | |
y = 120; | |
f = 850; | |
g = 120; | |
function draw_clock(obj) { | |
createCanvas(950, 500); | |
let hours = obj.hours; | |
let minutes = obj.minutes; | |
let seconds = obj.seconds; | |
let second = obj.second; | |
let alarmsec = obj.seconds_until_alarm | |
secondBarHeight = map(hours, 0, 59, height/2.2, 10); | |
secondBarHeighthalf = map(hours, 0, 59, height/4, 5); | |
secondBarHeight = map(minutes, 0, 59, height/2.2, 10); | |
secondBarHeighthalf = map(minutes, 0, 59, height/4, 5); | |
secondBarHeight = map(seconds, 0, 59, height/2.2, 10); | |
secondBarHeighthalf = map(seconds, 0, 59, height/4, 5); | |
secondBarWidth = map(alarmsec, 0, 20, 0, 800); | |
secondBarWidth2 = map(hours, 0, 59, 0, 130); | |
secondBarWidth2 = map(minutes, 0, 59, 0, 130); | |
secondBarWidth2 = map(seconds, 0, 59, 0, 130); | |
background(255); | |
//Alarm goes off shake | |
translate(random (-shake, shake), random (-shake, shake)) | |
shake = shake * -0.2; | |
if (alarmsec == 0) { | |
shake = 6; | |
} | |
//Alarm goes off shake end | |
fill(255, 170, 73); | |
//First and second slot | |
if(hours == 1){ | |
//draw 1 in the second slot | |
vertBar(300, 50, 30, 230); | |
}else if(hours == 2){ | |
//draw 2 in the second slot | |
halfvertBar(350, 50, 30, 130); | |
halfvertBar(250, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 3){ | |
//draw 3 in the second slot | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 4){ | |
//draw 4 in the second slot | |
vertBar(350, 50, 30, 230); | |
halfvertBar(250, 50, 30, 130); | |
horiBar(250, 150); | |
}else if(hours == 5){ | |
//draw 5 in the second slot | |
halfvertBar(250, 50, 30, 130); | |
halfvertBar(350, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 6){ | |
//draw 6 in the second slot | |
vertBar(250, 50, 30, 230); | |
halfvertBar(350, 150, 30, 130); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 7){ | |
//draw 7 in the second slot | |
horiBar(250, 50); | |
vertBar(350, 50, 30, 230); | |
}else if(hours == 8){ | |
//draw 8 in the second slot | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 9){ | |
//draw 9 in the second slot | |
halfvertBar(250, 50, 30, 130); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
}else if(hours == 10){ | |
//draw 10 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 250); | |
}else if(hours == 11){ | |
//draw 11 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(250, 50, 30, 230); | |
}else if(hours == 12){ | |
//draw 12 in the second slot | |
vertBar(150, 50, 30, 230); | |
halfvertBar(350, 50, 30, 130); | |
halfvertBar(250, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 13){ | |
//draw 13 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 14){ | |
//draw 14 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
halfvertBar(250, 50, 30, 130); | |
horiBar(250, 150); | |
}else if(hours == 15){ | |
//draw 15 in the second slot | |
vertBar(150, 50, 30, 230); | |
halfvertBar(250, 50, 30, 130); | |
halfvertBar(350, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 16){ | |
//draw 16 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(250, 50, 30, 230); | |
halfvertBar(350, 150, 30, 130); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 17){ | |
//draw 17 in the second slot | |
vertBar(150, 50, 30, 230); | |
horiBar(250, 50); | |
vertBar(350, 50, 30, 230); | |
}else if(hours == 18){ | |
//draw 18 in the second slot | |
vertBar(150, 50, 30, 230); | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 19){ | |
//draw 19 in the second slot | |
vertBar(150, 50, 30, 230); | |
halfvertBar(250, 50, 30, 130); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
}else if(hours == 20){ | |
//draw 20 in the second slot | |
halfvertBar(150, 50, 30, 130); | |
halfvertBar(50, 150, 30, 130); | |
horiBar(50, 50); | |
horiBar(50, 150); | |
horiBar(50, 250); | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 250); | |
}else if(hours == 21){ | |
//draw 21 in the second slot | |
halfvertBar(150, 50, 30, 130); | |
halfvertBar(50, 150, 30, 130); | |
horiBar(50, 50); | |
horiBar(50, 150); | |
horiBar(50, 250); | |
vertBar(250, 50, 30, 230); | |
}else if(hours == 22){ | |
//draw 22 in the second slot | |
halfvertBar(150, 50, 30, 130); | |
halfvertBar(50, 150, 30, 130); | |
horiBar(50, 50); | |
horiBar(50, 150); | |
horiBar(50, 250); | |
halfvertBar(350, 50, 30, 130); | |
halfvertBar(250, 150, 30, 130); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 23){ | |
//draw 23 in the second slot | |
halfvertBar(150, 50, 30, 130); | |
halfvertBar(50, 150, 30, 130); | |
horiBar(50, 50); | |
horiBar(50, 150); | |
horiBar(50, 250); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 150); | |
horiBar(250, 250); | |
}else if(hours == 0){ | |
//draw 0 in the second slot | |
vertBar(250, 50, 30, 230); | |
vertBar(350, 50, 30, 230); | |
horiBar(250, 50); | |
horiBar(250, 250); | |
vertBar(50, 50, 30, 230); | |
vertBar(150, 50, 30, 230); | |
horiBar(50, 50); | |
horiBar(50, 250); | |
} | |
//Third and fourth slot | |
if(minutes == 1){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 1 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 2){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 2 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 3){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 3 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 4){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 4 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 5){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 5 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 6){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 6 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 7){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 7 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 8){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 8 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 9){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 9 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 10){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 10 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 11){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 11 in the last slot | |
vertBar(650, 50, 30, 230); | |
}else if(minutes == 12){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 12 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 13){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 13 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 14){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 14 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 15){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 15 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 16){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 16 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 17){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 17 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 18){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 18 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 19){ | |
//draw 0 in the third slot? | |
vertBar(500, 50, 30, 230); | |
//draw 19 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 20){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 20 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 21){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 21 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 22){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 22 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 23){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 23 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 24){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 24 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 25){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 25 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 26){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 26 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 27){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 27 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 28){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 28 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 29){ | |
//draw 0 in the third slot? | |
halfvertBar(550, 50, 30, 130); | |
halfvertBar(450, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 29 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 30){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 30 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 31){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 31 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 32){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 32 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 33){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 33 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 34){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 34 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 35){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 35 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 36){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 36 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 37){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 37 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 38){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 38 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 39){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 39 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 40){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 40 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 41){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 41 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 42){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 42 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 43){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 43 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 44){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 44 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 45){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 45 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 46){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 46 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 47){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 47 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 48){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 48 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 49){ | |
//draw 0 in the third slot? | |
vertBar(550, 50, 30, 230); | |
halfvertBar(450, 50, 30, 130); | |
horiBar(450, 150); | |
//draw 49 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 50){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 50 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
}else if(minutes == 51){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 51 in the last slot | |
vertBar(700, 50, 30, 230); | |
}else if(minutes == 52){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 52 in the last slot | |
halfvertBar(750, 50, 30, 130); | |
halfvertBar(650, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 53){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 53 in the last slot | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 54){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 54 in the last slot | |
vertBar(750, 50, 30, 230); | |
halfvertBar(650, 50, 30, 130); | |
horiBar(650, 150); | |
}else if(minutes == 55){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 55 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 56){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 56 in the last slot | |
vertBar(650, 50, 30, 230); | |
halfvertBar(750, 150, 30, 130); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 57){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 57 in the last slot | |
horiBar(650, 50); | |
vertBar(750, 50, 30, 230); | |
}else if(minutes == 58){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 58 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
horiBar(650, 250); | |
}else if(minutes == 59){ | |
//draw 0 in the third slot? | |
halfvertBar(450, 50, 30, 130); | |
halfvertBar(550, 150, 30, 130); | |
horiBar(450, 50); | |
horiBar(450, 150); | |
horiBar(450, 250); | |
//draw 59 in the last slot | |
halfvertBar(650, 50, 30, 130); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 150); | |
}else if(minutes == 0){ | |
//draw 0 in the third slot? | |
vertBar(450, 50, 30, 230); | |
vertBar(550, 50, 30, 230); | |
horiBar(450, 50); | |
horiBar(450, 250); | |
//draw 60 in the last slot | |
vertBar(650, 50, 30, 230); | |
vertBar(750, 50, 30, 230); | |
horiBar(650, 50); | |
horiBar(650, 250); | |
} | |
//End of numbers | |
noStroke(); | |
//Snakes when alarm set | |
if(alarmsec > 0){ | |
fill(255, 101, 45); | |
rect(a, b, 400, 100); | |
fill(0); | |
fill(255, 225, 79); | |
rect(a, b, 50, 100); | |
rect(a+80, b, 20, 100); | |
rect(a+130, b, 50, 100); | |
rect(a+200, b, 10, 100); | |
rect(a+240, b, 35, 100); | |
rect(a+290, b, 15, 100); | |
rect(a+325, b, 10, 100); | |
rect(a+350, b, 40, 100); | |
fill(255); | |
ellipse(a+15, b+25, 15, 15); | |
ellipse(a+15, b+70, 15, 15); | |
a = a + random(-5.8, 0.2); | |
if (a < -400){ | |
a = 850; | |
} | |
} | |
if(alarmsec > 0){ | |
fill(255, 82, 63); | |
rect(c+100, v-120, 400, 80); | |
fill(255, 202, 89); | |
rect(c+100, v-120, 50, 80); | |
rect(c+180, v-120, 20, 80); | |
rect(c+230, v-120, 50, 80); | |
rect(c+300, v-120, 10, 80); | |
rect(c+340, v-120, 35, 80); | |
rect(c+390, v-120, 15, 80); | |
rect(c+255, v-120, 10, 80); | |
rect(c+450, v-120, 40, 80); | |
fill(255); | |
ellipse(c+115, v-100, 15, 15); | |
ellipse(c+115, v-60, 15, 15); | |
c = c + random(-6.95, 0.5); | |
if(c < -450) { | |
c = 850; | |
} | |
} | |
if(alarmsec > 0){ | |
fill(255, 230, 107); | |
rect(n+250, z+150, 400, 105); | |
fill(255, 166, 66); | |
rect(n+250, z+150, 50, 105); | |
rect(n+330, z+150, 20, 105); | |
rect(n+380, z+150, 50, 105); | |
rect(n+430, z+150, 10, 105); | |
rect(n+490, z+150, 35, 105); | |
rect(n+540, z+150, 15, 105); | |
rect(n+405, z+150, 10, 105); | |
rect(n+600, z+150, 40, 105); | |
fill(255); | |
ellipse(n+265, z+175, 15, 15); | |
ellipse(n+265, z+225, 15, 15); | |
n = n + random(-8, 0.5); | |
if(n < -600) { | |
n = 900; | |
} | |
} | |
//snakes when alarm set ends | |
//Snakes when alarm goes off | |
if(alarmsec == 0){ | |
fill(221, 4, 4); | |
rect(q+250, w+150, 400, 105); | |
fill(255, 135, 66); | |
rect(q+250, w+150, 50, 105); | |
rect(q+330, w+150, 20, 105); | |
rect(q+380, w+150, 50, 105); | |
rect(q+430, w+150, 10, 105); | |
rect(q+490, w+150, 35, 105); | |
rect(q+540, w+150, 15, 105); | |
rect(q+405, w+150, 10, 105); | |
rect(q+600, w+150, 40, 105); | |
fill(255); | |
ellipse(q+265, w+175, 15, 15); | |
ellipse(q+265, w+225, 15, 15); | |
q = q + random(-8, 0.1); | |
if(q < -600) { | |
q = 900; | |
} | |
} | |
if(alarmsec == 0){ | |
fill(255, 105, 56); | |
rect(t+100, y-120, 400, 80); | |
fill(255, 190, 86); | |
rect(t+100, y-120, 50, 80); | |
rect(t+180, y-120, 20, 80); | |
rect(t+230, y-120, 50, 80); | |
rect(t+300, y-120, 10, 80); | |
rect(t+340, y-120, 35, 80); | |
rect(t+390, y-120, 15, 80); | |
rect(t+255, y-120, 10, 80); | |
rect(t+450, y-120, 40, 80); | |
fill(255); | |
ellipse(t+115, y-100, 15, 15); | |
ellipse(t+115, y-60, 15, 15); | |
t = t + random(-7.85, 0.5); | |
if(t < -450) { | |
t = 850; | |
} | |
} | |
if(alarmsec == 0){ | |
fill(237, 124, 33); | |
rect(f, g, 400, 100); | |
fill(255, 201, 53); | |
rect(f, g, 50, 100); | |
rect(f+80, g, 20, 100); | |
rect(f+130, g, 50, 100); | |
rect(f+200, g, 10, 100); | |
rect(f+240, g, 35, 100); | |
rect(f+290, g, 15, 100); | |
rect(f+325, g, 10, 100); | |
rect(f+350, g, 40, 100); | |
rect(f+350, g, 40, 100); | |
fill(255); | |
ellipse(f+15, g+25, 15, 15); | |
ellipse(f+15, g+70, 15, 15); | |
f = f + random(-6.95, 0.2); | |
if (f < -400){ | |
f = 850; | |
} | |
} | |
} | |
//Snakes when alarm goes off ends | |
//Ticking seoncd bars across numbers | |
function horiBar(x, y){ | |
//moving bit | |
fill(255, 250, 20); | |
rect(x, y, secondBarWidth2, 30); | |
//color bit | |
fill(255, 0, 0, 90); | |
rect(x, y, 130, 30); | |
} | |
function vertBar(a, b, z, v){ | |
//moving bit | |
fill(255, 250, 20); | |
rect(a, b, z, secondBarHeight); | |
//color bit | |
fill(255, 0, 0, 90); | |
rect(a, b, z, v); | |
} | |
function halfvertBar(a, b, z, v){ | |
//moving bit | |
fill(255, 250, 20); | |
rect(a, b, z, secondBarHeighthalf); | |
//color bit | |
fill(255, 0, 0, 90); | |
rect(a, b, z, v); | |
} | |
function weirdShape(x, y){ | |
horiBar(x,y); | |
horiBar(x, y + 60); | |
horiBar(x, y + 80); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// note: this file is poorly named - it can generally be ignored. | |
// helper functions below for supporting blocks/purview | |
function saveBlocksImages(doZoom) { | |
if(doZoom == null) { | |
doZoom = false; | |
} | |
// generate 960x500 preview.jpg of entire canvas | |
// TODO: should this be recycled? | |
var offscreenCanvas = document.createElement('canvas'); | |
offscreenCanvas.width = 960; | |
offscreenCanvas.height = 500; | |
var context = offscreenCanvas.getContext('2d'); | |
// background is flat white | |
context.fillStyle="#FFFFFF"; | |
context.fillRect(0, 0, 960, 500); | |
context.drawImage(this.canvas, 0, 0, 960, 500); | |
// save to browser | |
var downloadMime = 'image/octet-stream'; | |
var imageData = offscreenCanvas.toDataURL('image/jpeg'); | |
imageData = imageData.replace('image/jpeg', downloadMime); | |
p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg'); | |
// generate 230x120 thumbnail.png centered on mouse | |
offscreenCanvas.width = 230; | |
offscreenCanvas.height = 120; | |
// background is flat white | |
context = offscreenCanvas.getContext('2d'); | |
context.fillStyle="#FFFFFF"; | |
context.fillRect(0, 0, 230, 120); | |
if(doZoom) { | |
// pixelDensity does the right thing on retina displays | |
var pd = this._pixelDensity; | |
var sx = pd * mouseX - pd * 230/2; | |
var sy = pd * mouseY - pd * 120/2; | |
var sw = pd * 230; | |
var sh = pd * 120; | |
// bounds checking - just displace if necessary | |
if (sx < 0) { | |
sx = 0; | |
} | |
if (sx > this.canvas.width - sw) { | |
sx = this.canvas.width - sw; | |
} | |
if (sy < 0) { | |
sy = 0; | |
} | |
if (sy > this.canvas.height - sh) { | |
sy = this.canvas.height - sh; | |
} | |
// save to browser | |
context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120); | |
} | |
else { | |
// now scaledown | |
var full_width = this.canvas.width; | |
var full_height = this.canvas.height; | |
context.drawImage(this.canvas, 0, 0, full_width, full_height, 0, 0, 230, 120); | |
} | |
imageData = offscreenCanvas.toDataURL('image/png'); | |
imageData = imageData.replace('image/png', downloadMime); | |
p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png'); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment