This is an example of:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.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>
<style>
body { padding: 0; margin: 0; }
.inner { position: absolute; }
#controls {
font: 300 12px "Helvetica Neue";
padding: 5;
margin: 5;
background: #f0f0f0;
opacity: 0.0;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
}
#controls:hover { opacity: 0.9; }
</style>
</head>
<body style="background-color:white">
<div class="outer">
<div class="inner">
<div id="canvasContainer"></div>
<a href="part1.html">part1</a>
<a href="part2.html">part2</a>
<a href="clock.html">clock</a>
<a href="debug.html">debug</a>
</div>
<div class="inner" id="controls" height="500px">
<table>
<tr>
<td>Timer</td>
<td id="slider1Container"></td>
</tr>
<tr>
<td>Alarm Set</td>
<td id="checkContainer1"></td>
</tr>
<tr>
<td>Alarm Active</td>
<td id="checkContainer2"></td>
</tr>
</table>
</div>
</div>
<br>
</body>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.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>
<style>
body { padding: 0; margin: 0; }
.inner { position: absolute; }
#controls {
font: 300 12px "Helvetica Neue";
padding: 5;
margin: 5;
background: #f0f0f0;
opacity: 0.0;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
}
#controls:hover { opacity: 0.9; }
</style>
</head>
<body style="background-color:white">
<div class="outer">
<div class="inner">
<div id="canvasContainer"></div>
<a href="part1.html">part1</a>
<a href="part2.html">part2</a>
<a href="clock.html">clock</a>
<a href="debug.html">debug</a>
</div>
<div class="inner" id="controls" height="500px">
<table>
<tr>
<td>Timer</td>
<td id="slider1Container"></td>
</tr>
<tr>
<td>Alarm Set</td>
<td id="checkContainer1"></td>
</tr>
<tr>
<td>Alarm Active</td>
<td id="checkContainer2"></td>
</tr>
</table>
</div>
</div>
<br>
</body>
/*
* use p5.js to draw a clock on a 960x500 canvas
*/
function draw_clock(obj) {
const night_sky = color(50, 50, 60);
const night_ground = color(30, 60, 30);
const day_sky = color(100, 100, 230);
const day_ground = color(100, 200, 100);
const sun_yellow = color(240, 240, 0);
// 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 current_ground = null;
if (obj.hours >= 7 && obj.hours < 8) {
// sunrise
let hour_fraction = obj.minutes / 60;
let cur_sky = lerpColor(night_sky, day_sky, hour_fraction);
current_ground = lerpColor(night_ground, day_ground, hour_fraction);
background(cur_sky);
}
else if (obj.hours >= 19 && obj.hours < 20) {
// sunrise
let hour_fraction = obj.minutes / 60;
let cur_sky = lerpColor(day_sky, night_sky, hour_fraction);
current_ground = lerpColor(day_ground, night_ground, hour_fraction);
background(cur_sky);
}
else if(obj.hours >= 8 && obj.hours < 20) {
// daytime
background(day_sky);
current_ground = day_ground;
}
else {
// nightime
background(night_sky);
current_ground = night_ground;
}
let sun_height = null;
if (obj.hours <= 12) {
sun_height = map(obj.hours, 0, 12, height, 0);
}
else {
sun_height = map(obj.hours, 12, 23, 0, height);
}
fill(sun_yellow);
ellipse(width/2, sun_height, 100);
fill(current_ground);
rect(0, height/2, width, height);
// debug helper
textSize(50)
text("debug:", 50, 100)
textSize(100)
text(obj.hours, 200, 100)
}
/*
* 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
background(0);
const ballWidth = 100;
fill(255, 255, 0);
let secs = obj.seconds;
let millis = obj.millis;
let exactSeconds = secs + millis / 1000.0;
posX = map(exactSeconds, 0, 60, ballWidth/2, width-ballWidth/2);
posY = map(60, 0, 100, 0, height);
ellipse(posX, posY, ballWidth);
fill(255);
posX = map(obj.minutes, 0, 59, ballWidth/2, width-ballWidth/2);
posY = map(40, 0, 100, 0, height);
ellipse(posX, posY, ballWidth);
posX = map(obj.hours, 0, 23, ballWidth/2, width-ballWidth/2);
posY = map(20, 0, 100, 0, height);
ellipse(posX, posY, ballWidth);
}
/*
* 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, 59, 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);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.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" height="500px">
<table>
<tr>
<td>Timer</td>
<td id="slider1Container"></td>
</tr>
<tr>
<td>Alarm Set</td>
<td id="checkContainer1"></td>
</tr>
<tr>
<td>Alarm Active</td>
<td id="checkContainer2"></td>
</tr>
</table>
</div>
</div>
</table>
<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>
</table>
</div>
</div>
</table>
</body>
<br>
<a href="part1.html">part1</a>
<a href="part2.html">part2</a>
<a href="clock.html">clock</a>
<a href="debug.html">debug</a>
</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")
}
// Update this function to draw you own maeda clock on a 960x500 canvas
function draw_clock(obj) {
// YOUR MAIN CLOCK CODE GOES HERE
background(50); // beige
fill(200); // dark grey
textSize(40);
textAlign(CENTER, CENTER);
text("YOUR MAEDA CLOCK CODE GOES HERE", width/2, height/2);
}
<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="part1.html">part1</a>
<a href="part2.html">part2</a>
<a href="clock.html">clock</a>
<a href="debug.html">debug</a>
</body>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.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>
<style>
body { padding: 0; margin: 0; }
.inner { position: absolute; }
#controls {
font: 300 12px "Helvetica Neue";
padding: 5;
margin: 5;
background: #f0f0f0;
opacity: 0.0;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
}
#controls:hover { opacity: 0.9; }
</style>
</head>
<body style="background-color:white">
<div class="outer">
<div class="inner">
<div id="canvasContainer"></div>
<a href="part1.html">part1</a>
<a href="part2.html">part2</a>
<a href="clock.html">clock</a>
<a href="debug.html">debug</a>
</div>
<div class="inner" id="controls" height="500px">
<table>
<tr>
<td>Timer</td>
<td id="slider1Container"></td>
</tr>
<tr>
<td>Alarm Set</td>
<td id="checkContainer1"></td>
</tr>
<tr>
<td>Alarm Active</td>
<td id="checkContainer2"></td>
</tr>
</table>
</div>
</div>
</table>
<br>
</body>
���� JFIF �� C
�� C �� ��" �� �� K �!5Ut��1AQ"2q�4Ba����TWr���#%R��3CSbds���� �� > !1a���2RAQq"���$Sb���#T������ ? ���@ �n��3j�UDuN�R��Z��\�F�H���3�\c��Z������Z������a���uS�[�G������������v��x�S�[�G��������b����n�b}��j1x{�wh�&wL&.�T�GB� 5�� �7?��2F�J�� �����-yg�~������so<��u���7���y&�� /� Mo�����(�[�汢�ժ��fb�z����x[U^��ʘ���R���Tn� V�?11����t�\�oMfj���#�?��z��r����/e�m�F.1Q��>Y�g�,z;Uw~'�`>�� 5N�bf~PUMT�꩘���Fyg��6 �&�+���3����c9&rڀ����b@ �EW+�(��T�o���ź}������tۢu5�\�S�˟#��&)������/���sJ�iјm�:�� ?Ҙ�ZLmڱ7co���(d�^�ﲢ~���������N����m�Z��E? �� �M<�E����~Pӹ�Eۦg���KM��6�W�
E]�ו?M�-�]6��q5}!�������R���u�+�{z+�)��)����_�)e� :��G����)�)�f-�LLe19�� 0�[���9e�e��
-��Z�F��1�"gtD|���d���T��o�}M��?OŪ��W;�f��^���ޚm�5e�&KK
����}�-ΣO�Lu�?
�8N�{�?�ɥ���%�n�TLN؞�:��~�F���������7f�h4��]�b�뙫�7�\� �t�&(������B-v�,٦��_��e����)��h��Ow����i�Uj���~p�������]�������Ҷl�b���]�S��oUx�h�"5��2��Ob�l]��1_2���7HQ�����Ī)�٭z�Y�bc�92ŝ�uW&&wQO]S�/ܯ��eU�&c����^\n����r�ي~Q���.-��鉪��q�oI��U�SL��cݿ��3u�赪��t�4���� �i�:C8jh���3��,�������o���&&#��z;�jj�MV�߾Y�^HQ��v�4�M��s�;vpe�~.�U1���j��i�O����4�:��U�i�U�����:���5}�b17����Eۢ(�7E1�z�� H�UTOէ���5u�������U�c���~
k���5����nmv���w��u wm� 5p�D[�^�}Q� ~�v��Woܮ�뚥r?�Z���#��
��=V/վ'�T��.[U6��&����;��(�ˆ���8ˑV��'�\ӫ�����bv�&N�~���SL1Zz�i�����J���+�Ѧ'�ʕܢ柘�:����� ��Y���v�y����j,�*.s#|o����K��_���g]EZ�$Wbff7W�0lj�T�bj����wg�cnaf0���)��bf'�3,.�n{��댛�X�Z9�]\���o��S�{���EZ�����;�o����������\�E:/r���Tg=��gތ��Nߒ�LF�QVy�|�ך������T�� �1t?x��]�ߥ�e9
=vuW͞esΉ�91zz����(����_��k�;�FQ��(��z�
�[�&,���1L{ku|���\�/�i��T���m3�#�?z������do��j��?16-hٻ�_�1�'�bh��{��lj{*?�G�ʵf��n�33?����(��D{��c��g��Q8����߉�3��\|[T������Q������e�US]S]S�fw�W]5X������������ܚ+�wD�O��SF���s�3m{8�p���M[��=s�Tӿw�p�=��?�-����_�L�����2_������ݵ{�f��O�&�� j�j�U4�:+kZ=M�=��\�g�.���Wj��uD�;b&'/�Ѱ��j��g`�K^�OE��q��bim�]E�7uMQ��v�LT�k
��?��K\���YY���Qf=��:~�g���=���[� Kt~Χ���h�`mZ��?y�<����Vi�pd� ի�ٮ.[��S�iQ��4�f�� �q,����&����:�dƩ`�����\kh���5���n�'�&z�� �]^��Wb�3��7n߽�# ��X*��2�#,��^�[�ڳ1U�oI����eQϣ���-N_O���|���1]��b���~i۔�g��K�+7j�U�5zۺ���"�#�L'E��'?��?���v�a���7���������{/��Ϳ���iZ��L^��7�L���l[�����f���o�����r��0���wS35L�������&N�E��s�t����0|}����:o�OE�4^��\g
;����Z�;�uK��F��i��o�b7���{��c�c@h�<�4[���l����F
�LS�[�K�j��jj��S�7��f&#uz���+�����b����~�k��n�ji���n��%����\Ɛ�MTe����9L��͉�Mܯ��>S����]�߫}<�t��~B�v����#�B�Z���Ѧ�US����̲��j�j�w���[A`��w1v�M�}ئ��S;&g�pv���v�{��.ir_F���;v��v��Hcr���ʪ�:�ι������ꚩ�s�˥�k�vh�n��߹w��� �� �њ<��
������;�e�ٍ_���-��w�Fs��33�~ 6o@ *^�ct��4wu�~�ry�X��u���M��~�o�?o��E�w%�w��To��}��Wn~���6{]���?Gj�_��~ꩧ��^�u���cOU����n�y/۽�c|��l�B�q��6y���6r��F���m��۞mv*��v��UD�h�����GV�2��M_��U���FK`6* ������m�~7Ww�x��љ�QDMTU1�]7:&���3314ۦb��fi��/h{C��-��iM+r(�Dk���"6��ꈍ���W~����e�v3cvǔ���'�;3��)�Qͪ-��tL�W��WԷ��뮭�ͦ��}c�����;V��m�h��UX�uۚ,u��ꚩ��{tǾj����6�El'�!Ɇ�iv?b0ֱ��$o�(������u۵վ��*��Ꙫ~2�O���� �h{Qv�>��p�m��W*��UƸ�S�[3�����Y��~j�0vK`v`�_����6O?j�;EoO�ήdG:g�3�fz��s\ݽT�T활�~�-�DDekva��E����6{Of�GEoQOΞ|O6c��'��f��=qv�SMQ�br��L1��S��
ٍe��G��Q��ȉ��^J��n:���EUL߳�g�WLF�o���cvǓ}��(;
�����}e��������#�3UӾ9��=OW]wo�>�S�cU��o����j�|�\�5ڮ7�nڮ��[�N���L�Q�� =���0�^��a�LU9ܦ>��:��Vy���V��~3��j��@忐���h�c�Z��]��\��6j�"*������wDSM��&bb"����LD�T�������������zSE܊�W������1:�'c��j���S
� 6v#bs����'�ݗ��z��ɛ����S��Q�o�j��2���'w:��Ӿ9�Nv`�c�=��lF���G��Z�v�߾��L��r�^��WT�UUO\�T����G�[x���r���� �6�����TN�X�=uSF���kv.ܙ��O�� �R?<�������
z+
_�\,�1��������M?H���K��XX�k�O����F� {o�f9M���m�>5����gv����TLMm��(�)����*�%�.��N�=��r{�Ss_��oSM3M:�%{�Ʀ��s鉊�7�k��;��m����ɭ����y[��� �'z4� �:��5�M{�{��ٵr&~�>��i}���@��N�Ѣ�5� e�LS1;)�:��>����>�j��/������� �
r` ��ֿS��E�����UF�I�o�v��o���XvL�Q��k��}Q���W��T|�Φ�ۿ�5:{:/EbqѶݺ�� ƙ���=���/O6Kf����}��[�z&�O��S��jͺh��S
`~H\�]����Ω��~�;]�FQ� ( ��ݚ���f6C3o�h3z
F;UN�}��ꢯ�T���ܮ�qr��TNq?I���q����Z���貴�u�:��j�~���U6�G��a�yM�F3��Pq���m�^V�1�ښ�n� �������)�����r��LO����ܮi�Hl� ��[���� '����;W��?}��ُ�vq����v����']��k#���߱]7m�������)�1X*vܷ]1������]˔���z�(`3x���c��~/h2�K:�-��;7h����TJ��F�*�T�\e1�a�m T 3��v��;G��t�%�v�����TMu��)�ej(��QE�Ψ�c��T���y_�[G٫j�vc�~�3�mK�84z�vR�Y��Dk��n�uQ����� 5u9߭ݞ�բ�FV�v�~���8;�w�UW�d�c }���oh95�rk���'�7bŊj��wvj�MT~�7\���4��O�W�k�6c���r���wU�(�O��ۘ���.L{[1���i��{����zy��M��=���V��mk�yM=�.���WEQ���Ǻi��10����v�d;Isb�츩�韔U:�v���[%�h�Tb,�3ꥨ�͐ �� .~Q��� &�~Mt�d���ؿ�ֵ��4ש�U{������}��Q��-����m6Fփ��ש�j.OUS}^���E1�ff""fba��6c����wK�اO��ݘ��h-��+3���j��}n�QQ�� A�w������G�\,�uL욣]o����1�l5�S{3Dz�� r�?E܈ +�6>Ʒ��]�fb��-ݪ)��蚩���^�i;�7�z9)�
5w*�կ�'b'-|'��N���A�����=�,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����I߹�3��6��s|g��,��]O����?'��7�6r�]oS��l�� i��Z���:�_kW����}�-G��Χ��:
�����tI߹�3�������h˚+J٪�u���~US9�>S�Nq3�tռ=qr����X6oi0a���.����<^B�]�j��"�w)�uL|bbbbz�bbwLL4�Vleݩ��uq���^�}~�SkM��m]�����������"#{�� J<�� l�e�����7���\`�tM�� ,�EYo���?��ݱ����<�55g�uzX<���yc��vˏ������˶\}?�y?�N�� ����V�~�W���y��(r���m�O��C�/�l���ȝ/� uk�� ��o�{j�^��6�ip��m.�e���^>����7"�v��u��ff"":�f"7��<���9b�ٶˏ����wv��9�F�r��y�4�]5�VJj�j统n���L�;v�����ڱF7DZ��MTՖ蘈��:��V������՟���?(/�7��rޏCkS��lU� i��]�e��~ίSO���ڟ���W��� ����N���A�����=�ݗ�h���z+EY��t}��~uU9�~s�FQ
�5o\ܮg?��I߹�3��6��s|g����W.�^)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��m'~���C�X/e\��)c �6��s|g��Oc�h���e��fk�b��b�\������Lv�3�r�]H�v&r�����,w����ac�%�$/>kV�s�z� G?�Y {�+�9����K�IZ�T-G�ac�%�$/(�;�,�!ym�U� � ad|%�$�(��#�/y%j}P��0���|�����,w����U�QW�@� s���𗼒����,���䕩�B�z��v;�Y�B����ϒ�V�E^� B Q��G�^�J���>��V��Q��X� g��8��xK>H^E[ez� G?�Y {�+�9����K�IZ�T-G�ac�%�$/(�;�,�!ym�U� � ad|%�$�(��#�/y%j}P��0���|�����,w����U�QW�@� s���𗼒����,���䕩�B�z��v;�Y�B����ϒ�V�E^� B Q��G�^�J���>��V��Q��X� g��8��xK>H^E[ez� G?�Y {�+�9����K�IZ�T-G�ac�%�$/(�;�,�!ym�U� � ad|%�$�(��#�/y%j}P��0���|�����,w����U�QW�@� s���𗼒����,���䕩�B�z��v;�Y�B����ϒ�V�E^� B Q��G�^�J���>��V��Q��X� g��8��xK>H^E[ez� G?�Y {�+�9����K�IZ�T-G�ac�%�$/(�;�,�!ym�U� � ad|%�$�(��#�/y%j}P��0���|�����,w����U�QW�@� s���𗼒����,���䕩�B�z��v;�Y�B�"����R � ���,����Z�T-G���
const canvasWidth = 960;
const canvasHeight = 500;
let prevSec;
let millisRolloverTime;
let nextAlarm;
let debug_is_on = (typeof DEBUG !== 'undefined');
let alarmOverlayCheckbox;
let alarmOverlaySlider;
let defaultAlarmSliderValue=15;
function setup () {
// create the drawing canvas, save the canvas element
var main_canvas = createCanvas(canvasWidth, canvasHeight);
main_canvas.parent('canvasContainer');
alarmOverlaySlider = createSlider(0, 30, defaultAlarmSliderValue);
alarmOverlaySlider.parent("slider1Container")
alarmOverlaySlider.changed(sliderUpdated);
alarmOverlaySlider.mouseMoved(sliderUpdated);
alarmOverlaySlider.touchMoved(sliderUpdated);
alarmOverlayCheckbox = createCheckbox('', false);
alarmOverlayCheckbox.parent('checkContainer1');
alarmOverlayCheckbox.changed(guideChangedEvent);
alarmActiveCheckbox = createCheckbox('', false);
alarmActiveCheckbox.parent('checkContainer2');
alarmActiveCheckbox.attribute('disabled','');
// this is true if debug.js is included
if(debug_is_on) {
debug_setup();
}
turn_off_alarm();
}
function sliderUpdated() {
defaultAlarmSliderValue = alarmOverlaySlider.value();
// print("Updated defaultAlarmSliderValue to " + defaultAlarmSliderValue)
}
function guideChangedEvent() {
let alarmIsOn = alarmOverlayCheckbox.checked();
if(alarmIsOn) {
turn_on_alarm();
}
else {
turn_off_alarm();
}
redraw();
}
function turn_on_alarm() {
// disable slider
alarmOverlaySlider.attribute('disabled','');
nextAlarm = millis() + defaultAlarmSliderValue * 1000;
print("Alarm on: T minus " + defaultAlarmSliderValue + " seconds");
}
function turn_off_alarm() {
// enable slider back to default
alarmOverlaySlider.value(defaultAlarmSliderValue);
alarmOverlaySlider.removeAttribute('disabled');
alarmOverlayCheckbox.checked(false);
alarmActiveCheckbox.checked(false);
print("Alarm now off")
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;
turn_off_alarm();
}
else if (millis_offset < 0) {
alarm = 0;
alarmOverlaySlider.value(alarm);
alarmActiveCheckbox.checked(true);
}
else {
alarm = millis_offset / 1000.0;
alarmOverlaySlider.value(alarm);
alarmActiveCheckbox.checked(false);
}
}
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');
}