17.1.MDDN242 PS1

._preview.jpg

._README.md

._thumbnail.png

.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

##FINAL - alarm API in this version i am using the alarm API that was provided, i used the given API to bascially re-create my own clock from before, however where as mine is programable, this version and a count down from 20, when it reached 15 the alarm will begin and it will go till 0, or can e de-activated with the on screen button

this is my final sketch of what I have made for PS1, i decided to wanted to make a watch that is based off something that apple would possibly use on there apple watches, something that is simple to read and yet is eligant to look at.

the colors are bases of the theme that the clock faces look like cogs, but in a very simple fashion, and then i took that theme and matched it with mech based games, and the colour theme they used is generally white and orange, with some other accent colours. i made the large signal and animation red, as a sign of "look this way something is happening", and everything else either greys or orange, so that there is a unity in the colour choices.

background.png

clock.js

/*
 * us p5.js to draw a clock on a 960x500 canvas
*/

//local copy **
var CanVasHeight = 500;
var CanVasWidth = 960;
var alarmVal = 0;


//to do 
//add in the new font-BUGGED
//add in background of some sorts-BUGGED

function draw_clock(hour, minute, second, millis, alarm) {
  //de-bug for time, manual time input
  //min values
  // hour = 0;
  // minute = 0;
  // second = 0;
  // millis = 999;
  //max values
  // hour = 23;
  // minute = 59;
  // second = 59;
  // millis = 999;

  // background(255); 
  textSize(50);
  textAlign(CENTER);
  text(hour + "h", 390, 375);
  text(minute + "m", width/2, 155);
  textSize(30);
  text(second + "s", 585, 320);
  textSize(20);
  text("h",530, 413);
  text("m",530, 443);
  text("s",530, 473);



  //time de-bug
  // text("Hour: "   + hour, 10, 22);
  // text("Minute: " + minute, 10, 42);
  // text("Second: " + second, 10, 62);
  // text("Millis: " + millis, 10, 82);

  //mapping to growth and srink of octogons
  var hourBarWidth   = map(hour, 0, 23, width/8, height/8);
  var minuteBarWidth = map(minute, 0, 59, width/8, height/8);
  var secondBarWidth = map(second, 0, 59, width/8, height/8);
  var millisBarWidth = map(millis, 0, 1000, width/3, height/3);

  //manual alarm varibles input
  var Ahours = Hinput.value();
  var Aminutes = Minput.value();
  var Aseconds = Sinput.value();
  var alarmSig = false;
  
  //more de-bug
  //print(alarmVal);
  //print(alarm);
  //print("_______");
  //print(Hinput.value());
  //print(Minput.value());
  //print(Sinput.value());
  //print(Ahours);
  //print(Aminutes);
  //print(Aseconds);
  //print("_______");

  var secondBarWidthChunky  = map(second, 0, 60, 0, width);
  var secondsWithFraction   = second + (millis / 1000.0);
  var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, width/12, height/12);

  noStroke();

  //teachers alarm code
  if(alarm > 0){  //alarm countdown panel
    var a = parseInt(alarm)
    fill(100,50);
    polygon(325, 85,50,8);
    fill(0);
    text("countdown",325, 85);
    text("to alarm",325, 102);
    text(a ,325, 117);
  if(alarm < 15){  //flash then the alarm = 0 
      fill(255,0,0);
      polygon(435, 250, millis, 8);
    }
  }


  //custom alarm code, looks for change in the input then activates the look
  if(Ahours != 0 || Aminutes != 0 || Aseconds != 0 || alarm > 0){ //alarm state on 
    textSize(20);
    fill(153,0,0,99);
    polygon(630, 195,40,8);
    fill(0);
    text("alarm:", 630, 195);
    text("on", 630, 215);
  }else{  //alarm state off
    textSize(20);
    fill(153,51,0,99);
    polygon(630, 195,40,8);
    fill(0);
    text("alarm:", 630, 195);
    text("off", 630, 215);
  }

  //alarm code- my own, if all values match the actual time -trigger
  if(hour == Ahours && minute == Aminutes && second == Aseconds ){
    alarmVal = alarmVal+1;

  }
  //main trigger for alarm
  if(alarmVal > 0){
    fill(255,0,0);
    polygon(435, 250, millis, 8);
  }


  //hours
  fill(0,0,0,99); 
  polygon(390, 360, hourBarWidth, 8);

  //minutes
  fill(102,102,102,90);
  polygon(width/2, 140, minuteBarWidth, 8);

  //seconds
  fill(51,51,51,99);
  polygon(585, 310, secondBarWidthSmooth, 8);

  //alarm cluster
  fill(204,102,0,99);
  polygon(545, 435, 50, 8);

  //milliseconds
  fill(204,102,0)
  scale(0.2);
  polygon(1520, 970, millisBarWidth, 8);


}
function polygon(x, y, radius, npoints) {
  var angle = TWO_PI / npoints;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius;
    var sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

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

HelveticaNeue.ttf

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>

preview.jpg

purview.json

{
  "commits": [
    {
      "sha": "627fbb74ee76b066a594f739fe3430ee0d83b4e7",
      "name": "final_own_alarm"
    },
    {
      "sha": "9f541e6e7d47e8ca26b73549e2e40f89b2dfb9b2",
      "name": "final_API_alarm"
    },
    {
      "sha": "904c3e7a0a5a4f1d03bd23c09b2a1bb420e775bb",
      "name": "pre_final"
    },
    {
      "sha": "a89f7f84a82297345aa6052aae02e45f93fc7090",
      "name": "clock_alarm"
    },
    {
      "sha": "f83791d3e28b48c8b717bcd01c5b640385351cd8",
      "name": "original_clock"
    },
    {
      "sha": "a645578e211bb41c0fd9fa3d18a2960a9cd4086d",
      "name": "maeda_clock"
    },
    {
      "sha": "b1f8790d762515fb9a44a1b0c01299dc4c6f44f3",
      "name": "sketch"
    }
  ]
}

sketch.js

var canvasWidth = 960;
var canvasHeight = 500;

var prevSec;
var millisRolloverTime;
var nextAlarm;
var debug_is_on = (typeof DEBUG !== 'undefined');
var Hinput;
var Minput;
var Sinput;
var button;

var font;
var bg; 
function setup () {

  bg = loadImage("background.png"); //background image loader
  
  font = loadFont("HelveticaNeue.ttf"); //font loader
  

  Hinput = createInput();
  Hinput.position(555, 403);
  Minput = createInput();
  Minput.position(555, 433);
  Sinput = createInput();
  Sinput.position(555, 463);

  button = createButton('de-activate');
  button.position(440, 473);
  button.mousePressed(snooze);
  

  // 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;
  background(bg); //set background
  textFont(font); //set font

  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);
  }
}
function snooze(){
  alarmVal = 0;
}

thumbnail.png