Skip to content

Instantly share code, notes, and snippets.

@EmilyAShaw
Forked from dribnet/.block
Last active August 12, 2018 07:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EmilyAShaw/75aa5130e213a4032d2667c51a1fbebd to your computer and use it in GitHub Desktop.
Save EmilyAShaw/75aa5130e213a4032d2667c51a1fbebd to your computer and use it in GitHub Desktop.
17.1.MDDN242 PS1
license: mit
// 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');
}

PS1 MDDN 242 2017

FINAL

this is my final clock - I will explain what each part does:

  • the sun: this is the middle circle - in the circle it displays the time, as well as current circadian rythm. (i.e. at 7 oclock melatonin secretion starts, and at 10 oclock your mind is highest alert.)

  • the earth: this controls what hour of the day it is; it moves in a clockwise fashion and makes one loop every 24 hours. This is a movement based of an analog clock.

  • the moon: this rotates around the earth - just like the actual moon. it makes one full turn around the earth every hour.

  • the commet/asteroid: this makes one full turn around the whole system every minute. I origionally wanted to make make it crash into the sun during the alarm - but everythign I tried was either too complicated or didn't work the way I wanted it to.

  • the supernova: this is what happens when the alarm is activated (by clicking anywhere on the clock) There is an orange sun behind the regualr sun which flashes as if to turn the sun into 'a supernova'. This is not very realistic ina physical sense, but I liked the way it went with my design.

The outcome: I am very happy with my design - I have always been interested in the solar system - I origionally though of this idea becase the solar system and rotation of the earth around the sun is what early humans used to tell/ represent the time (they also used it to tell circadian rythems which I have included). I like my design because it is a visual representation of that - as well as mixed with tradtional media (digital clock)

