Created
September 16, 2018 20:43
-
-
Save samizdatco/aaf16b2ebbf031584cdb1c2ca776e94c to your computer and use it in GitHub Desktop.
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 x; | |
| var num; | |
| // Sets the screen to be 2080 pixels wide and 720 pixels high | |
| function setup() { | |
| createCanvas(2080, 720); | |
| noStroke(); | |
| } | |
| function draw() { | |
| background(180); // this will clear the screen every time we redraw | |
| var now = clock() // store the current moment in a local variable | |
| // Draw black bar hours | |
| fill(50); | |
| x = 30; | |
| num = 24; | |
| for(var i = 0; i < num; i++) { | |
| // the if/else construct allows us to draw the rectangle at different positions based on whether | |
| // the 'current' rectangle is before or after the clock value for the 24-hour time | |
| if (i > now.hours){ | |
| rect(x, 40, 31, 150); | |
| }else{ | |
| rect(x, 70, 31, 150); | |
| } | |
| x += 84; | |
| } | |
| // Draw gray bar minutes | |
| fill(150); | |
| x = 30; | |
| num = 60; | |
| for(var i = 0; i < num; i++) { | |
| // we can omit the 'else' too by assigning a default value to the variable 'y' and then modifying | |
| // it only if we're drawing a bar that came earlier in the hour than the current minute | |
| var y = 270 | |
| if (i < now.min){ | |
| y += 30 | |
| } | |
| rect(x, y, 21, 120); | |
| x += 33; | |
| } | |
| // Draw off-white bar seconds | |
| fill(220); | |
| x = 30; | |
| num = 60; | |
| for(var i = 0; i < num; i++) { | |
| // the 'ternary operator' assigns one of two values based on whether the first term is true or false | |
| // in other words it combines an assignment and an if/else into a signle line | |
| // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator | |
| var y = (i < now.sec) ? 480 : 450 | |
| rect(x, y, 11, 90); | |
| x += 33; | |
| } | |
| // Draw white bar milliseconds | |
| x = 30; | |
| num = 1000; | |
| for(var i = 0; i < num; i++) { | |
| // in this case the if/else is setting the color rather than position, but the principle is the same | |
| if (i < now.ms){ | |
| fill(222) | |
| }else{ | |
| fill(180) | |
| } | |
| rect(x, 600, 1, 60); | |
| x += 2; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment