wenlinzhang42/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    PS1 MDDN 242 2019

Project 1 Clock

The final theme I decided to use is about 'Day Routine'. In my opnion, the nature is a really good way to represent time. The wind, cloud moving is all about time. Therefore, I designed this clock to show the time. By exchange the day and night we will know the clock is at am. or pm. When the digital clock is not yet been invent, the ancient people know the time by observing astronomical phenomena. In the day scene, the cloud move through the screan represent the seconds which spent 60s. The ship represent the minite. In the daytime, there is a boatman sat on the ship. In the nighttime, the ship is smaller because the boatman go home. Instead of using the cloud in the daytime, I choose to meteor in the nighttime to represent seconds. In addition, I use moon to replace the sun in the night time.
Finally, the feeling I aim to represent to viewers is simple, clam and ordinary. This clock is just like our normal day.
Workflow: I add the alarm mode in the final version.

  
## 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

   let angle = 0;
   let hr = obj.hours;
   let mn = obj.minutes;
   let sc = obj.seconds;
   let mil = obj.millis;

    var c1 = color(181,202,160);
    var c2 = color(231, 239, 222);
    var c3 = color(8,25,45);
    var c4 = color(124,185,222);
    var c5 = color(66, 75, 89);
    var c6 = color(107, 113, 122);
    let alarm = obj.seconds_until_alarm;
    var i = 0;
    noFill();


  //let font , fontsize = 40;


//background
     if(hr>6 && hr <18){
       while(i < width*2){
       stroke(lerpColor(c1, c2, i/(height*1.0)));
       rect(0, 0, i+width, i);
       i = i+1;
       }
     }
     else{
     while(i < width*2){
      stroke(lerpColor(c3, c4, i/(height*1.0)));
      rect(0, 0, i+width, i);
      i = i+1;
    }
  }


    const ballWidth = 100;
    let posX = map(obj.seconds, 0, 59, ballWidth/2, width-ballWidth/2);
    let posY = map(80,0,100,0,height);


    posX = map(obj.seconds, 0, 59, ballWidth/2, width-ballWidth/2);
    posY = map(60,0,100,0,height);

   //mountain
function mountain(){
  fill(67, 96, 30);
  noStroke();
  beginShape();
  vertex(960,230);
  vertex(900,220);
  vertex(850,200);
  vertex(700,130);
  vertex(500,200);
  vertex(400,230);
  endShape(CLOSE);

  fill(67, 96, 30,80);
  beginShape();
  vertex(960,230);
  vertex(900,260);
  //vertex(850,230);
  vertex(700,330);
  vertex(500,260);
  vertex(400,230);
  endShape(CLOSE);

  fill(88, 117, 50);
  beginShape();
  vertex(0,250);
  vertex(100,190);
  vertex(125,193);
  vertex(150,170);
  vertex(200,150);
  vertex(350,200)
  vertex(760,250);
  endShape(CLOSE);

  fill(88, 117, 50,80);
  beginShape();
  vertex(0,250);
  vertex(100,310);
  vertex(125,313);
  vertex(150,300);
  vertex(200,350);
  vertex(350,300)
  vertex(760,250);
  endShape(CLOSE);

}


function mountain2(){
  fill(56,92,118);
  noStroke();
  beginShape();
  vertex(960,230);
  vertex(900,220);
  vertex(850,200);
  vertex(700,130);
  vertex(500,200);
  vertex(400,230);
  endShape(CLOSE);

  fill(136,167,175,80);
  beginShape();
  vertex(960,230);
  vertex(900,260);
  //vertex(850,230);
  vertex(700,330);
  vertex(500,260);
  vertex(400,230);
  endShape(CLOSE);

  fill(56,92,118);
  noStroke();
  beginShape();
  vertex(0,250);
  vertex(100,190);
  vertex(125,193);
  vertex(150,170);
  vertex(200,150);
  vertex(350,200)
  vertex(760,250);
  endShape(CLOSE);

  fill(136,167,175,80);
  noStroke();
  beginShape();
  vertex(0,250);
  vertex(100,310);
  vertex(125,313);
  vertex(150,300);
  vertex(200,350);
  vertex(350,300)
  vertex(760,250);
  endShape(CLOSE);
}


  angleMode(DEGREES);

  noFill();
  let end1 = map(obj.seconds, 0, 59, 180, 540);
  let end2 = map(obj.minutes, 0, 59, 180, 540);
  let end3 = map(obj.hours % 23, 0, 23, 100, 265);
  let boatPos = map(mn, 0, 59, 0, width-100);


  //hour or the sun and moon
  push();
  noStroke();
  translate(500,360);
  if(hr>6 && hr <18){
  fill(255,177,27);
  rotate(end3);
  }
  else{
  fill(244,238,169);
    rotate(end3);
  }
   ellipse(0,350,70,70);
   fill(0);
  pop();


   //Those code is used to change mountain's color between two scenes.
  translate(-10,110);
  if(hr>6 && hr <18){
  mountain();
}else{
  mountain2();
  }