function draw_clock(hour, minute, second, millis, alarm) {
var secondsWithFraction = second + (millis / 1000.0);
var secondRotationSmooth = map(secondsWithFraction, 0, 60, 0, 360);
var minutesWithFraction = minute + (second / 60.0);
var minuteRotationSmooth = map(minutesWithFraction, 0, 60, 0, 360-6);
var hoursWithFraction = hour + (minute / 60.0);
var hourRotationSmooth = map(hoursWithFraction, 0, 23, 0, 360-15);
var hourFact = hour;
var minuteFact = minute;
var starRate = second;
background(0);
angleMode(DEGREES);
fill(0);
rectMode(CENTER);
translate(width/2, height/2);
//some code credit for alarm from lectures
// is alarm going off?
if (alarm == 0) {
if (second % 2 == 0) {
rotate(360);
superNova(0,0); //creates the picture in the background of the sun when the alarm
//goes off
}
else {
background(10,0,0);
sun(0,0);
}
}
else {
background(0);
sun(0,0);
}
sun(0,0);
//is alarm going off in next 15 seconds
if (alarm > 0) {
fill(100);
rect(width-50, height-50, 40, 40);
if (alarm < 30.0) {
text("alarm on", 200,200);
}
}
//controls the font
fill(45, 44, 44);
textSize(45);
textFont("bakery");
fill(0);
//creating the extra "0" to make the clock look more 24 hour. i.e instead of 4:30 - 04:30
if (hour<10){
text("0" + hour+":"+ minute, -40, -30);
}
else{
text( hour + ":" + minute, -40,-30);
}
// these are all if statements controlling very specific biological facts
//the reason I did not put this into an array was that there were some which were to do
//in between a specific couple of minutes - and this would have been too complicated for me
//to put in an array
textSize(24);
if (hourFact == 14){
if (minuteFact > 30){
text("Best" , -25,0);
text("coordernation" , -50,25);
}}
if (hourFact == 15){
if (minuteFact > 30){
text("Fastest" , -30,0);
text("Reaction Time" , -55,25);
}}
if (hourFact == 17){
textSize(16);
text("Greatest Cardiovascular " , -60,0);
text("efficency" ,-25,25);
text("and muscle strength" , -50,50);
}
if (hourFact == 18){
if (minuteFact > 30){
text("Highest" , -26,0);
text("Blood Pressure" , -60,25);
}}
if (hourFact == 19){
text("Melatonin" , -35,0);
text("Secretion Starts" , -60,25);
}
if (hourFact == 22){
if (minuteFact > 30){
text("bowel Movements" , -55,0);
text("supressed" , -40,25);
}}
if (hourFact == 0){
text("midnight" , -35,0);
}
if (hourFact == 2){
text("deepest" , -28,0);
text("sleep" , -20,25);
}
if (hourFact == 4){
if (minuteFact > 30){
text("lowest" , -26,0);
text("Body Tempreture" , -60,25);
}}
if (hourFact == 6){
if (minuteFact > 30){
text("Sharpest Rise" , -50,0);
text("in" , -10,25);
text(" Blood Tempretre" , -60,50);
}}
if (hourFact == 7){
if (minuteFact > 30){
text("Melatonin" , -35,0);
text("Secretion Stops" , -60,25);
}}
if (hourFact == 8){
if (minuteFact > 30){
text("bowel Movements" , -55,0);
text("likely" , -15,25);
}}
if (hourFact == 9){
text("Highest Testosterone" , -70,0);
text("Secretion" , -40,25);
}
if (hourFact == 10){
text("High" , -20,0);
text("alertness" , -35,25);
}
if (hourFact == 12){
text("Noon" , -25,0);
}
//controlls the commet which rotates around the solar system
rotate(270);
push();
fill(127, 102, 102);
rotate(secondRotationSmooth);
ellipse(200,0,3,6);
fill(229,153,55);
ellipse(200,-10,1,10);
fill(255,0,0);
ellipse(200,-17,1,17);
pop();
//earth
push();
rotate(hourRotationSmooth);
fill(70,130,180);
noStroke();
//my world function did not end up working at the last minute
//so I improvised without it
ellipse(150,0,35);
fill(95,158,160);
ellipse(152,10,5, 5);
ellipse(155,-10,5, 5);
ellipse(145,-5,13, 13);
ellipse(159,5,8, 8);
ellipse(140,8,8, 8);
fill(255);
ellipse(157,5,4, 4);
ellipse(142,8,4, 5);
ellipse(145,-8,6, 6);
ellipse(145,-4,6, 6);
//moon
push();
translate(150,0);
rotate(minuteRotationSmooth);
fill(200);
ellipse(30,0,10,10);
pop();
pop();
//careful placement of stars and constellations
star2(200,-100);
star3(-200,100);
star2(200,-200);
star3(150,150);
star1(160, 200);
star1(-50,350);
star2(-200, -300);
star3(-130, -300);
star2(-170, -320);
star3(-170, -270);
star1(100, -400);
}
//function which controls the earth's features
function world (x,y){
noStroke();
ellipse(200,0,35);
fill(95,158,160);
ellipse(152,10,5, 5);
ellipse(155,-10,5, 5);
ellipse(145,-5,13, 13);
ellipse(159,5,8, 8);
ellipse(140,8,8, 8);
fill(255);
ellipse(157,5,4, 4);
ellipse(142,8,4, 5);
ellipse(145,-12,6, 6);
}
//a function which I did not end up using - but kept just incase I wanted to (just mapped where
//the commet was supposed to be)
function outerCircle (x,y) {
fill(255);
strokeWeight(0.5);
stroke(0);
fill(255,000,000);
noFill();
fill(255, 206, 186);
noStroke();
//ellipse(x-240,y+10,20,40);
fill(200);
ellipse(x-240,y,20,20);
}
//sun function
function sun (x,y){
fill(255, 252, 178);
noStroke();
ellipse(x,y,220,220);
}
//largest star cluster
function star1(x,y,w,h){
fill(255);
ellipse(x, y, 15, 2);
ellipse(x, y, 2, 10);
}
//medium star cluster
function star2(x, y, w, h){
fill(255);
ellipse(x,y,7,2);
ellipse (x, y, 2, 7);
}
//smallest star cluster
function star3(x,y,w,h){
fill(255);
ellipse(x, y, 4, 2);
ellipse(x, y, 2, 4);
}
//background picture that flashes when alarm is activated.
function superNova(x,y){
fill(244, 137, 66);
beginShape();
//vertex(-83,83);
vertex(0,120);
vertex(83,83);
vertex(120,0);
vertex(83,-83);
vertex(0,-120);
vertex(-83,-83);
vertex(-120,0);
vertex(-83,83);
strokeWeight(1);
stroke(244,137,66);
line(127,0,-127,0);
line(0,127,0,-127);
line(-90,-90,90,90);
line(-90,90,90,-90);
noStroke();
endShape(CLOSE);
}
<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>
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")
}
<head>
<style>
@font-face{
font-family: bakery;
src:url('bakery.eot') format('embedded-opentype'),
url('bakery.otf') format('opentype');
}
</style>
<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>
{
"commits": [
{
"sha": "3309aeddcd4c4f533a91fda1b024850a433d1844",
"name": "final"
},
{
"sha": "21848090b72bf52e605fa540bec68c6bdc198221",
"name": "clock_alarm"
},
{
"sha": "2f275fc39a00a3ae16f583b6b27a33478c2a46fd",
"name": "origional_clock"
},
{
"sha": "6dc21a6a52a16eb7cd52471fa93b02d173dea25d",
"name": "maeda_clock"
},
{
"sha": "1b5e43728c2b8119ed67164149d3e2acebcc78b7",
"name": "sketch"
}
]
}
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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment