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

Infinite Clock

Controls: Scroll - zoom

This is a clock that is made up of many clocks. It is animated in that the inner clocks will change first, and will propogate towards the largest clock in equal timings till the actual second has been reached which will coincide with the final outer clock. The clock also uses a palette generator every second to generate a pleasing color, and I have code that keeps the clock a good aspect ratio. Try zooming in to see the individual inner clocks.

My very first idea was to have the clock be an earth changing. I decided against this as I thought it would be too simplistic and I noticed others in the class were also doing designs around space etc, and wanted to make something unique. My next idea was to have the clock as it currently is, but instead of the time changing, it would zoom in. I decided against this as I found it quite hard to calculate where we would be based on the first rendering of the clock, and it was mentioned to me that it would be quite hard to read the time on this clock, nevertheless it would look interesting though. I decided to have the time coming out from the inner clocks as I wanted to have some animation to show the time was moving inbetween seconds, and thought it would look quite interesting and give the viewer a clear indication that the inner blocks are also made out of clocks too. I went through many iterations of colors, eventually deciding to use a library to change the color as it set very nice saturation values etc. I also ended up using a white background as it makes it look more minimalist where the clock is already quite busy visually. The clock also has padding around every character, which allows the user to see immediately that there are smaller numbers inside the large ones. I originally had everything touching as I thought it would be necessary to read the higher up clock, but the scale of it allows some level of padding still allowing visibility. I enjoyed pushing myself technically in this project, but want to see myself being more ambitious in a design sense, with more time in the concept phase thinking of elegant ways things could look instead of diving into the fun code implementation straight away.

clock.js

/*
 * us p5.js to draw a clock on a 960x500 canvas
 */ 