// Seconds or the stars.
  function star(xpos){
    push();
    translate(xpos,30);
    stroke(255);
    strokeWeight(3);
    line(100, 20, 70,20);
    strokeWeight(2);
    line(70,20,40,20);
    strokeWeight(1);
    line(40,20,10,20);
    pop();
  }

   translate(10,-110);
  function ship(xpos){
       push();
       translate(xpos,400);
       noStroke();
       scale(0.5);
       beginShape();
       vertex(0,0);
       vertex(30,25);
       vertex(100,25);
       vertex(130,0);
       endShape(CLOSE);
       rect(30,-30,70,30);
       pop();
     }

     function ship2(xpos){
          push();
          translate(xpos,400);
          noStroke();
          beginShape();
          vertex(0,0);
          vertex(30,25);
          vertex(100,25);
          vertex(130,0);
          endShape(CLOSE);
          rect(30,-30,70,30);
          stroke(0);
          strokeWeight(1);
          line(40,-30,50,0);
          line(60,-30,70,0);
          line(80,-30,90,0);
          line(50,-30,40,0);
          line(90,-30,80,0);
          line(70,-30,60,0);
          noStroke();
          translate(73,-70);
          triangle(40,40,55,70,25,70);
          triangle(40,40,55,50,25,50);
          pop();
        }

     function cloud(xpos) {
      push();
      translate(xpos-140,-20);
      ellipse(100,100,40,30);
      ellipse(110,110,30);
      ellipse(120,95,50,40);
      ellipse(130,105,30);
      pop();
     }

    function cloud2(x,y){
      ellipse(100,100,30);
      ellipse(110,110,70,20);
      ellipse(120,95,50,60);
      ellipse(130,105,30);
    }

//cloud and stars
let secondsWithFraction   = sc + (mil / 1000.0);
if(hr>6 && hr<18){
  fill(99,71,44);
  ship2(boatPos);
  let cPos = map (secondsWithFraction,0,59,0,width-80)
  fill(255);
  cloud(cPos);
  translate(100,50);
  cloud2();
  translate(500,-90);
  cloud2();
}
else {
  noStroke();
  fill(255);
  ellipse(50,50,5,5);
  ellipse(59,20,5,5);
  ellipse(545,10,5,5);
  ellipse(250,90,5,5);
  ellipse(300,98,5,5);
  ellipse(200,38,5,5);
  ellipse(20,-8,5,5);
  ellipse(100,-58,5,5);
  ellipse(300,-38,5,5);
  ellipse(300,98,5,5);
   fill(8,25,45,90);
   ship(boatPos);
  noStroke();
  fill(255);
  ellipse(50,50,5,5);
  ellipse(59,20,5,5);
  ellipse(545,10,5,5);
  ellipse(250,90,5,5);
  ellipse(300,98,5,5);
  ellipse(200,38,5,5);
  ellipse(20,-8,5,5);
  ellipse(100,-58,5,5);
  ellipse(300,-38,5,5);
  ellipse(300,98,5,5);
  ellipse(30,98,5,5);
  ellipse(700,48,5,5);
  ellipse(890,68,5,5);
  ellipse(550,28,5,5);
  ellipse(400,88,5,5);
  ellipse(340,68,7,7);
  ellipse(450,58,5,5);
  ellipse(640,108,5,5);

  let starPos = map(secondsWithFraction, 0,59,0,width-120);
   star(starPos);
}

