17.1.MDDN242 PS1

.block

license: mit

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

README.md

PS1 MDDN 242 2017

Sun Clock

My first thought was to use a sundial as inspiration, because I thought it would be interesting to use one of the earliest ways to tell time as inpiration for a, more modern, software clock.

What I found in my research was that sundials only have a range of around 12 hours, this was key in designing my clock because I wanted it to be a 24hr clock with a clear separation between night and day. Sun clock is separated into two halves, the top half starts at 'sunrise' and finishes at 'sunset'. I roughly timed this and set it as 6am to 6pm. The bottom half is night and starts just after 6pm and cycles through to just before 6am.

I ran into a few obstacles in my coding, first with getting my arcs to move, and then with splitting my clock into two sets of arcs. After I recieved help for both, I was able to tailor it to fit my design and thinking. The last hurdle was in coding the alarm, the way I have done it means that my clock code is repeated a few times. I did try to tidy it up and create a separate function so I could on draw_clock, however, I couldn't do it without breaking my code. This will be something I work on as the trimester goes on.

clock.js

 /*
 * us p5.js to draw a clock on a 960x500 canvas
 */ 
function draw_clock(hour, minute, second, millis, alarm) {
  background(61, 61, 61);
  fill(255);
  noStroke();
 //colour variables
 //6am to 6pm (day)
  var h = color(253, 235, 1);
  var m = color(248, 214, 43, 200);
  var s = color(247, 200, 46, 200);
  var mil = color(251, 255, 143, 200); //pale yellow
 //6pm to 6am (night)
  var h2 = color(57, 83, 164);
  var m2 = color(62, 94, 171, 200);
  var s2 = color(75, 111, 182, 200);
  var mil2 = color(149, 185, 244, 200);
  
 //arc position variables
  var x = 480;
  var y = 250;
 //I struggled on how to make me arc move, Jdoglamp's code helped me with that and I changed it to fit my own design and thinking
  var minutes = map(minute, 0, 59, 0, 180);
  var seconds = map(second, 0, 59, 0, 180);
  var arc_millis = map(millis, 0, 999, 0, 180);


 //START OF ALARM
 if(alarm == 0){
 	if(second % 2 == 0){
 //day alarm part1
 //background(124, 124, 124);
 if((hour>=6) && (hour<18)){
  var hours = map(hour, 6, 18, 0, 180);
 if(hours > 0){
  fill(h2);
  arc(x, y, 450, 450, radians(180), radians(180+hours));
}
  fill(m2);
 if(minutes > 0){
  arc(x, y, 350, 350, radians(180), radians(180+minutes));
}
  fill(s2);
 if(seconds > 0){
  arc(x, y, 250, 250, radians(180), radians(180+seconds));
}
  fill(mil2);
 if(arc_millis > 0){
  arc(x, y, 100, 100, radians(180), radians(180+arc_millis));
}
 //blue part of the clock bellow
 //swapped to yellow
  fill(h);
  arc(x, y, 450, 450, 0, PI); 
  fill(m);
  arc(x, y, 350, 350, 0, PI);
  fill(s);
  arc(x, y, 250, 250, 0, PI);
  fill(mil);
  arc(x, y, 100, 100, 0, PI);
}

 //night alarm part1
 else{
  var night;
 if (hour > 17) {
    night = map(hour, 18, 23, 0, 90);
}
 else if(hour <= 5){
    night = map(hour, 0, 5, 90, 180);
}
  fill(h);
 if (night > 0) {
    arc(x, y, 450, 450, 0, radians(night)); 
}
  fill(m);
if(minutes > 0){
    arc(x, y, 350, 350, 0, radians(minutes));
}
  fill(s);
if(seconds > 0){
    arc(x, y, 250, 250, 0, radians(seconds));
}
  fill(mil);
if(arc_millis > 0){
    arc(x, y, 100, 100, 0, radians(arc_millis)); 
}
 //originally yellow part
 //swapped to blue
   fill(h2);
   arc(x, y, 450, 450, PI, 0);
   fill(m2);
   arc(x, y, 350, 350, PI, 0);
   fill(s2);
   arc(x, y, 250, 250, PI, 0);
   fill(mil2);
   arc(x, y, 100, 100, PI, 0);
 }
 	}
 	else {
 if((hour>=6) && (hour<18)){
  var hours = map(hour, 6, 18, 0, 180);
 if(hours > 0){
  fill(h);
  arc(x, y, 450, 450, radians(180), radians(180+hours));
}
  fill(m);
 if(minutes > 0){
  arc(x, y, 350, 350, radians(180), radians(180+minutes));
}
  fill(s);
 if(seconds > 0){
  arc(x, y, 250, 250, radians(180), radians(180+seconds));
}
  fill(mil);
 if(arc_millis > 0){
  arc(x, y, 100, 100, radians(180), radians(180+arc_millis));
}
 //blue part of the clock bellow
  fill(h2);
  arc(x, y, 450, 450, 0, PI); 
  fill(m2);
  arc(x, y, 350, 350, 0, PI);
  fill(s2);
  arc(x, y, 250, 250, 0, PI);
  fill(mil2);
  arc(x, y, 100, 100, 0, PI);
}

 //(night) 
 else{
  var night;
 if (hour > 17) {
    night = map(hour, 18, 23, 0, 90);
}
 else if(hour <= 5){
    night = map(hour, 0, 5, 90, 180);
}
  fill(h2);
 if (night > 0) {
    arc(x, y, 450, 450, 0, radians(night)); 
}
  fill(m2);
if(minutes > 0){
    arc(x, y, 350, 350, 0, radians(minutes));
}
  fill(s2);
if(seconds > 0){
    arc(x, y, 250, 250, 0, radians(seconds));
}
  fill(mil2);
if(arc_millis > 0){
    arc(x, y, 100, 100, 0, radians(arc_millis)); 
}
 //yellow part of the clock on top
   fill(h);
   arc(x, y, 450, 450, PI, 0);
   fill(m);
   arc(x, y, 350, 350, PI, 0);
   fill(s);
   arc(x, y, 250, 250, PI, 0);
   fill(mil);
   arc(x, y, 100, 100, PI, 0);
 } 	}

}

 //if alarm !== 0, NORMAL CLOCK
 else { 
 //(day) from 6am to 6pm
 if((hour>=6) && (hour<18)){
  var hours = map(hour, 6, 18, 0, 180);
 if(hours > 0){
  fill(h);
  arc(x, y, 450, 450, radians(180), radians(180+hours));
}
  fill(m);
 if(minutes > 0){
  arc(x, y, 350, 350, radians(180), radians(180+minutes));
}
  fill(s);
 if(seconds > 0){
  arc(x, y, 250, 250, radians(180), radians(180+seconds));
}
  fill(mil);
 if(arc_millis > 0){
  arc(x, y, 100, 100, radians(180), radians(180+arc_millis));
}
 //blue part of the clock bellow
  fill(h2);
  arc(x, y, 450, 450, 0, PI); 
  fill(m2);
  arc(x, y, 350, 350, 0, PI);
  fill(s2);
  arc(x, y, 250, 250, 0, PI);
  fill(mil2);
  arc(x, y, 100, 100, 0, PI);
}

 //(night) 
 else{
  var night;
 if (hour > 17) {
    night = map(hour, 18, 23, 0, 90);
}
 else if(hour <= 5){
    night = map(hour, 0, 5, 90, 180);
}
  fill(h2);
 if (night > 0) {
    arc(x, y, 450, 450, 0, radians(night)); 
}
  fill(m2);
if(minutes > 0){
    arc(x, y, 350, 350, 0, radians(minutes));
}
  fill(s2);
if(seconds > 0){
    arc(x, y, 250, 250, 0, radians(seconds));
}
  fill(mil2);
if(arc_millis > 0){
    arc(x, y, 100, 100, 0, radians(arc_millis)); 
}
 //yellow part of the clock on top
   fill(h);
   arc(x, y, 450, 450, PI, 0);
   fill(m);
   arc(x, y, 350, 350, PI, 0);
   fill(s);
   arc(x, y, 250, 250, PI, 0);
   fill(mil);
   arc(x, y, 100, 100, PI, 0);
 }

 }

 
   
}

debug.html

<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src=".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="sketch.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>

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="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="clock.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
        </div>
    </div>
</table>
</body>

purview.json

{
  "commits": [
    {
      "sha": "043b967d53edb3884c835bdd07b034377fa3474a",
      "name": "final"
    },
    {
      "sha": "998aba9c51c9054ca80891e237c1f7d77e1e1209",
      "name": "clock_alarm"
    },
    {
      "sha": "a00863bb06453edd927f5296331801f085efb747",
      "name": "original_clock"
    },
    {
      "sha": "8fb42fde9f6e240a2edf10368030694dc909e2cf",
      "name": "maeda_clock"
    },
    {
      "sha": "f041107b6ace97143c76fe2c020f8423e488e506",
      "name": "sketch"
    }
  ]
}

sketch.js

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


  draw_clock(H, M, S, mils, alarm);
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
}

thumbnail.png