How to use p5.js API and JavaScript bits.
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
<script src="//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">
<div class="outer">
<div class="inner">
<div id="canvasContainer"></div>
</div>
</div>
</table>
</body>
/*
* us p5.js to draw a clock on a 960x500 canvas
*/
function draw_ovals(pos_x) {
ellipse(pos_x, 100, 10, 10);
ellipse(pos_x, 200, 10, 10);
}
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;
let seconds_until_alarm = obj.seconds_until_alarm;
// background(200);
// fill(200);
// rect(100, 100, 200, 200);
// let a = map(30, 0, 100, 0, 10);
// console.log(a);
// let sum = 0;
// background(0);
// fill(255);
// for (let i = 0; i < 100; i = i+10) {
// rect(i, 100, 5, 5);
// }
// console.log(sum)
draw_ovals(100);
draw_ovals(200);
draw_ovals(300);
// const BACK_COLOR=0;
// background(BACK_COLOR);
// const start_y = 300;
// const end_y = 400;
// fill(0, 0, 255);
// rect(0, start_y, width, 5);
// fill(0, 255, 0);
// rect(0, end_y, width, 5);
// fill(200);
// stroke(60);
// let cur_pos = map(millis, 0, 1000, start_y, end_y);
// for(let x=100; x<=600; x = x + 100) {
// rect(x, cur_pos, 50, 50);
// }
// draw_ovals(200, cur_pos);
}
// function draw_ovals(start_x, cur_y) {
// for(let x=start_x; x<=600; x = x + 100) {
// ellipse(x, cur_y, 50, 50);
// }
// }
const CANVAS_WIDTH = 960;
const CANVAS_HEIGHT = 500;
function setup () {
// create the drawing canvas, save the canvas element
let 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 () {
fill(0);
background(0);
strokeWeight(5);
const spacing = 100;
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);
}
}
// do not alter or remove this function
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
}
/*
* 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;
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);
}
/*
* us p5.js to draw a clock on a 960x500 canvas
*/
/* size of square */
var s = 24
var numbers = [
// 0
[
[2, 1],
[3, 1],
[1, 2],
[4, 2],
[1, 3],
[4, 3],
[1, 4],
[4, 4],
[2, 5],
[3, 5],
],
// 1
[
[2, 2],
[3, 1],
[3, 2],
[3, 3],
[3, 4],
[3, 5]
],
// 2
[
[1, 1],
[2, 1],
[3, 1],
[4, 2],
[4, 3],
[3, 3],
[2, 4],
[1, 5],
[2, 5],
[3, 5],
[4, 5]
],
[ // 3
[1, 1],
[2, 1],
[3, 1],
[4, 2],
[3, 3],
[2, 3],
[4, 4],
[3, 5],
[2, 5],
[1, 5]
],
[ // 4
[1, 1],
[3, 1],
[1, 2],
[3, 2],
[1, 3],
[2, 3],
[3, 3],
[4, 3],
[3, 4],
[3, 5]
],
[ // 5
[1, 1],
[2, 1],
[3, 1],
[4, 1],
[1, 2],
[1, 3],
[2, 3],
[3, 3],
[4, 4],
[3, 5],
[2, 5],
[1, 5]
],
[ // 6
[2, 1],
[3, 1],
[4, 1],
[1, 2],
[1, 3],
[2, 3],
[3, 3],
[1, 4],
[4, 4],
[2, 5],
[3, 5],
], //7
[
[1, 1],
[2, 1],
[3, 1],
[4, 1],
[4, 2],
[3, 3],
[3, 4],
[3, 5],
],
[ // 8
[2, 1],
[3, 1],
[1, 2],
[4, 2],
[2, 3],
[3, 3],
[1, 4],
[4, 4],
[2, 5],
[3, 5],
],
[ // 9
[2, 1],
[3, 1],
[4, 1],
[1, 2],
[4, 2],
[2, 3],
[3, 3],
[4, 3],
[4, 4],
[4, 5]
],
]
function draw_number(num, x, y) {
/* this resets any previous translations */
resetMatrix();
translate(x, y);
var pixels = numbers[num%numbers.length];
for(var i=0; i<13; i++) {
var cur_pixel = pixels[i%pixels.length];
rect(cur_pixel[0] * s, cur_pixel[1] * s, s, s);
}
}
function draw_number_interp(frac, num1, num2, x, y) {
/* this resets any previous translations */
resetMatrix();
translate(x, y);
var pixels1 = numbers[num1%numbers.length];
var pixels2 = numbers[num2%numbers.length];
for(var i=0; i<13; i++) {
var cur_pixel1 = pixels1[i%pixels1.length];
var cur_pixel2 = pixels2[i%pixels2.length];
var pos_x = map(frac, 0.0, 1.0, cur_pixel1[0], cur_pixel2[0]);
var pos_y = map(frac, 0.0, 1.0, cur_pixel1[1], cur_pixel2[1]);
rect(pos_x * s, pos_y * s, s, s);
}
}
function digits_from_num(num) {
digits = []
if (num < 10) {
digits.push(0);
}
else {
n1 = Math.floor(num / 10);
digits.push(n1);
}
n2 = Math.floor(num % 10);
digits.push(n2);
return digits;
}
function draw_clock(obj) {
let hour = obj.hours;
let minute = obj.minutes;
let second = obj.seconds;
let millis = obj.millis;
let alarm = obj.seconds_until_alarm;
var hour_pos = [40, height/2 - 3.5 * s];
// DEBUG CODE TO TEST HOUR ROLLOVER
// minute = minute + 35; // change based on current time
// if (minute == 60) {
// minute = 0;
// hour = 0;
// }
// is alarm going off?
if (alarm == 0) {
if (second % 2 == 0) {
background(0,0,100);
}
else {
background(100,100,0);
}
}
else {
background(50);
}
noStroke();
// is alarm going off in next 15 seconds
if (alarm > 0) {
fill(100);
rect(width-50, height-50, 40, 40);
if (alarm < 15.0) {
var box_w = map(alarm, 0, 15, width, 0);
var box_h = map(alarm, 0, 15, height, 0);
rect(width/2-box_w/2, height/2-box_h/2, box_w, box_h);
}
}
fill(255);
// HOURS
next_hour = (hour + 1) % 24;
digits1 = digits_from_num(hour);
digits2 = digits_from_num(next_hour);
if(second >= 50 && minute == 59 &&
(hour == 9 || hour == 19 || hour == 23)) {
// minute_fraction_tens = millis / 1000.0;
seconds_left = (second - 50) + millis / 1000.0;
hour_fraction_tens = seconds_left / 10.0;
}
else {
hour_fraction_tens = 0;
}
draw_number_interp(hour_fraction_tens, digits1[0], digits2[0], hour_pos[0] + 0.0 * 5 * s, hour_pos[1]);
// draw_number(digits1[0], hour_pos[0], hour_pos[1]);
if(second >= 55 && minute == 59) {
// minute_fraction_tens = millis / 1000.0;
seconds_left = (second - 55) + millis / 1000.0;
hour_fraction_ones = seconds_left / 5.0;
}
else {
hour_fraction_ones = 0;
}
draw_number_interp(hour_fraction_ones, digits1[1], digits2[1], hour_pos[0] + 1.0 * 5 * s, hour_pos[1]);
// draw_number(digits1[1], hour_pos[0] + 1.0 * 5 * s, hour_pos[1]);
// MINUTES
next_minute = (minute + 1) % 60;
digits1 = digits_from_num(minute);
digits2 = digits_from_num(next_minute);
if(second >= 58 && digits1[1] === 9) {
// minute_fraction_tens = millis / 1000.0;
seconds_left = (second - 58) + millis / 1000.0;
minute_fraction_tens = seconds_left / 2.0;
}
else {
minute_fraction_tens = 0;
}
draw_number_interp(minute_fraction_tens, digits1[0], digits2[0], hour_pos[0] + 2.5 * 5 * s, hour_pos[1]);
if(second === 59) {
minute_fraction_ones = millis / 1000.0;
}
else {
minute_fraction_ones = 0;
}
draw_number_interp(minute_fraction_ones, digits1[1], digits2[1], hour_pos[0] + 3.5 * 5 * s, hour_pos[1]);
// draw_number(digits1[1], hour_pos[0] + 3.5 * 5 * s, hour_pos[1]);
// SECONDS
next_second = (second + 1) % 60;
second_fraction = millis / 1000.0;
digits1 = digits_from_num(second);
digits2 = digits_from_num(next_second);
if(digits1[1] === 9 && millis > 500) {
second_fraction_tens = (millis - 500) / 500.0;
}
else {
second_fraction_tens = 0;
}
// draw the 10 second position
draw_number_interp(second_fraction_tens, digits1[0], digits2[0], hour_pos[0] + 5.0 * 5 * s, hour_pos[1]);
if(millis > 900) {
second_fraction_ones = (millis-900) / 100.0;
}
else {
second_fraction_ones = 0;
}
// draw the 1 second position
draw_number_interp(second_fraction_ones, digits1[1], digits2[1], hour_pos[0] + 6.0 * 5 * s, hour_pos[1]);
}
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
<script src="//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>
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")
}
<head>
<style> body {padding: 0; margin: 0;} </style>
</head>
<body style="background-color:white">
<img src="preview.jpg" width="960" height="500"/>
</body>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
<script src="//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>
���� JFIF �� C
�� C �� ��" ��
�� I �!TUV���1� "8AQqt��27Wav�3�r�$CDR�#��� �� 5 S�RU��T�!1AQbq�23�B�� ? ʠ 5��m��[j���3R�i&�,%ٶ��� �x����_U�(���}zrէ�T��B�~���?�G�j�M���g�&;�����/�n6��\��%��O��Q�h��C��q��ߺ�%�M���~뀗�.�\�}N��o�?<�1�l/�� }Sq��ߺ�%�K��.�S�<����8Lw���_T�l/�� }R��˧��&�������~뀗�7���_T��r��;Cɿh��C��q��ߺ�%�M���~뀗�.�\�}N��o�?<�1�l/�� }Sq��ߺ�%�K��.�S�<����8Lw���_T�l/�� }R��˧��&�������~뀗�7���_T��r��;Cɿh��C��q��ߺ�%�M���~뀗�.�\�}N��o�?<�1�l/�� }Sq��ߺ�%�K��.�S�<����8N�h�R�5��)VY�v2a{a�?Wь-e�k��R����g��B|~5��-b��7h�� ���I��� ����G���� ��6��\����_o�p�����O��Tߴ~x!�c��_o�p���a}�u�K�W�]>�hy7��p��6��\����_o�p����O��M�G�&;�����/�n6��\��uz���v��~���� ��a}�u�Kꛍ����/�]^�t����ߴ~x!�iK XW��cW�'��Y0�c�P���eU�/��b܍�6� �z?�Z:O����SBM'D����4e��e����� �����'�:���9��|:XF�j�;�����/�ۓ��\*� ��*F���������� �p��6��\����_o�p���^�t�������8Lw���_T�l/�� }R��˧��&�������~뀗�7���_T��r��;Cɿh��C��q��ߺ�%�M���~뀗�.�\�}N��o�?<�1�l/�� }W�o�)n� ���:���0����V���m�Z�M'B�I��l!�1Z]2�߈L���ƌ���f����B^��|/d!� ��n6��\���~�kV�&�FЦ�_�/�w�H�%�Fd8Lw���_T�l/�� }V���O��Uߴ~x!�c��_o�p���a}�u�K�W�]>�hy7��p��6��\����_o�p����O��M�G�&;�����/�n6��\��uz���v��~���� ��a}�u�K�t��y�N�5{Rx�%��1��
�O�_����!~�����
7G�����Uo�����#nͿ���� W�W XP�4��W�燶Y��a~Q��ѿO��M�2h�$g�?�c,c� �-6�F_��}�1�l/�� }Sq��ߺ�%�[�W�]>�hyS~���� ��a}�u�Kꛍ����/�]^�t����ߴ~x!�c��_o�p���a}�u�K�W�]>�hy7��p��6��\����_o�p����O��M�G�&;�����/�n6��\��uz���v��~���� վ����&�����odd���?�K�Kk�s�҄���^�C� +��:ŵ�n��� o����� w�}����~Q1�l/�� }Sq��ߺ�%�]��.�S�<��h��C��q��ߺ�%�M���~뀗�.�\�}N��o�?<�1�l/�� }Sq��ߺ�%�K��.�S�<����8Lw���_T�l/�� }R��˧��&�������~뀗�7���_T��r��;Cɿh��C��q��ߺ�%�M���~뀗�.�\�}N��o�?<�1�l/�� }Sq��ߺ�%�K��.�S�<����8Lw���_T�l/�� }R��˧��&�������~뀗�7���_T��r��;Cɿh��C��q��ߺ�%�M���~뀗�.�\�}N��o�?<�1�l/�� }Sq��ߺ�%�K��.�S�<����8Lw���_T�l/�� }R��˧��&�������~뀗�7���_T��r��;Cɿh��C��q��ߺ�%�M���~뀗�.�\�}N��o�?<�1�l/�� }Sq��ߺ�%�K��.�S�<����8Lw���_T�l/�� }R��˧��&�������~뀗�7���_T��r��;Cɿh��C��q��ߺ�%�M���~뀗�.�\�}N��o�?<�1�l/�� }Sq��ߺ�%�K��.�S�<����8Lw���_T�l/�� }R��˧��&�������~뀗�7���_T��r��;Cɿh��C��q��ߺ�%�M���~뀗�.�\�}N��o�?<���f�<�*]�M4ьf�66�c���?;��ͯo�p���ܴ�%�I�C�����I� ��c�6����|��mx#�'�m_sS�7�l��gw}�Y��-����>�k�[� ��W������I�����>�k�[�
��}f׀��8A붯���ɲ������}f׀����ͯo�p��m_sS�7�e',;;���ͯo�7�1��^����ھ��o&�NXvww�1��^��o�c�6����]�}�O��M������c�6����|��mx#��j���9��)9a���|��mx!�������G=v��5>sy6Rró��������C}�Y��-��z���j|��l��gw}�Y��-����>�k�[� ��W������I���C���%f�,����_�W�!N�*xu�v}�F<��C�����?Q�����LSJ3P�8�!-I��D�mm��!-8K�#���ӳdvm���j�c�
[��f�X�L�N��C�mkܒg+���#/��m�D�ݧ<��m&�a��vRC����0/�B��l0�ya��-��$!�K@��0[F��l1+y��4����$a�M��Z깧
FrVs�n�MMC+c��e��V�����2ԄcOl~�z:6l�ݰ̼�KI�5��?8YҰĬ*F�ZU0�xm�&�y0�:a{a몏��ݎ��aq��ka�2�8�r��]ͬ?~H���އ��ލ�Im�NIa,�MHB�7�6rG��-w�1��^��o�c�6����붯����6Rró��������C}�Y��-��z���j|��l��gw}�Y��-����>�k�[� ��W������I�����>�k�[��T�U4��Ii��&�d�d��
��k�閞�:!�Fod6�q�`��z�N�a�2�Գ˄Y��v)RXm�В;y?|����6�zK�aXv��`�E�+K+:RѡB��%�$��B�ھ��o&�NXvBr�4I�{JV�g$�V����ℵ�&�gLܹ��]�\%���e��90��ٳgF��s�թ^xԫ4f�?�c�c�c�BH>�t �M$ZU���'
��N��v�%�q,�:&������a�孎��D�\�3�M���3ϲy��Ƶ�c�jl��T&�G�F;��q\+�0ۜ��weyJj5�U�l�$�#���ښv�&�G�<�� HMC�"��,����|��mx!�������G�u�Є��'�-��l"�� ]�Ԛ9T'��O�,~lz!
��·�Y�v��5>syWe',;;���ͯo�7�1��^����ھ��o&�NXvww�1��^��o�c�6����]�}�O��M������c�6���!�t�����e��}�+�J��)ӥO��϶hǑ�{c� ��������F0���͌�̙��.9u$�.��?�$>�W�G�F_gNھ��o&�NXv{z�c%d�:�Ҕ�3N?B���"J6�'�脴����n���#퍔��/[B� �l0�ya�����$?)a=��N�M�Ԛx����� ���� �C�0,�m<�ĭ��Ҽ�������`�zo�c%g<:��l�2�?F���"J֗��FZ��i��/GF͐��ц���:c6�Ri#��a��4����
3�-&h�4^���gJ���uiTí���t�0�a�Q���}f׀��5+����I�0���5��̙V�n9t�.���$~�O�C�BooF̘nz���j|���NXvww�1��^��o�c�6����]�}�O��M������c�6����|��mx#��j���9��)9a���|��mx!�������G �mR�!>��Æe��g�����R���ɡ$v�~���a�m�6��j���9��)9a��-S�T�&�%��s���.Q�}�O6���G�Z{d��������Cr�4I�{JV�g$�V����ℵ�&�gLܹ��]�\%��aXV���>gJ��Δ�hP�.�i�,6B��`�-M;K�g�V�y�f�a�1ZK,~���ɗ���Ó�f͝��Mi"ҭ�f�8l��t� ���-�f��7.X|�T&��� եV� �R�іh~ф~����B?���[U4���jg�&5�g�d��
��k�=��'L>�M��v*���>�k�[�݊�Xv9������+�+�SQ�B��e�$��FZ��B�#L8�X��y����vRhl�P�;y?|����6�;:]�}�O��T�I�ϛo�c�6����|��mx#��j���9��)9a���|��mx!�������G=v��5>sy6Rró��������C}�Y��-��z���j|��l��d�!��f��E�O��t��+���N�<:�;>٣GD!�c�M4!��Jɘu�)�)�f�~�I��D�m(O�� i���?\�;6G�S�����F0���͌�̙��.9u$�.��?�$>�W�G�F_gN�\���Nyc,�MH�?�7�줇����^�����a���d)Y�IFH~R�1��6ѳ��[J�hl�+�i+I�hF|r�U�7�1���w�h�j[�#RZ%kK��z#-HF4��뗣�f�{a�y�4k�/r~p��a�XT�:��a����M�:at�0��-�U�W�'���?��2�2eZq��Ӓ��X~���y?�� ��:��v�����5!|�T�����|��mx!�������GO�ھ��o(�I�����>�k�[�
��}f׀��8A붯���ɲ������}f׀����ͯo�p��m_sS�7�e',;;���ͯo�7�1��^����ھ��o&�NXvww�1��^��o�c�6����]�}�O��M������c�6����|��mx#��j���9��)9a���|��mx!�������G=v��5>sy6Rró��������C}�Y��-��z���j|��l��gw}�Y��-����>�k�[� ��W������I�����>�k�[�
��}f׀��8A붯���ɲ������}f׀����ͯo�p��m_sS�7�e',;;���ͯo�7�1��^����ھ��o&�NXvww�1��^��o�c�6����]�}�O��M������c�6����|��mx#��j���9��)9a���|��mx!�������G=v��5>sy6Rró��������C}�Y��-��z���j|��l��gw}�Y��-����>�k�[� ��W������I�����>�k�[�
��}f׀��8A붯���ɲ������}f׀����ͯo�p��m_sS�7�e',;;���ͯo�7�1��^����ھ��o&�NXvww�1��^��o�c�6����]�}�O��M���� �2 .'����u�nl��ne�ZR������(T�Z���,&�#��hm��h��B��������#u�`:�W��O�~�t)��˜��R7[��O�~\�d� �B��������#]5��������˹ñ[
soi,�)�Ӗm���l�FtbȰ���͎�,�HO���1�M�xt8��@Ŧ����K4!LFޮ��d!�xt�ۆa֘>i��R�;k*���d������xl�-�:�uaR��)kR�ɤ��#��� =lS��0ۼ&��*[^ЩmZH�&�<��h~p�^��ywo����
t-��Z���K$��c��0/;�S`Y���F���.L!�.����6�!�;F�L�q\ˣ���,�^^ո��j��VXT��æ0�ч����t)��˜��R7[��O�~\�d� ���/��[Y<k˘]���XX|M��8INNU f�d!��4я�W`��6X���gl�R�X�U����WgL)�i�� �d���o�O��V�y�,OZHV�����OoΌ��hM6ϳo"�� �|+9bڦ�su;y�S����WgLi�i%���<Y��,�2�|��-�L����o�*�.i¥8O�R��?\v?���Ч�.p2�aH�o��?��s���>;���4]��l�X�]�X.�Z�S���{Id�O�^��l�=�e�0��dX ��|&lw9`�<�Bx�_Хɏ�m�á�8fi�ᶘM�(S���Nތ��KNIa,���0K b�`Y��%���#oWlc��<:b�+�|B΅��XT�sJZԧ��i&�#��`0 [í1�6� ��
�״*[V�>ɩ�,e��#g|*l8�x<�BH��ץɄ:%�<z�ywo����
t-��Z���K$��c���9A�0��f��]`�8�!eJ���Ŝ�T�j�¤ܨ�1�f�? b0�o��?��s����
+��'����_�2��x��0�l;�����kzp�����6�Cٶi��*�G>
l�mO �ٺ�����qocF�ΘS�4��� 2�q����T+e<�'�$+[�[�ӧ��FH�4&�gٷ��� A���mS �9�����)�\X֫��4�K4���f�+���y�w>g����&
i��Xa���z4�R�'��)Q�a�;kF�DZ7[��O�~\�d� �B��������#]5��������˹ñ[
soi,�)�Ӗm���l�FtbȰ���͎�,�HO���1�M�xt8��@Ŧ����K4!LFޮ��d!�xt�ۆa֘>i��R�;k*���d������xl�-�:�uaR��)kR�ɤ��#��� =lS��0ۼ&��*[^ЩmZH�&�<��h~p�^��ywo����
t-��Z���K$��c��0/;�S`Y���F���.L!�.����6�!�;F�L�q\ˣ���,�^^ո��j��VXT��æ0�ч����t)��˜��R7[��O�~\�d� ���/��[Y<k˘]���XX|M��8INNU f�d!��4я�W` w>
���p�܇��i�1�
���p�܇��i� >���[H_���4���Mw~��B�y�ŰF0��Gd` ��C��a���e�B�H�<�FK;�1�ɪ[��iT�>�Cd�vl�oLVe�z(Ҷp��r�ι/����hr���+���<=��a�����^Mi�����[l���$!^���"��C�5:�tl��4v�nͳl�Ac��j7��oVJ��C�,�M ��l#iZ�zS�%*t�ʚy愲��1���/H��յѭ�эlr^^'4��|.Y�V����W��~��4za$�Ɛ�՟ѽ����#ȩ �2�;vF3ׇEX�?�t�Sm�"�C�����B�kʘ�)�O
؆!ZXB��HCd!C�JrâI!�,>��1�v��Y%��K e�!Cd!� d�1����ý�F�2��T��a�� +0 ���Zp���3Xb��hɂb�� ӱ=���S�'�cɚ�d=��3iwkkF���{{�rգV�КJ�M
��,a�F�a��\�Q����e���4��K-�E����W��c��ߓoնݻa��
G���܁��:�)��f�Щ$*l��Ԗ� �N?:_�I�x����m�^�W�B�ޜ�jթ4%�I%�٦�c�!�k��s�W�В\o�F��6�m�s^?e*2B5*G�K,b�Ɇc�@��s�0ژV^�RZ�p��K��B;e���Jp�!Q�c�;#<z9 ��W�|KH�*Q��Ɣ�4��g��R�|D&�=2�<g�V0��6�L�� �v��Em!~���}���w~��B�y�[ F0��Gd`��C��a���e�B�H�<�FK;�1�ɪ[��iT�>�Cd�vl�oLY�h�J��Cy��:�F{k�Y�|�~ei>�'��0�6����
��@Z�h�LX}��9��e|�Ȅ+�����5&��ju&���&��mٶm���ѭF┕���V�Hr��I�4�C�a��~+V�oJz�d�N�9SO<ЖYa��1�!�C�7V|3F��c�P�"��&�0�X���^c� ���M��<�G� i�q���5��1��K���� ���6�њ?Tj� �/��L$�3�Yd�I,%�Xl�!
��\��(���^T�1LBxV�1
��.*B!BS�I�a��1�{` ��F>�9��w�H��3��}*s�0�v�Y�}�S-8S�v��1|R�d�1y�؞�~�)�
�����M���� � B�v���o��)��-Z5i� ��$��,���aFyYq�6���,����!q�e�#ȴ��<��0�}����m���۷l:yZA����4��S�2>l�qz$�M�����?����K�� ����s�W�В\o�F��6�m�s^?e*2B5*G�K,b��յ��k����[�Ӛ�Z�&���$��4ь}��!�E2
+�^�%��(���JKUe���ér�"K�f�3ի}_G�W�L3��;�ц�²�
�գ�V�X��,�\��S�a#�����M� �w譤/�Q��L[m&��Em!~���b�#Gl#�0 k��{��ވ��!{$sU�%���d�-����Bd!�^��6K��+2��i[8ho9Y�\���myk7ϓo̭'�$��F��~|��-y�G�,>���m��c�B��j�]�C�5:�tl��Gl6��6��@~(֣qJJ��d�N�9R�$КY���0���Q��={��R�N���hK,��c��B�Z8�[]�M��%��sK� ���eh��5ٗ��G�L\i�Y���I��B<���0�-c�dc=xtU�#� �K�6ވ�!T;9_,Q˴.+V���b���b��*\T�6B�:$�,:$���c�jYe�XI$��Ya��6B@A�#J���;ݤk� ���N`���� ��T3���=�NY��T3���=�N@ ��w~��B�y�Ŷ�k��V��(��&-� �M$КY� ���#���&{L:R�p�2��,!7L~*�� ضWE�=ɸޏ��b��*8�#{��^W���=�f�= &�xB�f���ьz!
�S�͡��H���}ژ%��ӣNZ4i�$�B�,�� ad!�� ��F>�9��w�H��A�#J���;ݤf �ax�5�U������ �Э4�cdz#Ҽ~m͚]�c�zG�x�;�a�.m�n1
��%_��/+d�C��f�6Gl:T9w>
���p�܇���`9C*�xT�ܻ�a�U� v{ky$����Bf���� >���[H_���4�q|;]ߢ���G�i� e�i&���M�a�E.��_ҎS�a�3�9a ��y<6� �Q �����oG�K1c�c��l/+����3V���M<!Z3BX�h�=�ϩ��t�ѧ-4�I! e�Xl������KC��<������4� ��}*s�0�v�Y�g��T��a��"� {�q���`��ݔ��M��i��{#�������6iwH�-�5�X��`p�����+K$�~>����MW͚0���hn�2�W�M�˸v5_�g���I��4!�h��7~
���p�܇��i� >���[H_���4���Mw~��B�y�Ű ��i��K4a4#��za��/iJ9N�\���&��U���� 1l���{�q�e,ŏ�Tq�F����_�{��ZzM4��h� c��B>�7�C��<������0KiӧF��hӖI$�%�Ya���BT� ��}*s�0�v�����F>�9��w�H
� .��Q�\�ې��M9a��t�����8�@�iJ����i�(KV �>�BhF1��>އؾRme{W�2���2O�&�W�p�(�O��Y^��� L�����I���\��>S�&�W�p�(�A~���+i�}��Hz�i�I�/�Y�����aF�Jv4��BhM�ia�d���^ o6���y#�s
�jlY���/`��R��-iY�I>�і�9!$��m��B1�����I���\��>S�&�W�p�(�A��$�Rme{W�2���I���\��>Pkc ���N`���:)6������G��F����tѝ.3�r��|Z�*5��J����L:!�at}��� .��Q�\�ې��JF�>�t�����8�@�iJ����i�(KV �>�BhF1��>ހnp�?��Y^��� L��>Rme{W�2���2O�&�W�p�(�O��Y^��� L���>���[H_���4��&�W�p�(�Q�!�է='�W!f��.��Q��)�ӧ4a �4# ��#
�K, W� ������7ݩ���>�a��
a�aW�E+,2֕�����MiS�I
����!����k+ڸ?�|����)6������G�|������e(5�d��M��j�� �Q�)6������G��1����ý�EfL���lӦ��q�s�����TiQ�=
P�,Ч/&X�a��C��C@ w>
���p�܇��i�t#����g��[JW���,�OqBZ���O �BB0�%���>��k+ڸ?�|����)6������G�|������e(5�d��M��j�� �Q�)6������G�����[H_���4����CNzO�x�B͗�]|'�
72S��Nh�BhFKF&�X�J� y�=�#�ۘo�S`��`�v��{��0��"��kJ��H������� $���lvB�H5�d��M��j�� �Q�)6������G�
l'�k+ڸ?�|��M��j�� �Q�[��}*s�0�v���I���\��>W�4��lӦ��q�s�����TiQ�=
P�,Ч/&X�a��C��4 ^Y�X,0,6��?�om�(ҹ�� @�?�U�HBy�St�la�Lv���t��w?ôT@x���f֞j�T���c�&�_<��idW�5Y������VhC��^�t��w?ôNt��w?ôT@S�,�J��1�}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص�^�t��w?ôNt��w?ôT@8�ī�1u�6-|��.�]����.�]��� �1*�L]}��_:u��K��s�;D�K��s�;ED�,�J��_cb�Ν{����� �9���� �Q �3�d���ص� {��� ��
{
"commits": [
{
"sha": "0f4ec0df94538f7a6dac1254dbf3763e8a10d792",
"name": "final"
},
{
"sha": "f7809979a17703326a259c8e97163e5ccbaa3b10",
"name": "clock_alarm"
},
{
"sha": "ae749e4fedb1082b44c97259c970d5d549e61f7e",
"name": "original_clock"
},
{
"sha": "8c2ddafb299f6ed24b68d12bf9008eb98cdd39e9",
"name": "maeda_clock"
},
{
"sha": "d873871be650e53582894210d2a1240da7b9fa9a",
"name": "sketch"
}
]
}
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);
}
}
// 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');
}