function rain(){
 noStroke();
  fill(130, 136, 145);
 ellipse(100,100,40,30);
      ellipse(110,110,30);
      ellipse(120,95,50,40);
      ellipse(130,105,30);
  fill(49, 53, 58);
  translate(-500,100);
  ellipse(100,100,40,30);
      ellipse(110,110,30);
      ellipse(120,95,50,40);
      ellipse(130,105,30);
      translate(250,50);
      cloud2();
      translate(100,200);
      cloud2();
      translate(-200,-100);
      cloud();
      stroke(210);
     fill(45);
      line(20,-400,20,100);
      line(100,-200,100,200);
      line(100,-200,100,200);
      line(400,-100,400,300);
     line(500,-200,500,100);
      line(50,-300, 50, -30);
      stroke(94, 116, 142);
      line(20,20,20,0);


}


  if (alarm == 0){
    push();
    if(hr <= 6 || hr >= 18){
      translate(600, -40);
    }

    background(94, 116, 142);
    // cloud(cPos);

     rain();
     translate(300,-100);
     noStroke();
     rain();
     translate(200,-300);
     rain();
     translate(700,-400);
     rain();

     fill(3, 23, 56);


    translate(-100,100);
  textSize(70);
  textFont('Voyager');
  text('RAINING!!!',0,0);
  pop();
  }


}

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

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

## maeda_clock.js
  const spacing = 70;

  let angle = 0;
  let end1 = map(sc, 0, 60, 0, 360);
//
// function setup{
//   angleMode(DEGREES);
//
//
// }

// Update this function to draw you own maeda clock on a 960x500 canvas
function draw_clock(obj) {

  //fill(0);
  //background(100);
  // 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);
  // }//

//   one of 12 clock

// ---------
//   background(100);

//   let hr = hour();
//   let mn = minute();
//   let sc = second();
//   angleMode(DEGREES);

//   strokeWeight(9);
//   noFill();
//   let end1 = map(sc, 0, 60, 0, 360);
//   let end2 = map(mn, 0, 60, 0, 360);
//   let end3 = map(hr % 12, 0, 12, 0, 360)

//   push();
//   translate(350,250);
//   rotate(end3);
//   fill(255,100,50);
//   textSize(240);
//   textAlign(CENTER,CENTER);
//   text(hr, 0, 0);
//   pop();

//   push();
//   translate(350,250);
//   rotate(end2);
//   fill(0);
//   textSize(140);
//   textAlign(CENTER,CENTER);
//   text(mn, 0, 0);
//   pop();

//   push();
//   translate(350,250);
//   rotate(end1);
//   fill(0,255,0);
//   textSize(50);
//   textAlign(CENTER,CENTER);
//   text(sc, 0, 0);
//   pop();

//   angle = angle + 0.1;


    // class note

    // background(0);
    // fill(255);
    // const ballWidth = 100;
    // let posX = map(obj.millis, 0, 1000, ballWidth/2, width-ballWidth/2);
    // let posY = map(80,0,100,0,height);
    // ellipse(posX, posY, ballWidth);


    // posX = map(obj.seconds, 0, 59, ballWidth/2, width-ballWidth/2);
    // posY = map(60,0,100,0,height);
    // ellipse(posX, posY,ballWidth);

    // posX = map(obj.minutes, 0, 59, ballWidth/2, width-ballWidth/2);
    // posY = map(40,0,100,0,height);
    // ellipse(posX, posY,ballWidth);

    // posX = map(obj.hours, 0, 23, ballWidth/2, width-ballWidth/2);
    // posY = map(20,0,100,0,height);
    // ellipse(posX, posY,ballWidth);


//   part 3
  background(100);

  let hr = hour();
  let mn = minute();
  let sc = second();
  angleMode(DEGREES);

  strokeWeight(9);
  noFill();
  let end1 = map(sc, 0, 60, 180, 540);
  let end2 = map(mn, 0, 60, 180, 540);
  let end3 = map(hr % 12, 0, 12, 180, 540)

  push();
  translate(500,240);
  rotate(end3);
  fill(255,100,50);
  textSize(40);
  textAlign(CENTER,CENTER);
  text(hr, 0,170);
  pop();

  push();
  translate(500,240);
  rotate(end2);
  fill(0);
  textSize(30);
  textAlign(CENTER,CENTER);
  text(mn, 0, 150);
  pop();

  push();
  translate(500,240);
  rotate(end1);
  fill(0,255,0);
  textSize(20);
  textAlign(CENTER,CENTER);
  text(sc, 0, 230);
  pop();

  angle = angle + 0.1;
  strokeWeight(1);

  //ellipse(500,250,500,500)

  // Final


}

