REPLACE ALL TEXT IN THIS FILE.
Here is where you write a short, coherent description of an idea for your clock.
Last active
March 25, 2019 22:39
-
-
Save uwcc/a7bc83a5da33f9a6da26a239eae95ef5 to your computer and use it in GitHub Desktop.
PS1 MDDN 242 2019
This file contains hidden or 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
| license: mit |
This file contains hidden or 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="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/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"> | |
| <div class="outer"> | |
| <div class="inner"> | |
| <div id="canvasContainer"></div> | |
| </div> | |
| </div> | |
| </table> | |
| <br> | |
| <a href="part1.html">part1</a> | |
| <a href="part2.html">part2</a> | |
| </body> |
This file contains hidden or 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
| /* | |
| * use 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-999 | |
| // 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 | |
| } |
This file contains hidden or 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-999 | |
| // 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; | |
| let alarm = obj.seconds_until_alarm; | |
| 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); | |
| text("Minute: " + secondsWithFraction, 200, 42); | |
| fill(200, 100, 100) | |
| let alarm_message = "" | |
| if(alarm < 0) { | |
| alarm_message = "Alarm: Not Set" | |
| } | |
| else if(alarm == 0) { | |
| alarm_message = "Alarm: GOING OFF" | |
| } | |
| else { | |
| let seconds_remaining = int(alarm); | |
| alarm_message = "Alarm: will go off in " + seconds_remaining + " seconds" | |
| } | |
| text(alarm_message, 400, 42); | |
| } |
This file contains hidden or 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="sketch.jpg" width="960" height="500"/> | |
| <br> | |
| <a href="part2.html">part2</a> | |
| <a href="clock.html">clock</a> | |
| </body> |
This file contains hidden or 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 spacing = 70; | |
| // Update this function to draw you own maeda clock on a 960x500 canvas | |
| function draw_clock(obj) { | |
| fill(0); | |
| background(0); | |
| strokeWeight(5); | |
| stroke(255, 0, 0); | |
| for(let i = -2*spacing; i <= 2*spacing; i = i+spacing) { | |
| ellipse(width/2, height/2+i, 45, 45); | |
| } | |
| strokeWeight(3); | |
| stroke(255, 255, 0); | |
| for(let i = -2*spacing; i <= 2*spacing; i = i+spacing) { | |
| ellipse(width/2, height/2+i, 40, 40); | |
| } | |
| stroke(0, 0, 255); | |
| for(let i = -2*spacing; i <= 2*spacing; i = i+spacing) { | |
| ellipse(width/2, height/2+i, 30, 30); | |
| } | |
| } |
This file contains hidden or 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="sketch.jpg" width="960" height="500"/> | |
| <br> | |
| <a href="part2.html">part2</a> | |
| <a href="clock.html">clock</a> | |
| </body> |
This file contains hidden or 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="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.js"></script> | |
| <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script> | |
| <script language="javascript" type="text/javascript" src="maeda_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> | |
| </table> | |
| <br> | |
| <a href="part1.html">part1</a> | |
| <a href="clock.html">clock</a> | |
| </body> |
This file contains hidden or 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 hidden or 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