uwcc/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    PS1 MDDN 242 2019

Example Markdown Subheading

REPLACE ALL TEXT IN THIS FILE.
Here is where you write a short, coherent description of an idea for your clock.

  
## clock.html
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/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>
<br>
<a href="part1.html">part1</a>
<a href="part2.html">part2</a>
</body>

## clock.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
}

## 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, 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);

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

## index.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="part2.html">part2</a>
<a href="clock.html">clock</a>
</body>

## maeda_clock.js
const spacing = 70;

// Update this function to draw you own maeda clock on a 960x500 canvas
function draw_clock(obj) {
  fill(0);
  background(0);
  strokeWeight(5);

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

## 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="part2.html">part2</a>
<a href="clock.html">clock</a>
</body>

## part2.html
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.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>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
        </div>
    </div>
</table>
<br>
<a href="part1.html">part1</a>
<a href="clock.html">clock</a>
</body>

## preview.jpg

      
    Raw
  

              preview.jpg
            
          
## runner.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);
    }
  }

  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

      
    Raw
  

              sketch.jpg
            
          
## thumbnail.png

      
    Raw
  

              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');
}
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/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>
	<br>
	<a href="part1.html">part1</a>
	<a href="part2.html">part2</a>
	</body>
	/*
	* 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
	}
	/*
	* 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, 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);

	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>
	<style> body {padding: 0; margin: 0;} </style>
	</head>
	<body style="background-color:white">
	<img src="sketch.jpg" width="960" height="500"/>
	<br>
	<a href="part2.html">part2</a>
	<a href="clock.html">clock</a>
	</body>
	const spacing = 70;

	// Update this function to draw you own maeda clock on a 960x500 canvas
	function draw_clock(obj) {
	fill(0);
	background(0);
	strokeWeight(5);

	stroke(255, 0, 0);
	for(let i = -2spacing; i <= 2spacing; i = i+spacing) {
	ellipse(width/2, height/2+i, 45, 45);
	}

	strokeWeight(3);
	stroke(255, 255, 0);
	for(let i = -2spacing; i <= 2spacing; i = i+spacing) {
	ellipse(width/2, height/2+i, 40, 40);
	}

	stroke(0, 0, 255);
	for(let i = -2spacing; i <= 2spacing; i = i+spacing) {
	ellipse(width/2, height/2+i, 30, 30);
	}
	}
	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');
	}