Assignment 1: Time-based Media Jierui Zhuge

.block

license: mit

README.md

PS1 MDDN 242 2021

THIS IS YOUR README

Update this file as you go along to record your progress. This is my fifth attempt at Git, and I've always failed before. this is my first save in github. this is my first change in sketch. In the first week, I kept testing the use of terminal, but I failed five times. For the sixth time, I thought I succeeded, but my terminal also stopped at the step of clone； I tried to update the block with GitHub Desktop, but it also failed; My block cannot be updated; In the first week, I tried to draw a sketch, which is a rough look of my clock. Still worried about the block; Today I saw John Maeda: 12 O 'Clocks; I'm going to look for one of them to imitate a maeda clock; I drew the numbers I wanted on the scratch paper and calculated the coordinates of each rect; The green background is selected, and finally a frame is added on the number to make the number more solid. I think we can simulate a general position first, and then adjust the coordinate position one by one. The final Maeda Clock is static; I tried a lot of color matching, I think we must be patient to adjust the coordinates, because it is 3:40 in the afternoon; So I'm going to take these three numbers and I'm going to draw some coordinates on paper; Sublime is repeatedly tweaked for things like position and color; I always forget what line I wrote because there are too many ellipses and other shapes, so it's a good habit to mark it in time. I made several original clocks today, but the effect was not good. Maybe there were only a few graphics on the dial, which seemed very rigid. I decided to give up adding letters on the clock； My initial idea was to replace the 1, 2, 4, 5, 7, 8, 10 positions on the clock with Monday through Sunday. However, since 11 is difficult to achieve without the abbreviation of the day and the letters, I decided to use other elements and highlight the numbers 12, 3, 6, and 9; I made the second hand look like a bee, and the whole clock simulates part of the bee's day's work; As for alarm clock, I don't quite understand it. My clock is in the second hand (bee), and the color will change after a circle. In the beginning, I wanted to distinguish AM from PM. Clicking Alarm Set with the mouse will change to a contrasting color; In addition, I decided to change the numbers to 0, 3, 18, 22 in the final clock; The reason is that I think the whole picture will become very rigid if the time is set at 21. Besides, I feel that the bees go to bed a little earlier at 9 o 'clock； Today, the color has been changed several times on the basis of the original clock. I feel that the whole clock is very empty and rigid. I searched some JS code colors on the Internet; Found that there is no corresponding display of many colors, need to try one by one, very troublesome; I searched some JS code colors on the Internet; Found that there is no corresponding display of many colors, need to try one by one, very troublesome; As for my final clock, I refer to my original. I think my elements are very simple and monotonous, just some basic graphics. The aspects I wanted to develop are also here, so I plan to continue with my bee element. My second hand is a bee, and to represent the time in the AM range, I added a flower element in place of the number 3 to indicate that it was daytime and the bees were working (even though I didn't know if the bees were working at 3am); Then 18 indicates that the honey has been placed in the honey jar, which means the bees are ready to rest. The number 22 is the time for a bee to rest. I didn't think of a pattern to decorate it at the moment, so I used a contrasting color with the overall color style, which had no practical meaning. The number 0 is the beginning of a bee's day. Then I also rematched the colors of the clock and the background to make them look more compatible. The final circle element simulates the overhead profile of a honeycomb. Make the whole picture less monotonous. Because I could not download the CC2 file again, so I copied and edited the folder of alarm and final, and finally put it in the ZIP folder. There are three folders, Sketch, Maeda and Original Clock are in one folder, and the rest of Alarm and Final are in two separate zip folder；

_purview.json

{
  "commits": [
    {
      "sha": "dae207f52da4bc2fd8137cf2fed1f0eadb158784",
      "name": "final"
    },
    {
      "sha": "8d0e4589a833412c873d5c5b432c8763ddb9eb3f",
      "name": "alarm"
    },
    {
      "sha": "cf6a4a9124bbe9838c81c3e721d0d73dabc20cd1",
      "name": "sketch_Maeda_original"
    }
  ]
}

clock.html

<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>

clock.js

/*
 * use p5.js to draw a clock on a 960x500 canvas
 /*
 * 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

    // YOUR MAIN CLOCK CODE GOES HERE
    background(50); //  beige
    fill(200); // dark grey
    textSize(40);
    textAlign(CENTER, CENTER);
   
    text("YOUR MAIN CLOCK CODE GOES HERE", width/2, height/2);
}



function draw_clock(obj) {


    let hours = obj.hours;
    let minutes = obj.minutes;
    let seconds = obj.seconds;
    let millis = obj.millis;
    strokeWeight(3);
    background(210,180,140);//background Tan
    fill(218,165,32);
    //rect(width/2,0,width,height);
    angleMode(DEGREES);

    let SecondFraction = map(seconds, 0, 60, 0, 0.9);
    let MinuteFraction = map(minutes, 0, 60, 0, 0.9);
    let SecondAngle = map(seconds+(millis/1000), 0, 60, 0, 360);
    let MinuteAngle = map(minutes+SecondFraction, 0, 60, 0, 360);
    let HourAngle = map(hours+MinuteFraction, 0, 24, 0, 720);
    translate(width/2,height/2);

    //
    noFill();
    stroke(255, 119, 0);
    strokeWeight(2);

    ellipse(0,0,225,225);
    ellipse(0,0,260,260);
    ellipse(0,0,370,370);

    ellipse(0,0,480,480);


    push();//Hour
    rotate(HourAngle);
    fill(218,165,32);
    rect(-8,-140, 16, 140);
    pop();

    push();//Minute
    rotate(MinuteAngle);
    fill(218,165,32);
    rect(-8,-200, 16, 200);
    pop();

    push();//Second bee
    rotate(SecondAngle);
    fill(0);
    ellipse(80, 85, 17, 2);
    ellipse(75, 80, 2, 17);
    ellipse(85, 80, 2, 15);

    fill(253,245,230)
    noStroke();
    ellipse(70, 70, 23, 23);
    ellipse(90, 90, 23, 23);
    
    fill(240,230,140)
    ellipse(80, 80, 23, 23);
    pop();


    //
    

    fill(135,0,0,250);//circle of 22
    ellipse(-250, -70, 50, 50);
    fill(255, 0, 0, 160); // Red color
    ellipse(-215, -90, 100, 100); // Red circle

    //fill(0, 255, 0, 160); // Green color
   //ellipse(228, -16, 135, 135); // Green circle of flower

   //
    strokeWeight(0); // Stroke weight to 20 pixels
    fill(255, 0, 0, 140); //
    ellipse(0, 0, 150, 150);
    fill(135,206,235);
    ellipse(0, 0, 90, 90);

    strokeWeight(1)
    stroke(255)
    stroke(255, 180, 154,120)
    strokeWeight(0.2)

        //flower
    strokeWeight(0);

    fill(176,224,230)
    ellipse(240, -40, 35, 35);
    ellipse(210, -35, 35, 35);
    ellipse(200, -10, 35, 35);
    ellipse(220, 5, 35, 35);
    ellipse(242, 1, 35, 35);
    ellipse(250, -20, 35, 35);

     //bee2
    fill(253,245,230)
    ellipse(215, -45, 23, 23);
    ellipse(245, -40, 23, 23);
    fill(240,230,140)
    ellipse(230, -45, 23, 23);
    
    strokeWeight(5); // Stroke weight to 10 pixels
    fill(255,250,240); // green color
    //ellipse(228, -16, 150, 150); // circle of 3
    ellipse(225, -17, 32, 32); // circle1 of 3,flower
    strokeWeight(1);
    fill(205,133,63);//Peru
    ellipse(5, 170, 70, 20);//fengmiguan
    //ellipse(5, 200, 90, 20);
    ellipse(5, 180, 80, 20);
    ellipse(5, 190, 90, 20);
    ellipse(5, 230, 60, 20);
    ellipse(5, 220, 70, 20);
    ellipse(5, 210, 90, 20);
    ellipse(5, 200, 98, 15);


    fill(0);//centre
    ellipse(0, 0, 23, 23);

    strokeWeight(11); // Stroke weight to 11 pixels
    //fill(0,128,128); // text CornflowerBlue


    push();
    rotate(0);
    textSize(40);
    ellipse(12, -213, 60, 60); // Blue circle location
    fill(220,20,60); // color of zero
    text("0", 0, -200);
    pop();

    push();// 3 number
    rotate(0);
    noStroke();
    fill(127,255,170);
    textSize(80);
    text("3", 250, 20);//loction
    pop();

    push();
    rotate(0);
    textSize(60);

    text("18", -30, 220);//location of 18
    pop();

    push();
    rotate(0);
    noStroke();
    textSize(50);
    fill(255,228,181);
    text("22", -250, -70);
    pop();






}


// do not alter or remove this function
function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }




}

clock_balls.js

/*
 * 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);
}

clock_bars.js

/*
 * 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);        
}

debug.html

<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>

debug.js

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")
}

index.html

<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>

maeda_clock.js

// Update this function to draw you own maeda clock on a 960x500 canvas
function draw_clock(obj) {
  // YOUR MAIN CLOCK CODE GOES HERE
  background(46,139,87); // SeaGreen
  fill(175,238,238);
  strokeWeight(5);

//3
  rect(95,180-30,30,30);
  rect(125,150-30,75,30);
  rect(200,175-30,30,70);
  rect(125,250-30,75,30);
  rect(200,275-30,30,70);
  rect(125,350-30,75,30);
  rect(95,320-30,30,30);

//4
  rect(560, 130, 30, 180);
  rect(480, 240, 140, 30);
  rect(480, 210, 30, 30);
  rect(510, 190, 30, 30);
  rect(540, 160, 30, 30);

//0
 rect(700,140-10,75,30);
 rect(775,160,30,125);
 rect(700,285,75,30);
 rect(670,160,30,125);



}

part1.html

<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>

part2.html

<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>

preview.jpg

runner.js

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);
  }
}

sketch.jpg

thumbnail.png

z_purview_helper.js

// 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');
}