function draw_clock(hour, minute, second, millis, alarm) {
  background(0); // light gray background
  strokeWeight(8); // Stroke weight to 8 pixels
  angleMode(DEGREES);
  
  textSize(200)
  textAlign(CENTER, CENTER);
  angleMode(DEGREES)
  
  translate(width/2, height/2);
  
  var meridiem = "am";
  
  if(12 < hour){
	  hour -= 12;
	  meridiem = "pm";
  }
  
  push();
  var deg = 360*hour/12
  rotate(deg);
  scale(3);
  fill('hsl(' + deg + ', 100%, 40%)');
  text(hour, 0 , 0);
  pop();
  
  push()
  var deg = 360*minute/60
  rotate(deg);
  scale(2);
  fill('hsl(' + deg + ', 100%, 70%)');
  text(minute, 0, 0);
  pop();
  
  push()
  var deg = 360*second/60
  rotate(deg);
  fill('hsl(' + deg + ', 100%, 50%)');
  text(second, 0, 0);
  pop()
  
  push()
  scale(0.2);
  fill("white");
  text(meridiem, 0, 0);
  push();
}

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="Please.js"></script>
    <script language="javascript" type="text/javascript" src="numbers.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>
	<style type="text/css">
          body {margin:0; padding:0; /* remove top and left whitespace */
          canvas {display:block;}    /* remove scrollbars */
          canvas:focus {outline:0;} /* remove blue outline around canvas */
          .fs {position:fixed; bottom:20px; right:20px;}
          #enter {display:block;}
          #exit {display:none;}
        </style> 
    <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="Please.js"></script>
    <script language="javascript" type="text/javascript" src="numbers.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
        </div>
    </div>
</table>
</body>

numbers.js

blocksx = 3;
blocksy = 5;
//padding in between numbers in a block (1 and 2 for 12)
charPadding = 0.05;
charPaddingInv = 1-charPadding;

//list of numbers 0 - 9 where each number is a list of the start location, and the width, height.
//[x1,y1, w,h]
numbers = [
	[[0,0,3,1], [0,1,1,2], [2,1,1,2], [0,3,3,1], [0,4,3,1]],
	[[1,0,2,1], [0,1,3,1], [1,2,1,3], [2,2,1,3]],
	[[0,0,2,1], [2,0,1,3], [1,1,1,3], [0,2,1,3], [1,4,2,1]],
	[[0,0,3,1], [1,1,2,1], [0,2,3,1], [1,3,2,1], [0,4,3,1]],
	[[0,0,1,2], [2,0,1,2], [0,2,1,2], [1,2,1,2], [2,2,1,3]],
	[[0,0,1,3], [1,0,2,1], [1,1,1,3], [2,2,1,3], [0,4,2,1]],
	[[0,0,1,2], [1,0,2,1], [0,2,1,3], [1,2,1,3], [2,2,1,3]],
	[[0,0,3,1], [1,1,1,2], [2,1,1,2], [1,3,1,2], [2,3,1,2]],
	[[0,0,1,2], [1,0,2,1], [2,1,1,3], [0,2,2,1], [0,3,1,2], [1,4,2,1]],
	[[0,0,3,1], [0,1,1,2], [2,1,1,2], [0,3,2,1], [2,3,1,2]]
]

//levels of detail
levels = 2

//draws the individual number
function drawNumber(number, numWidth, numHeight, time, color){
	///inner squares
	var numberVal = numbers[number];
	for (var i = 0; i < numberVal.length; i++) {
		var val = numberVal[i]
		//if hasnt reached lowest level, draw out of more clocks
		if(time.diff < levels){
			push();
			translate(val[0]/blocksx*numWidth, val[1]/blocksy*numHeight);
			var direction = 0;
			//swaps around widths etc for direction
			if(val[2] == 1){
				var widthVal = val[3];
				var width = val[3]/blocksy*numHeight;
				var height = 1/blocksx*numWidth;
				direction += 1 //1 or 3 (vertical)
			} else{
				var widthVal = val[2];
				var width = val[2]/blocksx*numWidth;
				var height = 1/blocksy*numHeight;
			}

			drawBlock(time.next(), widthVal == 3, width, height, direction, color)
			pop();
		}
		else{
			//heres an example of me using map(). I used the matrix calculations cause it fit my uses of recursive levels better, but I placed this here to fit the brief fully.
			//if you look at my other commits, you can see me just doing multiplication do to this same thing in less space
			rect(map(val[0], 0, blocksx, 0, numWidth), map(val[1], 0, blocksy, 0, numHeight), 
				map(val[2], 0, blocksx, 0, numWidth), map(val[3], 0, blocksy, 0, numHeight));
		}
	}
}

//returns a list of digits from a number
function toDigits(num){
	var digits = [];
	while (num > 0) {
	    digits[digits.length] = num % 10;
	    num = parseInt(num / 10);
	}
	digits.reverse();
	return digits;
}

//takes a number and draws its digits using toDigits
function drawDigits(number, charWidth, charHeight, time, color){
	var digits = toDigits(number);
	push();
	while(digits.length < 2){
		digits.unshift(0);
	}
	//padding first
	translate(charPadding*charWidth/2, charPadding*charWidth/2);
	for (var i = 0; i < digits.length; i++) {
		drawNumber(digits[i], charWidth*charPaddingInv, charHeight*charPaddingInv, time, color);
		translate(charWidth, 0);
	}
	pop();
}

//draws a clock block
//direction is a value 0..3 where 0 is horizontal and right way up
function drawBlock(time, showSeconds, width, height, direction, color){
	push();
	//fixes alignment for rotation
	translate(height*direction, 0);
	rotate(90*direction);

	//generate color scheme
	if(time.diff == 0 && !color){
		var scheme = Please.make_scheme(Please.make_color({hue: (360*time.second/60)%360, golden: false, format: 'hsv'})[0], {scheme_type: 'split', format: 'rgb'});
	}

	//change width of each char if fitting seconds in
	if(showSeconds)
		var charWidth = width/6;
	else
		var charWidth = width/4;
	
	if(scheme)
		fill(scheme[1].r, scheme[1].g, scheme[1].b);
	drawDigits(time.hour, charWidth, height, time);
	translate(charWidth*2, 0);
	if(scheme)
		fill(scheme[0].r, scheme[0].g, scheme[0].b);
	drawDigits(time.minute, charWidth, height, time);

	if(showSeconds){
		translate(charWidth*2, 0);
		if(scheme)
			fill(scheme[2].r, scheme[2].g, scheme[2].b);
		drawDigits(time.second, charWidth, height, time);
	}
	pop();
}

//time holder
class Time{
	constructor(hour, minute, second, millisFrac, diff){
		//if seconds is being added, make sure it flows back to mins/hours
		if(60 <= second){
			second = 0;
			minute++;
			if(60 <= minute){
				minute = 0;
				hour = (hour+1)%24;
			}
		}

		this.hour = hour;
		this.minute =  minute;
		this.second = second;
		this.millisFrac = millisFrac

		this.diff = diff || 0;
	}

	//is equal to other time
	equals(time){
		return this.hour == time.hour &&
			this.minute == time.minute &&
			this.second == time.second &&
			this.millisFrac == time.millisFrac &&
			this.diff == time.diff;
	}

	//generate the next level of time (originally was going to be used for recursive zooming)
	next(){
		var newSecond = this.second;

		//add second if millis requires it with the diff
		if(levels-this.diff == this.millisFrac)
			newSecond++;

		return new Time(this.hour, this.minute, newSecond, this.millisFrac, this.diff+1);
	}
}

maxClockWidth = 1000;

border = 10;
//ratio of height is 0.3 to width
heightFrac = 0.3;

//when to redraw
lastTime = null;

function draw_clock(hour, minute, second, millis, alarm) {
	var millisFrac = floor((levels+1)*millis/1000);
	var time = new Time(hour, minute, second, millisFrac);
	if(lastTime == time)
		return;
	else
		lastTime = time;
	
	var pre = Date.now();
	clear();
	noStroke();
	angleMode(DEGREES);
	
	//flashes red on alarm
	var color;
	if(alarm == 0){
		if(second % 2 == 0)
			color = {r: 255, g: 0, b: 0};
		else
			color = {r: 0, g: 0, b: 0};
	}

	//width is smalest of maxWidth, actualWidth or width relative to height
	var blockWidth = min(min(maxClockWidth, width), height/heightFrac);
	//calculate height from calculated width;
	var blockHeight = blockWidth*heightFrac;

	//border and half width
	translate(border+(width-blockWidth)/2, border+(height-blockHeight)/2);
	drawBlock(time, true, blockWidth-border*2, blockHeight-border*2, 0, color);
	
	//if taking more than the update period to load, decreace level (detail)
	if(1000/(levels+1) < Date.now()-pre)
		levels--;
}

//zoom on scroll to see individual clocks
function mouseWheel(event){
	maxClockWidth += event.delta;
}

Please.js

/*!Please JS v0.4.2, Jordan Checkman 2014, Checkman.io, MIT License, Have fun.*/
!function(e,r,a){"function"==typeof define&&define.amd?define([],a):"object"==typeof exports?module.exports=a():r[e]=a()}("Please",this,function(){"use strict";function e(){function e(e,r,a){var o=Math.random;return a instanceof l&&(o=a.random),Math.floor(o()*(r-e+1))+e}function r(e,r,a){var o=Math.random;return a instanceof l&&(o=a.random),o()*(r-e)+e}function a(e,r,a){return Math.max(r,Math.min(e,a))}function o(e,r){var a;switch(e){case"hex":for(a=0;a<r.length;a++)r[a]=F.HSV_to_HEX(r[a]);break;case"rgb":for(a=0;a<r.length;a++)r[a]=F.HSV_to_RGB(r[a]);break;case"rgb-string":for(a=0;a<r.length;a++){var o=F.HSV_to_RGB(r[a]);r[a]="rgb("+o.r+","+o.g+","+o.b+")"}break;case"hsv":break;default:console.error("Format not recognized.")}return r}function n(e){var r=F.HSV_to_RGB(e),a=(299*r.r+587*r.g+114*r.b)/1e3;return a>=128?"dark":"light"}function t(e){var r={};for(var a in e)e.hasOwnProperty(a)&&(r[a]=e[a]);return r}function l(e){function r(){o=(o+1)%256,n=(n+a[o])%256;var e=a[o];return a[o]=a[n],a[n]=e,a[(a[o]+a[n])%256]}for(var a=[],o=0,n=0,t=0;256>t;t++)a[t]=t;for(var l=0,F=0;256>l;l++){F=(F+a[l]+e.charCodeAt(l%e.length))%256;var s=a[l];a[l]=a[F],a[F]=s}this.random=function(){for(var e=0,a=0,o=1;8>e;e++)a+=r()*o,o*=256;return a/0x10000000000000000}}var F={},s={aliceblue:"F0F8FF",antiquewhite:"FAEBD7",aqua:"00FFFF",aquamarine:"7FFFD4",azure:"F0FFFF",beige:"F5F5DC",bisque:"FFE4C4",black:"000000",blanchedalmond:"FFEBCD",blue:"0000FF",blueviolet:"8A2BE2",brown:"A52A2A",burlywood:"DEB887",cadetblue:"5F9EA0",chartreuse:"7FFF00",chocolate:"D2691E",coral:"FF7F50",cornflowerblue:"6495ED",cornsilk:"FFF8DC",crimson:"DC143C",cyan:"00FFFF",darkblue:"00008B",darkcyan:"008B8B",darkgoldenrod:"B8860B",darkgray:"A9A9A9",darkgrey:"A9A9A9",darkgreen:"006400",darkkhaki:"BDB76B",darkmagenta:"8B008B",darkolivegreen:"556B2F",darkorange:"FF8C00",darkorchid:"9932CC",darkred:"8B0000",darksalmon:"E9967A",darkseagreen:"8FBC8F",darkslateblue:"483D8B",darkslategray:"2F4F4F",darkslategrey:"2F4F4F",darkturquoise:"00CED1",darkviolet:"9400D3",deeppink:"FF1493",deepskyblue:"00BFFF",dimgray:"696969",dimgrey:"696969",dodgerblue:"1E90FF",firebrick:"B22222",floralwhite:"FFFAF0",forestgreen:"228B22",fuchsia:"FF00FF",gainsboro:"DCDCDC",ghostwhite:"F8F8FF",gold:"FFD700",goldenrod:"DAA520",gray:"808080",grey:"808080",green:"008000",greenyellow:"ADFF2F",honeydew:"F0FFF0",hotpink:"FF69B4",indianred:"CD5C5C",indigo:"4B0082",ivory:"FFFFF0",khaki:"F0E68C",lavender:"E6E6FA",lavenderblush:"FFF0F5",lawngreen:"7CFC00",lemonchiffon:"FFFACD",lightblue:"ADD8E6",lightcoral:"F08080",lightcyan:"E0FFFF",lightgoldenrodyellow:"FAFAD2",lightgray:"D3D3D3",lightgrey:"D3D3D3",lightgreen:"90EE90",lightpink:"FFB6C1",lightsalmon:"FFA07A",lightseagreen:"20B2AA",lightskyblue:"87CEFA",lightslategray:"778899",lightslategrey:"778899",lightsteelblue:"B0C4DE",lightyellow:"FFFFE0",lime:"00FF00",limegreen:"32CD32",linen:"FAF0E6",magenta:"FF00FF",maroon:"800000",mediumaquamarine:"66CDAA",mediumblue:"0000CD",mediumorchid:"BA55D3",mediumpurple:"9370D8",mediumseagreen:"3CB371",mediumslateblue:"7B68EE",mediumspringgreen:"00FA9A",mediumturquoise:"48D1CC",mediumvioletred:"C71585",midnightblue:"191970",mintcream:"F5FFFA",mistyrose:"FFE4E1",moccasin:"FFE4B5",navajowhite:"FFDEAD",navy:"000080",oldlace:"FDF5E6",olive:"808000",olivedrab:"6B8E23",orange:"FFA500",orangered:"FF4500",orchid:"DA70D6",palegoldenrod:"EEE8AA",palegreen:"98FB98",paleturquoise:"AFEEEE",palevioletred:"D87093",papayawhip:"FFEFD5",peachpuff:"FFDAB9",peru:"CD853F",pink:"FFC0CB",plum:"DDA0DD",powderblue:"B0E0E6",purple:"800080",rebeccapurple:"663399",red:"FF0000",rosybrown:"BC8F8F",royalblue:"4169E1",saddlebrown:"8B4513",salmon:"FA8072",sandybrown:"F4A460",seagreen:"2E8B57",seashell:"FFF5EE",sienna:"A0522D",silver:"C0C0C0",skyblue:"87CEEB",slateblue:"6A5ACD",slategray:"708090",slategrey:"708090",snow:"FFFAFA",springgreen:"00FF7F",steelblue:"4682B4",tan:"D2B48C",teal:"008080",thistle:"D8BFD8",tomato:"FF6347",turquoise:"40E0D0",violet:"EE82EE",wheat:"F5DEB3",white:"FFFFFF",whitesmoke:"F5F5F5",yellow:"FFFF00",yellowgreen:"9ACD32"},i=.618033988749895,u={hue:null,saturation:null,value:null,base_color:"",greyscale:!1,grayscale:!1,golden:!0,full_random:!1,colors_returned:1,format:"hex",seed:null},c={scheme_type:"analogous",format:"hex"},h={golden:!1,format:"hex"};return F.NAME_to_HEX=function(e){return e=e.toLowerCase(),e in s?s[e]:(console.error("Color name not recognized."),void 0)},F.NAME_to_RGB=function(e){return F.HEX_to_RGB(F.NAME_to_HEX(e))},F.NAME_to_HSV=function(e){return F.HEX_to_HSV(F.NAME_to_HEX(e))},F.HEX_to_RGB=function(e){var r=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;e=e.replace(r,function(e,r,a,o){return r+r+a+a+o+o});var a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return a?{r:parseInt(a[1],16),g:parseInt(a[2],16),b:parseInt(a[3],16)}:null},F.RGB_to_HEX=function(e){return"#"+((1<<24)+(e.r<<16)+(e.g<<8)+e.b).toString(16).slice(1)},F.HSV_to_RGB=function(e){var r,a,o,n,t,l,F,s,i=e.h,u=e.s,c=e.v;if(0===u)return{r:c,g:c,b:c};switch(i/=60,n=Math.floor(i),t=i-n,l=c*(1-u),F=c*(1-u*t),s=c*(1-u*(1-t)),n){case 0:r=c,a=s,o=l;break;case 1:r=F,a=c,o=l;break;case 2:r=l,a=c,o=s;break;case 3:r=l,a=F,o=c;break;case 4:r=s,a=l,o=c;break;case 5:r=c,a=l,o=F}return{r:Math.floor(255*r),g:Math.floor(255*a),b:Math.floor(255*o)}},F.RGB_to_HSV=function(e){var r=e.r/255,a=e.g/255,o=e.b/255,n=0,t=0,l=0,F=Math.min(r,Math.min(a,o)),s=Math.max(r,Math.max(a,o));if(F===s)return l=F,{h:0,s:0,v:l};var i=r===F?a-o:o===F?r-a:o-r,u=r===F?3:o===F?1:5;return n=60*(u-i/(s-F)),t=(s-F)/s,l=s,{h:n,s:t,v:l}},F.HSV_to_HEX=function(e){return F.RGB_to_HEX(F.HSV_to_RGB(e))},F.HEX_to_HSV=function(e){return F.RGB_to_HSV(F.HEX_to_RGB(e))},F.make_scheme=function(e,r){function n(e){return{h:e.h,s:e.s,v:e.v}}var l,F,s,i,u,h=t(c);if(null!==r)for(var d in r)r.hasOwnProperty(d)&&(h[d]=r[d]);var g=[e];switch(h.scheme_type.toLowerCase()){case"monochromatic":case"mono":for(u=1;2>=u;u++)l=n(e),s=l.s+.1*u,s=a(s,0,1),i=l.v+.1*u,i=a(i,0,1),l.s=s,l.v=i,g.push(l);for(u=1;2>=u;u++)l=n(e),s=l.s-.1*u,s=a(s,0,1),i=l.v-.1*u,i=a(i,0,1),l.s=s,l.v=i,g.push(l);break;case"complementary":case"complement":case"comp":l=n(e),l.h=(l.h+180)%360,g.push(l);break;case"split-complementary":case"split-complement":case"split":l=n(e),l.h=(l.h+165)%360,g.push(l),l=n(e),l.h=Math.abs((l.h-165)%360),g.push(l);break;case"double-complementary":case"double-complement":case"double":l=n(e),l.h=(l.h+180)%360,g.push(l),l.h=(l.h+30)%360,F=n(l),g.push(l),l.h=(l.h+180)%360,g.push(F);break;case"analogous":case"ana":for(u=1;5>=u;u++)l=n(e),l.h=(l.h+20*u)%360,g.push(l);break;case"triadic":case"triad":case"tri":for(u=1;3>u;u++)l=n(e),l.h=(l.h+120*u)%360,g.push(l);break;default:console.error("Color scheme not recognized.")}return o(h.format.toLowerCase(),g),g},F.make_color=function(n){var s=[],c=t(u),h=null;if(null!==n)for(var d in n)n.hasOwnProperty(d)&&(c[d]=n[d]);var g=null;"string"==typeof c.seed&&(g=new l(c.seed)),c.base_color.length>0&&(h=c.base_color.match(/^#?([0-9a-f]{3})([0-9a-f]{3})?$/i)?F.HEX_to_HSV(c.base_color):F.NAME_to_HSV(c.base_color));for(var m=0;m<c.colors_returned;m++){var f,E,b,p=e(0,360,g);null!==h?(f=a(e(h.h-5,h.h+5,g),0,360),E=0===h.s?0:r(.4,.85,g),b=r(.4,.85,g),s.push({h:f,s:E,v:b})):(f=c.greyscale===!0||c.grayscale===!0?0:c.golden===!0?(p+p/i)%360:null===c.hue||c.full_random===!0?p:a(c.hue,0,360),E=c.greyscale===!0||c.grayscale===!0?0:c.full_random===!0?r(0,1,g):null===c.saturation?.4:a(c.saturation,0,1),b=c.full_random===!0?r(0,1,g):c.greyscale===!0||c.grayscale===!0?r(.15,.75,g):null===c.value?.75:a(c.value,0,1),s.push({h:f,s:E,v:b}))}return o(c.format.toLowerCase(),s),s},F.make_contrast=function(e,r){var l=t(h);if(null!==r)for(var s in r)r.hasOwnProperty(s)&&(l[s]=r[s]);var u,c,d=n(e);if(l.golden===!0)c=e.h*(1+i)%360;else{var g=F.make_scheme(e,{scheme_type:"complementary",format:"hsv"})[1];c=a(g.h-30,0,360)}var m;return"dark"===d?m=a(e.v-.25,0,1):"light"===d&&(m=a(e.v+.25,0,1)),u=[{h:c,s:e.s,v:m}],o(l.format.toLowerCase(),u),u[0]},F}return e()});

preview.png

purview.json

{
  "commits": [
	{
      "sha": "3136f1ec2b489d1791881a2fee1b0a15e8be4a1d",
      "name": "final"
    },
    {
      "sha": "929a2ea10f57f8b848b8ad4d1e8029f2235a8f54",
      "name": "clock_alarm"
    },
    {
      "sha": "85a9c3aa87d550665b9bae06c34caf7a099556b6",
      "name": "millis ticking"
    },
    {
      "sha": "d3bfd1f544b8b08acaa66def3d65e6b903ea6d3f",
      "name": "borders work"
    },
    {
      "sha": "73067ce47f44375cf00d4684d56e594e912fb919",
      "name": "original_clock"
    },
    {
      "sha": "bc6f8cbcf1a994a1c9e7943ac5012b4f8c774828",
      "name": "first test render"
    },
    {
      "sha": "34d838e50de9b60602cf9739da72fbff3067677a",
      "name": "maeda_clock"
    },
    {
      "sha": "811076073e63b2c33a8a92fdcabeb6bdb473bba8",
      "name": "sketch"
    }
  ]
}

sketch.js

var prevSec;
var millisRolloverTime;
var nextAlarm;
var debug_is_on = (typeof DEBUG !== 'undefined');

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function setup () {
  // create the drawing canvas, save the canvas element
  main_canvas = createCanvas(windowWidth, windowHeight);
  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