## 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
            
          
## purview.json
{
  "commits": [
    {
      "sha": "2fd1c426eb21d091335cd8cc8c3f8d30d942778c",
      "name": "Final"
    },
    {
      "sha": "0d57934de82d963f374e74492b8e649cf8e08ae9",
      "name": "experiment1"
    },
    {
      "sha": "5db4094c979b15ae28d72b0010576da015cfef46",
      "name": "experiment2"
    }


  ]
}

## 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

	let angle = 0;
	let hr = obj.hours;
	let mn = obj.minutes;
	let sc = obj.seconds;
	let mil = obj.millis;

	var c1 = color(181,202,160);
	var c2 = color(231, 239, 222);
	var c3 = color(8,25,45);
	var c4 = color(124,185,222);
	var c5 = color(66, 75, 89);
	var c6 = color(107, 113, 122);
	let alarm = obj.seconds_until_alarm;
	var i = 0;
	noFill();


	//let font , fontsize = 40;



	//background
	if(hr>6 && hr <18){
	while(i < width*2){
	stroke(lerpColor(c1, c2, i/(height*1.0)));
	rect(0, 0, i+width, i);
	i = i+1;
	}
	}
	else{
	while(i < width*2){
	stroke(lerpColor(c3, c4, i/(height*1.0)));
	rect(0, 0, i+width, i);
	i = i+1;
	}
	}




	const ballWidth = 100;
	let posX = map(obj.seconds, 0, 59, ballWidth/2, width-ballWidth/2);
	let posY = map(80,0,100,0,height);


	posX = map(obj.seconds, 0, 59, ballWidth/2, width-ballWidth/2);
	posY = map(60,0,100,0,height);

	//mountain
	function mountain(){
	fill(67, 96, 30);
	noStroke();
	beginShape();
	vertex(960,230);
	vertex(900,220);
	vertex(850,200);
	vertex(700,130);
	vertex(500,200);
	vertex(400,230);
	endShape(CLOSE);

	fill(67, 96, 30,80);
	beginShape();
	vertex(960,230);
	vertex(900,260);
	//vertex(850,230);
	vertex(700,330);
	vertex(500,260);
	vertex(400,230);
	endShape(CLOSE);

	fill(88, 117, 50);
	beginShape();
	vertex(0,250);
	vertex(100,190);
	vertex(125,193);
	vertex(150,170);
	vertex(200,150);
	vertex(350,200)
	vertex(760,250);
	endShape(CLOSE);

	fill(88, 117, 50,80);
	beginShape();
	vertex(0,250);
	vertex(100,310);
	vertex(125,313);
	vertex(150,300);
	vertex(200,350);
	vertex(350,300)
	vertex(760,250);
	endShape(CLOSE);

	}


	function mountain2(){
	fill(56,92,118);
	noStroke();
	beginShape();
	vertex(960,230);
	vertex(900,220);
	vertex(850,200);
	vertex(700,130);
	vertex(500,200);
	vertex(400,230);
	endShape(CLOSE);

	fill(136,167,175,80);
	beginShape();
	vertex(960,230);
	vertex(900,260);
	//vertex(850,230);
	vertex(700,330);
	vertex(500,260);
	vertex(400,230);
	endShape(CLOSE);

	fill(56,92,118);
	noStroke();
	beginShape();
	vertex(0,250);
	vertex(100,190);
	vertex(125,193);
	vertex(150,170);
	vertex(200,150);
	vertex(350,200)
	vertex(760,250);
	endShape(CLOSE);

	fill(136,167,175,80);
	noStroke();
	beginShape();
	vertex(0,250);
	vertex(100,310);
	vertex(125,313);
	vertex(150,300);
	vertex(200,350);
	vertex(350,300)
	vertex(760,250);
	endShape(CLOSE);
	}




	angleMode(DEGREES);

	noFill();
	let end1 = map(obj.seconds, 0, 59, 180, 540);
	let end2 = map(obj.minutes, 0, 59, 180, 540);
	let end3 = map(obj.hours % 23, 0, 23, 100, 265);
	let boatPos = map(mn, 0, 59, 0, width-100);


	//hour or the sun and moon
	push();
	noStroke();
	translate(500,360);
	if(hr>6 && hr <18){
	fill(255,177,27);
	rotate(end3);
	}
	else{
	fill(244,238,169);
	rotate(end3);
	}
	ellipse(0,350,70,70);
	fill(0);
	pop();




	//Those code is used to change mountain's color between two scenes.
	translate(-10,110);
	if(hr>6 && hr <18){
	mountain();
	}else{
	mountain2();
	}

	// Seconds or the stars.
	function star(xpos){
	push();
	translate(xpos,30);
	stroke(255);
	strokeWeight(3);
	line(100, 20, 70,20);
	strokeWeight(2);
	line(70,20,40,20);
	strokeWeight(1);
	line(40,20,10,20);
	pop();
	}

	translate(10,-110);
	function ship(xpos){
	push();
	translate(xpos,400);
	noStroke();
	scale(0.5);
	beginShape();
	vertex(0,0);
	vertex(30,25);
	vertex(100,25);
	vertex(130,0);
	endShape(CLOSE);
	rect(30,-30,70,30);
	pop();
	}

	function ship2(xpos){
	push();
	translate(xpos,400);
	noStroke();
	beginShape();
	vertex(0,0);
	vertex(30,25);
	vertex(100,25);
	vertex(130,0);
	endShape(CLOSE);
	rect(30,-30,70,30);
	stroke(0);
	strokeWeight(1);
	line(40,-30,50,0);
	line(60,-30,70,0);
	line(80,-30,90,0);
	line(50,-30,40,0);
	line(90,-30,80,0);
	line(70,-30,60,0);
	noStroke();
	translate(73,-70);
	triangle(40,40,55,70,25,70);
	triangle(40,40,55,50,25,50);
	pop();
	}

	function cloud(xpos) {
	push();
	translate(xpos-140,-20);
	ellipse(100,100,40,30);
	ellipse(110,110,30);
	ellipse(120,95,50,40);
	ellipse(130,105,30);
	pop();
	}

	function cloud2(x,y){
	ellipse(100,100,30);
	ellipse(110,110,70,20);
	ellipse(120,95,50,60);
	ellipse(130,105,30);
	}

	//cloud and stars
	let secondsWithFraction = sc + (mil / 1000.0);
	if(hr>6 && hr<18){
	fill(99,71,44);
	ship2(boatPos);
	let cPos = map (secondsWithFraction,0,59,0,width-80)
	fill(255);
	cloud(cPos);
	translate(100,50);
	cloud2();
	translate(500,-90);
	cloud2();
	}
	else {
	noStroke();
	fill(255);
	ellipse(50,50,5,5);
	ellipse(59,20,5,5);
	ellipse(545,10,5,5);
	ellipse(250,90,5,5);
	ellipse(300,98,5,5);
	ellipse(200,38,5,5);
	ellipse(20,-8,5,5);
	ellipse(100,-58,5,5);
	ellipse(300,-38,5,5);
	ellipse(300,98,5,5);
	fill(8,25,45,90);
	ship(boatPos);
	noStroke();
	fill(255);
	ellipse(50,50,5,5);
	ellipse(59,20,5,5);
	ellipse(545,10,5,5);
	ellipse(250,90,5,5);
	ellipse(300,98,5,5);
	ellipse(200,38,5,5);
	ellipse(20,-8,5,5);
	ellipse(100,-58,5,5);
	ellipse(300,-38,5,5);
	ellipse(300,98,5,5);
	ellipse(30,98,5,5);
	ellipse(700,48,5,5);
	ellipse(890,68,5,5);
	ellipse(550,28,5,5);
	ellipse(400,88,5,5);
	ellipse(340,68,7,7);
	ellipse(450,58,5,5);
	ellipse(640,108,5,5);

	let starPos = map(secondsWithFraction, 0,59,0,width-120);
	star(starPos);
	}

	function rain(){
	noStroke();
	fill(130, 136, 145);
	ellipse(100,100,40,30);
	ellipse(110,110,30);
	ellipse(120,95,50,40);
	ellipse(130,105,30);
	fill(49, 53, 58);
	translate(-500,100);
	ellipse(100,100,40,30);
	ellipse(110,110,30);
	ellipse(120,95,50,40);
	ellipse(130,105,30);
	translate(250,50);
	cloud2();
	translate(100,200);
	cloud2();
	translate(-200,-100);
	cloud();
	stroke(210);
	fill(45);
	line(20,-400,20,100);
	line(100,-200,100,200);
	line(100,-200,100,200);
	line(400,-100,400,300);
	line(500,-200,500,100);
	line(50,-300, 50, -30);
	stroke(94, 116, 142);
	line(20,20,20,0);



	}


	if (alarm == 0){
	push();
	if(hr <= 6 \|\| hr >= 18){
	translate(600, -40);
	}

	background(94, 116, 142);
	// cloud(cPos);

	rain();
	translate(300,-100);
	noStroke();
	rain();
	translate(200,-300);
	rain();
	translate(700,-400);
	rain();

	fill(3, 23, 56);


	translate(-100,100);
	textSize(70);
	textFont('Voyager');
	text('RAINING!!!',0,0);
	pop();
	}




	}
	/*
	* 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);
	}
	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")
	}
	const spacing = 70;

	let angle = 0;
	let end1 = map(sc, 0, 60, 0, 360);
	//
	// function setup{
	// angleMode(DEGREES);
	//
	//
	// }

	// Update this function to draw you own maeda clock on a 960x500 canvas
	function draw_clock(obj) {

	//fill(0);
	//background(100);
	// 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);
	// }//

	// one of 12 clock

	// ---------
	// background(100);

	// let hr = hour();
	// let mn = minute();
	// let sc = second();
	// angleMode(DEGREES);

	// strokeWeight(9);
	// noFill();
	// let end1 = map(sc, 0, 60, 0, 360);
	// let end2 = map(mn, 0, 60, 0, 360);
	// let end3 = map(hr % 12, 0, 12, 0, 360)

	// push();
	// translate(350,250);
	// rotate(end3);
	// fill(255,100,50);
	// textSize(240);
	// textAlign(CENTER,CENTER);
	// text(hr, 0, 0);
	// pop();

	// push();
	// translate(350,250);
	// rotate(end2);
	// fill(0);
	// textSize(140);
	// textAlign(CENTER,CENTER);
	// text(mn, 0, 0);
	// pop();

	// push();
	// translate(350,250);
	// rotate(end1);
	// fill(0,255,0);
	// textSize(50);
	// textAlign(CENTER,CENTER);
	// text(sc, 0, 0);
	// pop();

	// angle = angle + 0.1;



	// class note

	// background(0);
	// fill(255);
	// const ballWidth = 100;
	// let posX = map(obj.millis, 0, 1000, ballWidth/2, width-ballWidth/2);
	// let posY = map(80,0,100,0,height);
	// ellipse(posX, posY, ballWidth);


	// posX = map(obj.seconds, 0, 59, ballWidth/2, width-ballWidth/2);
	// posY = map(60,0,100,0,height);
	// ellipse(posX, posY,ballWidth);

	// posX = map(obj.minutes, 0, 59, ballWidth/2, width-ballWidth/2);
	// posY = map(40,0,100,0,height);
	// ellipse(posX, posY,ballWidth);

	// posX = map(obj.hours, 0, 23, ballWidth/2, width-ballWidth/2);
	// posY = map(20,0,100,0,height);
	// ellipse(posX, posY,ballWidth);


	// part 3
	background(100);

	let hr = hour();
	let mn = minute();
	let sc = second();
	angleMode(DEGREES);

	strokeWeight(9);
	noFill();
	let end1 = map(sc, 0, 60, 180, 540);
	let end2 = map(mn, 0, 60, 180, 540);
	let end3 = map(hr % 12, 0, 12, 180, 540)

	push();
	translate(500,240);
	rotate(end3);
	fill(255,100,50);
	textSize(40);
	textAlign(CENTER,CENTER);
	text(hr, 0,170);
	pop();

	push();
	translate(500,240);
	rotate(end2);
	fill(0);
	textSize(30);
	textAlign(CENTER,CENTER);
	text(mn, 0, 150);
	pop();

	push();
	translate(500,240);
	rotate(end1);
	fill(0,255,0);
	textSize(20);
	textAlign(CENTER,CENTER);
	text(sc, 0, 230);
	pop();

	angle = angle + 0.1;
	strokeWeight(1);

	//ellipse(500,250,500,500)

	// Final


	}
	<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>
	{
	"commits": [
	{
	"sha": "2fd1c426eb21d091335cd8cc8c3f8d30d942778c",
	"name": "Final"
	},
	{
	"sha": "0d57934de82d963f374e74492b8e649cf8e08ae9",
	"name": "experiment1"
	},
	{
	"sha": "5db4094c979b15ae28d72b0010576da015cfef46",
	"name": "experiment2"
	}


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