wenlinzhang42/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Alphabet in Stars.

For the final submission, I made a few changes to make my design more approches to my topic which is starmap. Firstly,  when I research some starmap image in internet, I found every constellation has
its own ruler. Therefore, I pretend each of the alphabet is a constellation and give a ruler for them. Based on the theme, the main color I used is blue (light blue or dark blue). The animation I used making the
alphabet looks more interesting when interacting.
Parameter explanation:
I used 16 vertexs in total.
let pos1x = posx+letterData["x"];
let pos1y = posy+letterData["y"];
let pos2x = posx+letterData["x1"];
let pos2y = posy+letterData["y1"];
let pos3x = posx+letterData["x2"];
let pos3y = posy+letterData["y2"];
let pos4x = posx+letterData["x3"];
let pos4y = posy+letterData["y3"];
let pos5x = posx+letterData["x4"];
let pos5y = posy+letterData["y4"];
let pos6x = posx+letterData["x5"];
let pos6y = posy+letterData["y5"];
let pos7x = posx+letterData["x6"];
let pos7y = posy+letterData["y6"];
let pos8x = posx+letterData["x7"];
let pos8y = posy+letterData["y7"];

  
## alphabet.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="letters.js"></script>
    <script language="javascript" type="text/javascript" src="draw_letters.js"></script>
    <script language="javascript" type="text/javascript" src="alphabet.js"></script>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
        </div>
    </div>
<p>
    Links to other sections:
<ul>
    <li><a href="sketch.html">sketch</a>
    <li><a href="alphabet.html">alphabet</a>
    <li><a href="interaction.html">interaction</a>
    <li><a href="exhibition.html">exhibition</a>
<ul>
</body>

## alphabet.js

/*
 * do not edit this rest of this file, instead edit the letter
 * drawing code in draw_letters.js
 */

const canvasWidth = 960;
const canvasHeight = 500;

// Handy string of all letters available
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?";

let debugBox = false;

function setup () {
  // create the drawing canvas, save the canvas element
  main_canvas = createCanvas(canvasWidth, canvasHeight);
  main_canvas.parent('canvasContainer');

  // with no animation, redrawing the screen is not necessary
  noLoop();
}

function mouseClicked() {
  debugBox = !debugBox;
  // console.log("debugBox is now: " + debugBox);
  redraw();
}

function draw () {
  // clear screen
  background(7,10,41);

  // compute the center of the canvas
  let center_x = canvasWidth / 2;
  let center_y = canvasHeight / 2;

  // draw the letters A, B, C from saved data
  push();
  scale(0.5);

  // constants
  const left_margin = 40;
  const right_margin = 2*width - 40;
  const top_margin = 80;
  const bottom_margin = 2*height - 60;
  const x_step = 140;
  const y_step = 280;
  const first_letter_offset_x = 20;

  let cur_letter_index = 0;

  for(let j=top_margin; j<bottom_margin-y_step; j+=y_step) {
    push();
    translate(0, j);

    // draw lines
    stroke(83.1, 68.6, 21.6);
    line(left_margin, 0, right_margin, 0);
    for (let i=left_margin; i<right_margin-8; i+=30) {
      line(i, 100, i+12, 100);
    }
    line(left_margin, 200, right_margin, 200);

    translate(left_margin+first_letter_offset_x, 0);
    for (let i=left_margin+first_letter_offset_x; i<right_margin-x_step+1; i+=x_step) {
      if (cur_letter_index < letters.length) {
        if (debugBox) {
          noFill()
          strokeWeight(4);
          stroke(0, 200, 0);
          rect(0, 0, 100, 200);


        }

        let letter = letters[cur_letter_index];
        if (letter in alphabet) {
          drawLetter(alphabet[letter]);
        }
        else {
          drawLetter(alphabet["default"]);
        }
        translate(x_step, 0);
        cur_letter_index = (cur_letter_index + 1);
      }
    }
    pop();
  }
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
}

## draw_letters.js
const colorFront1  = (0);
const colorFront2  = (0);
const colorStroke  = (255);

/*
 * Draw the letter given the letterData
 *
 * Letters should always be drawn with the
 * following bounding box guideline:
 * from (0,0) to (100, 200)
 */

// Draw the main star for each alphabet.
 function star(posx, posy){
   var radius = 5;
   fill(139, 161, 198);
   stroke(177, 190, 211);

   beginShape();
   for(var i = 0; i < 18; i++) {
     var x = cos(radians(i * 26)) * radius;
     var y = sin(radians(i * 26)) * radius;
     vertex(x, y);

     if(radius == 5) {
       radius = 2;
     } else {
       radius = 5;
     }
   }
   endShape();
 }

function drawLetter(letterData) {

  //16 vertexs in total
  let posx = 0;
  let posy = 0;
  let pos1x = posx+letterData["x"];
  let pos1y = posy+letterData["y"];
  let pos2x = posx+letterData["x1"];
  let pos2y = posy+letterData["y1"];
  let pos3x = posx+letterData["x2"];
  let pos3y = posy+letterData["y2"];
  let pos4x = posx+letterData["x3"];
  let pos4y = posy+letterData["y3"];
  let pos5x = posx+letterData["x4"];
  let pos5y = posy+letterData["y4"];
  let pos6x = posx+letterData["x5"];
  let pos6y = posy+letterData["y5"];
  let pos7x = posx+letterData["x6"];
  let pos7y = posy+letterData["y6"];
  let pos8x = posx+letterData["x7"];
  let pos8y = posy+letterData["y7"];


  //color of the alphabet
  fill (255,0,0,60);
  noStroke();
  triangle(pos1x, pos1y, pos2x, pos2y, pos4x, pos4y);
  triangle(pos3x, pos3y, pos1x, pos1y, pos2x, pos2y);
  fill (134,191,210,50);
  triangle(pos2x, pos2y, pos8x, pos8y, pos3x, pos3y);

  //lines use to draw the alphabet
  stroke(255);
  strokeWeight(1);
  noFill();
  line(pos1x, pos1y, pos2x, pos2y);
  line(pos2x, pos2y, pos3x, pos3y);
  line(pos1x, pos1y, pos4x, pos4y);
  line(pos4x, pos4y, pos5x, pos5y);
  line(pos5x, pos5y, pos6x, pos6y);
  line(pos2x, pos2y, pos7x, pos7y);
  line(pos7x, pos7y, pos5x, pos5y);
  line(pos2x, pos2y, pos8x, pos8y);
  line(pos8x, pos8y, pos3x, pos3y);

//stars or ellipse
  fill(39, 63, 102);
  stroke(39, 63, 102);
  ellipse(pos1x, pos1y, 5);
  ellipse(pos2x, pos2y, 5);
  ellipse(pos3x, pos3y, 5);
  ellipse(pos4x, pos4y, 5);
  ellipse(pos5x, pos5y, 5);
  ellipse(pos6x, pos6y, 5);
  //the Main star
  push();
    translate(pos4x,pos4y);
    star();
  pop();


}

function interpolate_letter(percent, oldObj, newObj) {
  let new_letter = {};

  //The animation function
  let new_percent = 0;
  let amount_of_anticipation = 40;

  if(percent <= amount_of_anticipation) {
    new_percent = map (percent, 0, 40, 0, -30);
  }
  else{
    new_percent = map(percent, 40, 100, -30, 100);
  }

 //variable
  new_letter["x"] = map(new_percent, 0, 100, oldObj["x"], newObj["x"]);
  new_letter["y"] = map(new_percent, 0, 100, oldObj["y"], newObj["y"]);
  new_letter["x1"] = map(new_percent, 0, 100, oldObj["x1"], newObj["x1"]);
  new_letter["y1"] = map(new_percent, 0, 100, oldObj["y1"], newObj["y1"]);
  new_letter["x2"] = map(new_percent, 0, 100, oldObj["x2"], newObj["x2"]);
  new_letter["y2"] = map(new_percent, 0, 100, oldObj["y2"], newObj["y2"]);
  new_letter["x3"] = map(new_percent, 0, 100, oldObj["x3"], newObj["x3"]);
  new_letter["y3"] = map(new_percent, 0, 100, oldObj["y3"], newObj["y3"]);
  new_letter["x4"] = map(new_percent, 0, 100, oldObj["x4"], newObj["x4"]);
  new_letter["y4"] = map(new_percent, 0, 100, oldObj["y4"], newObj["y4"]);
  new_letter["x5"] = map(new_percent, 0, 100, oldObj["x5"], newObj["x5"]);
  new_letter["y5"] = map(new_percent, 0, 100, oldObj["y5"], newObj["y5"]);

  new_letter["x5"] = oldObj["x5"];
  new_letter["y5"] = oldObj["y5"];


  return new_letter;
}

var swapWords = [
  "STARMAPS",
  "WENLINNN",
  "MDDN242W"
]

## editor.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="letters.js"></script>
    <script language="javascript" type="text/javascript" src="draw_letters.js"></script>
    <script language="javascript" type="text/javascript" src="editor.js"></script>
    <style>
        body   { padding: 0; margin: 0; }
        .inner { position: absolute; }
        #controls {
            font: 300 12px "Helvetica Neue";
            padding: 5;
            margin: 5;
            background: #f0f0f0;
            opacity: 0.7;
            -webkit-transition: opacity 0.2s ease;
            -moz-transition: opacity 0.2s ease;
            -o-transition: opacity 0.2s ease;
            -ms-transition: opacity 0.2s ease;
        }
        #controls:hover { opacity: 0.9; }
    </style>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
<p>
        </div>
        <div class="inner" id="controls" height="500px">
            <table class="home">
                <tr id="row1" style="display: none">
                    <td>Param1</td>
                    <td id="slider1Container"></td>
                </tr>
                <tr id="row2" style="display: none">
                    <td>Param2</td>
                    <td id="slider2Container"></td>
                </tr>
                <tr id="row3" style="display: none">
                    <td>Param3</td>
                    <td id="slider3Container"></td>
                </tr>
                <tr id="row4" style="display: none">
                    <td>Param4</td>
                    <td id="slider4Container"></td>
                </tr>
                <tr id="row5" style="display: none">
                    <td>Param5</td>
                    <td id="slider5Container"></td>
                </tr>
                <tr id="row6" style="display: none">
                    <td>Param6</td>
                    <td id="slider6Container"></td>
                </tr>
                <tr id="row7" style="display: none">
                    <td>Param7</td>
                    <td id="slider7Container"></td>
                </tr>
                <tr id="row8" style="display: none">
                    <td>Param8</td>
                    <td id="slider8Container"></td>
                </tr>
                <tr id="row9" style="display: none">
                    <td>Param9</td>
                    <td id="slider9Container"></td>
                </tr>
                <tr id="row10" style="display: none">
                    <td>Param10</td>
                    <td id="slider10Container"></td>
                </tr>
                <tr id="row11" style="display: none">
                    <td>Param11</td>
                    <td id="slider11Container"></td>
                </tr>
                <tr id="row12" style="display: none">
                    <td>Param12</td>
                    <td id="slider12Container"></td>
                </tr>
                <tr id="row13" style="display: none">
                    <td>Param13</td>
                    <td id="slider13Container"></td>
                </tr>
                <tr id="row14" style="display: none">
                    <td>Param14</td>
                    <td id="slider14Container"></td>
                </tr>
                <tr id="row15" style="display: none">
                    <td>Param15</td>
                    <td id="slider15Container"></td>
                </tr>
                <tr id="row16" style="display: none">
                    <td>Param16</td>
                    <td id="slider16Container"></td>
                </tr>
                <tr id="row17" style="display: none">
                    <td>Param17</td>
                    <td id="slider17Container"></td>
                </tr>
                <tr id="row18" style="display: none">
                    <td>Param18</td>
                    <td id="slider18Container"></td>
                </tr>
                <tr id="row19" style="display: none">
                    <td>Param19</td>
                    <td id="slider19Container"></td>
                </tr>
                <tr id="row20" style="display: none">
                    <td>Param20</td>
                    <td id="slider20Container"></td>
                </tr>
                <tr>
                    <td>
                        <hr>
                    </td>
                </tr>
                <tr>
                    <td id="buttonContainer"></td>
                </tr>
            </table>
        </div>
    </div>
</body>

## editor.js
/*
 * Here are some things you can edit
 */
const colorBack    = (130);
const colorLines   = (250);

function sliderToDataObject() {
  let obj = {};
  obj["x"] = map(param_sliders[0].value(), 0, 100, 0, 100);
  obj["y"] = map(param_sliders[1].value(), 0, 100, 0, 200);
  obj["x1"] = map(param_sliders[2].value(), 0, 100, 0, 100);
  obj["y1"] = map(param_sliders[3].value(), 0, 100, 0, 200);
  obj["x2"] = map(param_sliders[4].value(), 0, 100, 0, 100);
  obj["y2"] = map(param_sliders[5].value(), 0, 100, 0, 200);
  obj["x3"] = map(param_sliders[6].value(), 0, 100, 0, 100);
  obj["y3"] = map(param_sliders[7].value(), 0, 100, 0, 200);
  obj["x4"] = map(param_sliders[8].value(), 0, 100, 0, 100);
  obj["y4"] = map(param_sliders[9].value(), 0, 100, 0, 200);
  obj["x5"] = map(param_sliders[10].value(), 0, 100, 0, 100);
  obj["y5"] = map(param_sliders[11].value(), 0, 100, 0, 200);
  obj["x6"] = map(param_sliders[12].value(), 0, 100, 0, 100);
  obj["y6"] = map(param_sliders[13].value(), 0, 100, 0, 200);
  obj["x7"] = map(param_sliders[14].value(), 0, 100, 0, 100);
  obj["y7"] = map(param_sliders[15].value(), 0, 100, 0, 200);

  return obj;
}

let numSliders = 16;

// PROBABLY DON't NEED TO EDIT ANYTHING ELSE.

let param_sliders = [];

let main_canvas = null;

const canvasWidth = 960;
const canvasHeight = 500;

let debugBox = false;

function setup () {
  // create the drawing canvas, save the canvas element
  main_canvas = createCanvas(canvasWidth, canvasHeight);

  // rotation in degrees (more slider friendly)
  angleMode(DEGREES);

  for(let i=0; i<numSliders; i++) {
    let cur_row = select("#row" + (i+1))
    cur_row.show();
    let cur_slider = createSlider(0, 100, 50)
    let containerString = "slider" + (i+1) + "Container"
    cur_slider.parent(containerString);
    param_sliders.push(cur_slider);
  }

  button = createButton('show data');
  button.mousePressed(buttonPressedEvent);
  button.parent(buttonContainer);
}

function buttonPressedEvent() {
  let obj = sliderToDataObject();
  json = JSON.stringify(obj, null, 2);
  alert(json);
}

function draw () {
  // clear screen
  background(colorBack);

  // compute the center of the canvas
  let center_x = canvasWidth / 2;
  let center_y = canvasHeight / 2;

  // draw the letters A, B, C from saved data
  push();
  scale(2);
  translate(width/4 - 50, 25);

  if (debugBox) {
    noFill()
    strokeWeight(4);
    stroke(0, 200, 0);
    rect(0, 0, 100, 200);
  }

  let obj = sliderToDataObject();
  drawLetter(obj);
  pop();
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
  else if (key == 'd') {
    debugBox = !debugBox;
    // console.log("debugBox is now: " + debugBox);
    redraw();
  }
  else if (key == ' ') {
    let obj = sliderToDataObject();
    json = JSON.stringify(obj, null, 2);
    console.log(json);
  }
}

## exhibition.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="letters.js"></script>
    <script language="javascript" type="text/javascript" src="draw_letters.js"></script>
    <script language="javascript" type="text/javascript" src="exhibition.js"></script>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
        </div>
    </div>
<p>
    Links to other sections:
<ul>
    <li><a href="sketch.html">sketch</a>
    <li><a href="alphabet.html">alphabet</a>
    <li><a href="interaction.html">interaction</a>
    <li><a href="exhibition.html">exhibition</a>
<ul>
</body>

## exhibition.js
/*
 * Here are some things you can edit
 */
const colorBack    = (7,10,41);
const colorFront   = "#199cff";
const colorLines   = "#000090";

/*
 * do not edit this rest of this file, instead edit the letter
 * drawing code in draw_letters.js
 */

const canvasWidth = 960;
const canvasHeight = 500;

// these variables are used for animation
let soloCurLetter = "B";
let soloLastLetter = "A"
let soloPrevObj = alphabet["default"];
let soloIsAnimating = false;
let soloNumAnimationFrames = 30;
let soloCurAnimationFrame = 0;

// Handy string of all letters available
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?";

let chosenLetters = [];
let chosenPrevObjs = [null, null, null, null, null, null, null, null];
let chosenIsAnimating = [false, false, false, false, false, false, false, false];
let chosenNumAnimationFrames = 30;
let chosenCurAnimationFrame = [0, 0, 0, 0, 0, 0, 0, 0];
let curChosenLetter = 0;

let lastKeyPressedTime;
let secondsUntilSwapMode = 15;
let lastWordSwappedTime;
let isSwappingWords = true;
let secondsPerWord = 8;
let curSwapWord = 0;

var defaultSwapWords = [
  "ACTUALLY",
  "1234567?",
  "EXPECTED",
  "PROPERTY",
  "ADDITION",
  "FOLLOWED",
  "PROVIDED",
  "ALTHOUGH",
  "HAPPENED",
  "QUESTION",
  "AMERICAN",
  "INCREASE",
  "RECEIVED",
  "ANYTHING",
  "INDUSTRY",
  "RELIGION",
  "BUILDING",
  "INTEREST",
  "REMEMBER",
  "BUSINESS",
  "INVOLVED",
  "REQUIRED",
  "CHILDREN",
  "NATIONAL",
  "SERVICES",
  "COMPLETE",
  "ORGANIZE",
  "SOUTHERN",
  "CONSIDER",
  "PERSONAL",
  "STANDARD",
  "CONTINUE",
  "PLANNING",
  "STRENGTH",
  "ALPHABET",
  "POSITION",
  "STUDENTS",
  "DECISION",
  "POSSIBLE",
  "SUDDENLY",
  "DIRECTLY",
  "PRESSURE",
  "THINKING",
  "DISTRICT",
  "PROBABLY",
  "TOGETHER",
  "ECONOMIC",
  "PROBLEMS",
  "TRAINING",
  "EVIDENCE",
  "PROGRAMS"
]

const interpolation_is_on = (typeof interpolate_letter === "function")

function setup () {
  // create the drawing canvas, save the canvas element
  main_canvas = createCanvas(canvasWidth, canvasHeight);
  main_canvas.parent('canvasContainer');

  let now = millis();
  lastKeyPressedTime = now;
  lastWordSwappedTime = now;

  if (typeof swapWords === 'undefined') {
      // the variable is defined
      swapWords = [];
  }
  swapWords = swapWords.concat(defaultSwapWords);
  chosenLetters = [];
  let first_word = swapWords[0];
  for(let i=0; i<first_word.length; i++) {
    chosenLetters.push(first_word[i]);
  }
}

function getCharacterInterpolationObj(percent, oldObj, newObj) {
  if (interpolation_is_on) {
    // safe to use the function
    obj = interpolate_letter(percent, oldObj, newObj)
  }
  else {
    if(percent == 0) {
      obj = oldObj;
    }
    else {
      obj = newObj;
    }
  }
  return obj;
}

function getObjFromChar(c) {
  if (c in alphabet) {
    return alphabet[c];
  }
  else {
    return alphabet["default"];
  }
}

function getCharacterInterpolation(percent, oldChar, newChar) {
  let oldObj = getObjFromChar(oldChar);
  let newObj = getObjFromChar(newChar);
  return getCharacterInterpolationObj(percent, oldObj, newObj);
}


function computeCurrentSoloChar() {
  // now figure out what object to draw
  let obj;
  if (soloIsAnimating) {
    nextObj = getObjFromChar(soloCurLetter);
    progress = map(soloCurAnimationFrame, 0, soloNumAnimationFrames, 0, 100);
    obj = getCharacterInterpolationObj(progress, soloPrevObj, nextObj)
  }
  else {
    obj = getObjFromChar(soloCurLetter);
  }
  return obj;
}

// draws a single character given an object, position, and scale
function drawFromDataObject(x, y, s, obj) {
  push();
  translate(x, y);
  scale(s, s);
  drawLetter(obj);
  pop();
}

function computeCurrentChosenChar(n) {
  // now figure out what object to draw
  var obj;
  if (chosenIsAnimating[n]) {
    if(chosenCurAnimationFrame[n] < 0) {
      obj = chosenPrevObjs[n];
    }
    else {
      nextObj = getObjFromChar(chosenLetters[n]);
      if (interpolation_is_on) {
        // safe to use the function
        let percent = map(chosenCurAnimationFrame[n], 0, chosenNumAnimationFrames, 0, 100)
        // obj["box1"]["position"] = map(chosenCurAnimationFrame[n], 0, chosenNumAnimationFrames, chosenPrevObjs[n]["box1"]["position"], nextObj["box1"]["position"])

        obj = interpolate_letter(percent, chosenPrevObjs[n], nextObj)
      }
      else {
        obj = nextObj;
      }
    }
  }
  else {
    obj = getObjFromChar(chosenLetters[n]);
  }
  return obj;
}

function draw () {
  now = millis();
  // check to see if we should go into swapping mode
  if(!isSwappingWords && lastKeyPressedTime + 1000 * secondsUntilSwapMode < now) {
    isSwappingWords = true;
  }

  if(isSwappingWords) {
    if(lastWordSwappedTime + 1000 * secondsPerWord < now) {
      lastWordSwappedTime = now;
      curSwapWord = (curSwapWord + 1) % swapWords.length;
      for(var i=0; i<8; i++) {
        var c = swapWords[curSwapWord][i];
        swapExhibitLetter(i, c, 6*i);
      }
    }
  }

  background(7,10,41);
  fill(colorFront);
  stroke(95, 52, 8);

  // shorthand variables to allow margin
  var o = 20
  var w2 = width - 2 * o
  var h2 = height - 2 * o
  for(var i=0; i<8; i++) {
    // see if animation should be turned off
    if(chosenIsAnimating[i] && chosenCurAnimationFrame[i] >= chosenNumAnimationFrames) {
      chosenIsAnimating[i] = false;
    }
    // if we are animating, increment the number of animation frames
    if(chosenIsAnimating[i]) {
      chosenCurAnimationFrame[i] = chosenCurAnimationFrame[i] + 1;
    }
    var obj = computeCurrentChosenChar(i);
    drawFromDataObject(o + i*w2/8.0, o + h2/2.0 - 120, 1.0, obj)
  }
}

function swapExhibitLetter(n, c, frameDelay) {
  chosenPrevObjs[n] = computeCurrentChosenChar(n);
  chosenLetters[n] = c;
  chosenIsAnimating[n] = true;
  chosenCurAnimationFrame[n] = 0 - frameDelay;
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
  else {
    lastKeyPressedTime = millis();
    if(isSwappingWords) {
      isSwappingWords = false;
    }
    upper_key = key.toUpperCase();
    swapExhibitLetter(curChosenLetter, upper_key, 0);
    curChosenLetter = (curChosenLetter + 1) % 8;
  }
}

## 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="letters.js"></script>
    <script language="javascript" type="text/javascript" src="draw_letters.js"></script>
    <script language="javascript" type="text/javascript" src="exhibition.js"></script>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
        </div>
    </div>
<p>
    Links to other sections:
<ul>
    <li><a href="sketch.html">sketch</a>
    <li><a href="alphabet.html">alphabet</a>
    <li><a href="interaction.html">interaction</a>
    <li><a href="exhibition.html">exhibition</a>
<ul>
</body>

## interaction.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="letters.js"></script>
    <script language="javascript" type="text/javascript" src="draw_letters.js"></script>
    <script language="javascript" type="text/javascript" src="interaction.js"></script>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
        </div>
    </div>
<p>
    Links to other sections:
<ul>
    <li><a href="sketch.html">sketch</a>
    <li><a href="alphabet.html">alphabet</a>
    <li><a href="interaction.html">interaction</a>
    <li><a href="exhibition.html">exhibition</a>
<ul>
</body>

## interaction.js
/*
 * Here are some things you can edit
 */
const colorBack    = (7,10,41);
const colorLines   = (0);

/*
 * do not edit this rest of this file, instead edit the letter
 * drawing code in draw_letters.js
 */

const canvasWidth = 960;
const canvasHeight = 500;

// these variables are used for animation
let soloCurLetter = "B";
let soloLastLetter = "A"
let soloPrevObj = alphabet["default"];
let soloIsAnimating = false;
let soloNumAnimationFrames = 30;
let soloCurAnimationFrame = 0;

let debugBox = false;

// Handy string of all letters available
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?";

function setup () {
  // create the drawing canvas, save the canvas element
  main_canvas = createCanvas(canvasWidth, canvasHeight);
  main_canvas.parent('canvasContainer');

  // with no animation, redrawing the screen is not necessary
  // noLoop();
}

function mouseClicked() {
  debugBox = !debugBox;
  // console.log("debugBox is now: " + debugBox);
  redraw();
}

const interpolation_is_on = (typeof interpolate_letter === "function")

function getCharacterInterpolationObj(percent, oldObj, newObj) {
  if (interpolation_is_on) {
    // safe to use the function
    obj = interpolate_letter(percent, oldObj, newObj)
  }
  else {
    if(percent == 0) {
      obj = oldObj;
    }
    else {
      obj = newObj;
    }
  }
  return obj;
}

function getObjFromChar(c) {
  if (c in alphabet) {
    return alphabet[c];
  }
  else {
    return alphabet["default"];
  }
}

function getCharacterInterpolation(percent, oldChar, newChar) {
  let oldObj = getObjFromChar(oldChar);
  let newObj = getObjFromChar(newChar);
  return getCharacterInterpolationObj(percent, oldObj, newObj);
}


function computeCurrentSoloChar() {
  // now figure out what object to draw
  var obj;
  if (soloIsAnimating) {
    nextObj = getObjFromChar(soloCurLetter);
    progress = map(soloCurAnimationFrame, 0, soloNumAnimationFrames, 0, 100);
    obj = getCharacterInterpolationObj(progress, soloPrevObj, nextObj)
  }
  else {
    obj = getObjFromChar(soloCurLetter);
  }
  return obj;
}

let hot_key_press = false;
function draw () {
  // clear screen
  background(7,10,41);
  //background(30);

  // draw the interpolation on the guidelines
  push();
  scale(0.5);

  // constants
  const left_margin = 40;
  const right_margin = 2*width - 40;
  const top_margin = 80;
  const bottom_margin = 2*height - 60;
  const numSteps = 11;
  const x_step = (right_margin - left_margin + 100) / (numSteps + 1)
  const first_letter_offset_x = 20;

  translate(0, top_margin);

  // draw lines
  stroke(83.1, 68.6, 21.6);
  line(left_margin, 0, right_margin, 0);
  for(let i=left_margin; i<right_margin-8; i+=30) {
    line(i, 100, i+12, 100);
  }
  line(left_margin, 200, right_margin, 200);

  translate(left_margin+first_letter_offset_x, 0);
  for(let i=0; i<numSteps; i = i+1) {
    let percent = map(i, 0, numSteps, 0, 100);
    let curLetterObj = getCharacterInterpolation(percent, soloLastLetter, soloCurLetter);
    // print(curLetterObj, soloLastLetter, soloCurLetter);
    if (debugBox) {
      noFill()
      strokeWeight(4);
      stroke(0, 200, 0);
      rect(0, 0, 100, 200);
    }

    if (interpolation_is_on || (i==0 || i==numSteps-1)) {
      drawLetter(curLetterObj);
    }
    stroke(83.1, 68.6, 21.6);
    fill(83.1, 68.6, 21.6);
    textSize(50);
    textAlign(CENTER)
    if (i == 0) {
      text(soloLastLetter, 50, 280);
    }
    else if (i == (numSteps -1)) {
      if (hot_key_press) {
        rect(50-40, 280-40, 80, 80);
        hot_key_press = false;
      }
      text(soloCurLetter, 50, 280);
    }
    else if (interpolation_is_on) {
      text("" + i*10 + "%", 50, 280);
    }
    translate(x_step, 0);
  }
  pop();

  // now draw the letter full size below

  // compute the center of the canvas
  let center_x = canvasWidth / 2;
  let center_y = canvasHeight / 2;

  // see if animation should be turned off
  if(soloIsAnimating && soloCurAnimationFrame >= soloNumAnimationFrames) {
    soloIsAnimating = false;
  }
  // if we are animating, increment the number of animation frames
  if(soloIsAnimating) {
    soloCurAnimationFrame = soloCurAnimationFrame + 1;
  }

  push();
  translate(center_x, center_y);
  let cur_obj = computeCurrentSoloChar();
  drawLetter(cur_obj);
  pop();
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
  else {
    lastKeyPressedTime = millis();
    let upper_key = key.toUpperCase();
    hot_key_press = true;
    soloPrevObj = computeCurrentSoloChar();
    soloLastLetter = soloCurLetter;
    soloCurLetter = upper_key;
    soloIsAnimating = true;
    soloCurAnimationFrame = 0;
  }
}

## letters.js
const alphabet = {
  "default": {
    "size": 40,
    "x": 100,
    "y": 30,
    "x1":73,
    "y1":0,
    "x2":0,
    "y2":0,
    "x3":100,
    "y3":90,
    "x4":38,
    "y4":112,
    "x5":37,
    "y5":200,
    "x6":100,
    "y6":58,
    "x7":34,
    "y7":14
  },
  "A": {
    "size": 40,
    "x": 50,
    "y": 0,
    "x1": 100,
    "y1": 200,
    "x2": 0,
    "y2": 76,
    "x3": 0,
    "y3": 200,
    "x4": 53,
    "y4": 142,
    "x5": 53,
    "y5": 142
  },

  "B": {
    "size": 75,
   "x": 25,
   "y": 0,
   "x1": 75,
   "y1": 46,
   "x2": 46,
   "y2": 96,
   "x3": 29,
   "y3": 200,
   "x4": 100,
   "y4": 140,
   "x5": 0,
   "y5": 60
  },

  "C": {
    "size": 50,
   "x": 0,
   "y": 45,
   "x1": 45,
   "y1": 0,
   "x2": 100,
   "y2": 0,
   "x3": 0,
   "y3": 152,
   "x4": 52,
   "y4": 200,
   "x5": 100,
   "y5": 200,
   "x6": 0,
   "y6": 98
},


  "D": {
    "size": 50,
   "x": 100,
   "y": 58,
   "x1": 0,
   "y1": 0,
   "x2":0,
   "y2":200,
   "x3":0,
   "y3":200,
   "x4":100,
   "y4":130,
   "x5":0,
   "y5":0,
   "x6":100,
   "y6":58
},

"E": {
   "size": 50,
   "x": 0,
   "y": 100,
   "x1": 0,
   "y1": 200,
   "x2":0,
   "y2":100,
   "x3":100,
   "y3":0,
   "x4":0,
   "y4":0,
   "x5":0,
   "y5":200,
   "x6":100,
   "y6":100,
   "x7":100,
   "y7":200

},

"F": {
    "size": 50,
   "x": 100,
   "y": 0,
   "x1": 0,
   "y1": 0,
   "x2":0,
   "y2":200,
   "x3":0,
   "y3":84,
   "x4":0,
   "y4":84,
   "x5":100,
   "y5":82,
   "x6":100,
   "y6":82
   },

"G": {
  "size": 50,
"x": 0,
"y": 154,
  "x1": 49,
"y1": 200,
"x2":100,
"y2":200,
"x3":0,
"y3":46,
"x4":49,
"y4":0,
 "x5":100,
"y5":0,
"x6":0,
"y6":98,
"x7":75,
"y7":168
},

"H": {
"size": 50,
"x": 100,
"y": 0,
"x1":100,
"y1":200,
"x2":100,
"y2":200,
"x3":0,
"y3":200,
"x4":0,
"y4":0,
 "x5":50,
"y5":100,
"x6":0,
"y6":0,
"x7":100,
"y7":0

},


"I": {
"size": 50,
"x": 0,
"y": 200,
  "x1":48,
"y1":54,
"x2":100,
"y2":0,
"x3":100,
"y3":200,
"x4":50,
"y4":130,
 "x5":47,
"y5":0,
"x6":48,
"y6":200,
"x7":0,
"y7":0
},

"J": {
  "size": 50,
"x": 50,
"y":150,
  "x1": 0,
"y1": 0,
"x2":50,
"y2":20,
"x3":0,
"y3":200,
"x4":50,
"y4":200,
 "x5":0,
"y5":200,
"x6":50,
"y6":0,
"x7":100,
"y7":0

},

"K": {
  "size": 50,
  "x": 0,
  "y": 100,
    "x1": 0,
  "y1": 200,
  "x2":0,
  "y2":20,
  "x3":100,
  "y3":0,
  "x4":0,
  "y4":20,
   "x5":100,
  "y5":200,
  "x6":100,
  "y6":200,
  "x7":100,
  "y7":200

},

"L": {
  "size": 50,
"x": 0,
"y": 0,
  "x1": 0,
"y1": 200,
"x2":50,
"y2":150,
"x3":0,
"y3":200,
"x4":100,
"y4":200,
 "x5":0,
"y5":200,
"x6":100,
"y6":200,
"x7":100,
"y7":200

},
//
"M": {
  "size": 50,
// "x": 50,
// "y": 160,
// "x1":23,
// "y1": 0,
// "x2":50,
// "y2":160,
// "x3":100,
// "y3":200,
// "x4":70,
// "y4":0,
//  "x5":70,
// "y5":0,
// "x6":50,
// "y6":160,
// "x7":0,
// "y7":200

"x": 50,
"y": 160,
"x1":23,
"y1": 0,
"x2":50,
"y2":160,
"x3":100,
"y3":200,
"x4":70,
"y4":0,
 "x5":70,
"y5":0,
"x6":50,
"y6":160,
"x7":0,
"y7":200
 },

"N": {
  "size": 50,
"x": 100,
"y": 200,
  "x1": 0,
"y1": 0,
"x2":0,
"y2":200,
"x3":0,
"y3":100,
"x4":100,
"y4":200,
 "x5":100,
"y5":0,
"x6":100,
"y6":100,
"x7":0,
"y7":200

},
//
"O": {
  "size": 50,
"x": 50,
"y": 0,
  "x1": 100,
"y1": 50,
"x2":50,
"y2":200,
"x3":0,
"y3":50,
"x4":0,
"y4":150,
 "x5":50,
"y5":200,
"x6":50,
"y6":0,
"x7":100,
"y7":150

},
//
"P": {
  "size": 50,
"x": 10,
"y": 80,
  "x1": 100,
"y1": 80,
"x2":0,
"y2":80,
"x3":0,
"y3":200,
"x4":0,
"y4":0,
 "x5":100,
"y5":0,
"x6":0,
"y6":0,
"x7":100,
"y7":0

},
//
"Q": {
  "size": 50,
"x": 50,
"y": 0,
  "x1":100,
"y1": 50,
"x2":56,
"y2":180,
"x3":0,
"y3":50,
"x4":0,
"y4":150,
 "x5":100,
"y5":200,
"x6":50,
"y6":0,
"x7":100,
"y7":150
},
//
"R": {
  "size": 50,
"x": 100,
"y": 84,
  "x1": 0,
"y1": 84,
"x2":0,
"y2":0,
"x3":100,
"y3":0,
"x4":0,
"y4":0,
 "x5":0,
"y5":200,
"x6":0,
"y6":0,
"x7":100,
"y7":200
 },
//
"S": {
  "size": 50,
"x": 100,
"y": 100,
  "x1": 0,
"y1": 100,
"x2":100,
"y2":0,
"x3":100,
"y3":200,
"x4":100,
"y4":200,
 "x5":0,
"y5":200,
"x6":0,
"y6":100,
"x7":0,
"y7":0
 },
//
"T": {
  "size": 50,
"x": 50,
"y": 200,
  "x1": 58,
"y1": 0,
"x2":100,
"y2":0,
"x3":50,
"y3":200,
"x4":45,
"y4":0,
 "x5":0,
"y5":0,
"x6":50,
"y6":200,
"x7":100,
"y7":0
},
//
"U": {
  "size": 50,
"x": 100,
"y": 0,
  "x1": 100,
"y1": 200,
"x2":0,
"y2":200,
"x3":0,
"y3":200,
"x4":0,
"y4":200,
 "x5":0,
"y5":0,
"x6":100,
"y6":200
},
//
"V": {
  "size": 50,
"x": 0,
"y": 0,
  "x1": 50,
"y1": 200,
"x2":100,
"y2":0,
// "x3":0,
// "y3":200,
"x4":0,
"y4":0,
 "x5":100,
"y5":0
// "x6":100,
// "y6":58
 },
//
"W": {
  "size": 50,
"x": 93,
"y": 45,
  "x1": 93,
"y1": 45,
"x2":100,
"y2":0,
"x3":40,
"y3":200,
"x4":10,
"y4":42,
 "x5":0,
"y5":0,
"x6":70,
"y6":200,
"x7":100,
"y7":0

 },
//
"X": {
  "size": 50,
"x": 0,
"y": 200,
  "x1": 100,
"y1": 200,
"x2":0,
"y2":0,
"x3":0,
"y3":200,
"x4":0,
"y4":200,
 "x5":100,
"y5":0,
"x6":100,
"y6":200
},
//
"Y": {
  "size": 50,
"x": 0,
"y": 0,
  "x1": 100,
"y1": 0,
"x2":50,
"y2":50,
"x3":50,
"y3":50,
"x4":50,
"y4":200,
 "x5":50,
"y5":50,
"x6":0,
"y6":0
},
//
"Z": {
  "size": 50,
"x": 0,
"y": 200,
  "x1": 100,
"y1": 0,
"x2":0,
"y2":0,
"x3":20,
"y3":200,
"x4":0,
"y4":200,
 "x5":100,
"y5":200,
"x6":35,
"y6":200,
"x7":83,
"y7":30


},

"0": {
  "size": 50,
"x": 0,
"y": 0,
  "x1": 0,
"y1": 200,
"x2":100,
"y2":200,
"x3":100,
"y3":0,
"x4":100,
"y4":0,
 "x5":100,
"y5":200,
"x6":50,
"y6":100,
"x7":50,
"y7":100
},

"1": {
  "size": 50,
"x": 50,
"y": 0,
  "x1": 50,
"y1": 180,
"x2":0,
"y2":200,
"x3":50,
"y3":30,
"x4":13,
"y4":28,
 "x5":50,
"y5":14,
"x6":50,
"y6":0,
"x7":100,
"y7":200
},
//
"2": {
  "size": 50,
"x": 100,
"y": 24,
  "x1": 72,
"y1": 0,
"x2":0,
"y2":0,
"x3":100,
"y3":86,
"x4":0,
"y4":200,
 "x5":100,
"y5":200,
"x6":100,
"y6":50,
"x7":30,
 "y7":10

},
//
"3": {
  "size": 50,
"x": 0,
"y": 200,
  "x1": 100,
"y1": 0,
"x2":0,
"y2":0,
"x3":100,
"y3":200,
"x4":100,
"y4":200,
 "x5":100,
"y5":0,
"x6":0,
"y6":102,
"x7":100,
 "y7":90
},
//
"4": {
  "size": 50,
"x": 91,
"y": 0,
  "x1": 0,
"y1": 100,
"x2":100,
"y2":100,
"x3":51,
"y3":200,
"x4":50,
"y4":100,
 "x5":50,
"y5":100,
"x6":50,
"y6":100,
"x7":50,
 "y7":100
},
//
"5": {
  "size": 50,
"x": 0,
"y": 100,
  "x1": 0,
"y1": 0,
"x2":100,
"y2":0,
"x3":100,
"y3":100,
"x4":100,
"y4":200,
 "x5":0,
"y5":200,
"x6":0,
"y6":100,
"x7":0,
 "y7":100

},
//
"6": {
  "size": 50,
"x": 0,
"y": 100,
  "x1": 0,
"y1": 0,
"x2":100,
"y2":0,
"x3":100,
"y3":100,
"x4":100,
"y4":200,
 "x5":0,
"y5":100,
"x6":0,
"y6":200
},
//
"7": {
  "size": 50,
"x": 0,
"y": 0,
  "x1": 100,
"y1": 200,
"x2":0,
"y2":0,
"x3":100,
"y3":0,
"x4":100,
"y4":200,
 "x5":100,
"y5":200,
"x6":100,
"y6":82,
"x7":100,
"y7":200,
 },
//
"8": {
  "size": 50,
"x": 0,
"y": 200,
  "x1": 100,
"y1": 0,
"x2":0,
"y2":0,
"x3":100,
"y3":200,
"x4":100,
"y4":100,
 "x5":0,
"y5":100,
"x6":100,
"y6":200,
"x7":0,
"y7":200
},
//
"9": {
  "size": 50,
"x": 0,
"y": 0,
  "x1": 0,
"y1":100,
"x2":0,
"y2":0,
"x3":100,
"y3":0,
"x4":100,
"y4":200,
 "x5":0,
"y5":200,
"x6":50,
"y6":100,
"x7":100,
"y7":100

}

}

## preview.jpg

      
    Raw
  

              preview.jpg
            
          
## purview.json
{
  "commits": [
      {
      "sha": "c2b991b9f993eb16a51ba16481f9e964913e45db",
      "name": "final"
    },
    {
      "sha": "933a128f815fbca3f9f041b6da0b75762fe20cee",
      "name": "experiment1"
    },
    {
      "sha": "7eaf0aa0cdfd2e6763357a4857ea607a5bfe0de8",
      "name": "experiment2"
    }
  ]
}

## sketch.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="sketch.js"></script>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
        </div>
    </div>
<p>
    Links to other sections:
<ul>
    <li><a href="sketch.html">sketch</a>
    <li><a href="alphabet.html">alphabet</a>
    <li><a href="interaction.html">interaction</a>
    <li><a href="exhibition.html">exhibition</a>
<ul>
</body>

## sketch.js
const canvasWidth = 960;
const canvasHeight = 500;

/*
 * my three variable per letter are:
 *
   size: radius of the second circle (in pixels)
   offsetx: x offset (in pixels) of the second circle
            relative to the first one
   offsety: y offset (in pixels) of the second circle
            relative to the first one
 *
 */

 //angleMode(DEGREES);
//background


const letterA = {
  "size": 0,
  "x": 240,
  "y":250,
  "x1":180,
  "y1":450,
  "x2":255,
  "y2":390,

  "x3":180,
  "y3":450,
  "x4":150,
  "y4":296,
   "x5":320,
  "y5":450,
  "x6":240,
  "y6":250,
  "x7":240,
  "y7":250


}

const letterB = {
  "size": 150,
  "x1":240,
  "y1": 250,
  "x2":240,
  "y2":440,
  "x3":350,
  "y3":380,
  "x4":240,
  "y4":250,
  "x5":330,
  "y5":310,
  "x6":290,
  "y6":350,
  "x7":170,
  "y7":290,
  "x8":240,
  "y8":440


  //"color": 40
}

const letterC = {
  "size": 100,
  "x1": 270,
  "y1": 250,
  "x2":200,
  "y2":250,
  "x3":150,
  "y3":420,
  "x4":150,
  "y4":360,
   "x5":200,
  "y5":250,
  "x6":150,
  "y6":300,
  "x7":150,
  "y7":300,
   "x8":270,
  "y8":460

}

const colorFront1  = "#052342";
const colorFront2  = "#0c427a";
const colorBack    = (30);
const colorStroke  = (255);


function setup () {

  // create the drawing canvas, save the canvas element
  main_canvas = createCanvas(canvasWidth, canvasHeight);
  main_canvas.parent('canvasContainer');

  // color/stroke setup
  stroke(colorStroke);
  strokeWeight(4);

  // with no animation, redrawing the screen is not necessary
  noLoop();

}

function drawLetter(posx, posy, letterData) {
  // determine parameters for second circle
 // noStroke();
  let size2 = letterData["size"];
  let pos1x = posx+letterData["x"];
  let pos1y = posy+letterData["y"];
  let pos2x = posx+letterData["x1"];
  let pos2y = posy+letterData["y1"];
  let pos3x = posx+letterData["x2"];
  let pos3y = posy+letterData["y2"];
  let pos4x = posx+letterData["x3"];
  let pos4y = posy+letterData["y3"];
  let pos5x = posx+letterData["x4"];
  let pos5y = posy+letterData["y4"];
  let pos6x = posx+letterData["x5"];
  let pos6y = posy+letterData["y5"];
  let pos7x = posx+letterData["x6"];
  let pos7y = posy+letterData["y6"];
  let pos8x = posx+letterData["x7"];
  let pos8y = posy+letterData["y7"];
  let pos9x = posx+letterData["x8"];
  let pos9y = posy+letterData["y8"];
  let pos10x = posx+letterData["x9"];
  let pos10y = posy+letterData["y9"];
  // let pos9x = posx+letterData["x5"];
  // let pos9y = posy+letterData["y5"];
  // let pos10x = posx+letterData["x6"];
  // let pos10y = posy+letterData["y6"];


  stroke(255);
  strokeWeight(1);
  //line(pos1x, pos1y, posx-50,posy+200);
  //fill(255, 15, 239, 50);
  //noStroke();
  noFill();

  line(pos5x, pos5y, pos9x, pos9y);
  line(pos2x, pos2y,pos3x,pos3y);
  line(pos7x, pos7y, pos6x, pos6y);
  line(pos5x, pos5y,pos6x,pos6y);
  line(pos4x, pos4y, pos8x, pos8y);
  line(pos4x, pos4y, pos9x, pos9y);
  //line(pos9x, pos9y, pos10x, pos10y);
  fill(colorStroke);
  ellipse(pos1x+0.5, pos1y, 4, 4);
  ellipse(pos5x+0.5, pos5y, 4, 4);
  ellipse(pos6x+0.5, pos6y, 4, 4);
  ellipse(pos3x+0.5, pos3y, 4, 4);
  ellipse(pos2x+0.5, pos2y, 4, 4);
  ellipse(pos8x+0.5, pos8y, 4, 4);

  fill(250,250,0, 90);
  noStroke();
  // triangle(pos2x,pos2y, pos3x, pos3y, pos1x, pos1y);
  // triangle(pos3x,pos3y, pos2x, pos2y, pos4x, pos4y);

  //line(pos1x, pos1y,pos3x,pos3y);
  // beginShape();
  // vertex(pos1x, pos1y);
  // vertex(pos2x, pos2y);
  // vertex(pos3x, pos3y);
  // endShape(CLOSE);


  //triangle(pos1x, pos1y,pos2x, pos2y,pos3x, pos3y);
 // triangle(pos7x, pos7y,pos5x, pos5y,pos6x, pos6y);
  //triangle(pos3x, pos3y, pos3x-50,pos3y+200,pos3x+36,pos3y+100);
 // triangle(pos3x, pos3y, pos6x+75,pos6y + 200,pos7x-25,pos7y+100);

  //fill(color);
  //fill(19, 52, 107,90);
  // beginShape();
  // vertex(pos2x,pos2y);
  // vertex(pos3x+120,pos3y);
  // vertex(pos2x+90,pos2y+100);
  // vertex(pos2x-25,pos2y+100);
  // endShape(CLOSE);

  //scale(1.5);
  // beginShape();
  // vertex(pos2x-25,pos2y+100);
  // vertex(pos2x+145,pos2y+100);
  // vertex(pos2x+115,pos2y+200);
  // vertex(pos2x-50,pos2y+200);
  // endShape(CLOSE);

}

function draw () {
  // clear screen
  background(colorBack);

     //backgrpund stars;
  for (var i=0; i<50; i++){
  var x = random(width);
  var y = random(height);
  var r = 0.5;
  fill(255);
  noStroke();
  ellipse(x,y,r*2,r*2);
}

  //ellipse()

  // compute the center of the canvas
  let center_x = canvasWidth/4;
  let center_y = -canvasHeight/4 ;

  // draw the letters A, B, C from saved data
  //translate(-100, -100);
  drawLetter(center_x-250, center_y,letterA);
  drawLetter(center_x, center_y, letterB);
  drawLetter(center_x + 250, center_y, letterC);
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
}

## 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);
  // call this function after 1 second
  setTimeout(function(){
    p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
  }, 1000);
}
	<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="letters.js"></script>
	<script language="javascript" type="text/javascript" src="draw_letters.js"></script>
	<script language="javascript" type="text/javascript" src="alphabet.js"></script>
	</head>
	<body style="background-color:white">
	<div class="outer">
	<div class="inner">
	<div id="canvasContainer"></div>
	</div>
	</div>
	<p>
	Links to other sections:
	<ul>
	<li><a href="sketch.html">sketch</a>
	<li><a href="alphabet.html">alphabet</a>
	<li><a href="interaction.html">interaction</a>
	<li><a href="exhibition.html">exhibition</a>
	<ul>
	</body>

	/*
	* do not edit this rest of this file, instead edit the letter
	* drawing code in draw_letters.js
	*/

	const canvasWidth = 960;
	const canvasHeight = 500;

	// Handy string of all letters available
	const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?";

	let debugBox = false;

	function setup () {
	// create the drawing canvas, save the canvas element
	main_canvas = createCanvas(canvasWidth, canvasHeight);
	main_canvas.parent('canvasContainer');

	// with no animation, redrawing the screen is not necessary
	noLoop();
	}

	function mouseClicked() {
	debugBox = !debugBox;
	// console.log("debugBox is now: " + debugBox);
	redraw();
	}

	function draw () {
	// clear screen
	background(7,10,41);

	// compute the center of the canvas
	let center_x = canvasWidth / 2;
	let center_y = canvasHeight / 2;

	// draw the letters A, B, C from saved data
	push();
	scale(0.5);

	// constants
	const left_margin = 40;
	const right_margin = 2*width - 40;
	const top_margin = 80;
	const bottom_margin = 2*height - 60;
	const x_step = 140;
	const y_step = 280;
	const first_letter_offset_x = 20;

	let cur_letter_index = 0;

	for(let j=top_margin; j<bottom_margin-y_step; j+=y_step) {
	push();
	translate(0, j);

	// draw lines
	stroke(83.1, 68.6, 21.6);
	line(left_margin, 0, right_margin, 0);
	for (let i=left_margin; i<right_margin-8; i+=30) {
	line(i, 100, i+12, 100);
	}
	line(left_margin, 200, right_margin, 200);

	translate(left_margin+first_letter_offset_x, 0);
	for (let i=left_margin+first_letter_offset_x; i<right_margin-x_step+1; i+=x_step) {
	if (cur_letter_index < letters.length) {
	if (debugBox) {
	noFill()
	strokeWeight(4);
	stroke(0, 200, 0);
	rect(0, 0, 100, 200);


	}

	let letter = letters[cur_letter_index];
	if (letter in alphabet) {
	drawLetter(alphabet[letter]);
	}
	else {
	drawLetter(alphabet["default"]);
	}
	translate(x_step, 0);
	cur_letter_index = (cur_letter_index + 1);
	}
	}
	pop();
	}
	}

	function keyTyped() {
	if (key == '!') {
	saveBlocksImages();
	}
	else if (key == '@') {
	saveBlocksImages(true);
	}
	}
	const colorFront1 = (0);
	const colorFront2 = (0);
	const colorStroke = (255);

	/*
	* Draw the letter given the letterData
	*
	* Letters should always be drawn with the
	* following bounding box guideline:
	* from (0,0) to (100, 200)
	*/

	// Draw the main star for each alphabet.
	function star(posx, posy){
	var radius = 5;
	fill(139, 161, 198);
	stroke(177, 190, 211);

	beginShape();
	for(var i = 0; i < 18; i++) {
	var x = cos(radians(i * 26)) * radius;
	var y = sin(radians(i * 26)) * radius;
	vertex(x, y);

	if(radius == 5) {
	radius = 2;
	} else {
	radius = 5;
	}
	}
	endShape();
	}

	function drawLetter(letterData) {

	//16 vertexs in total
	let posx = 0;
	let posy = 0;
	let pos1x = posx+letterData["x"];
	let pos1y = posy+letterData["y"];
	let pos2x = posx+letterData["x1"];
	let pos2y = posy+letterData["y1"];
	let pos3x = posx+letterData["x2"];
	let pos3y = posy+letterData["y2"];
	let pos4x = posx+letterData["x3"];
	let pos4y = posy+letterData["y3"];
	let pos5x = posx+letterData["x4"];
	let pos5y = posy+letterData["y4"];
	let pos6x = posx+letterData["x5"];
	let pos6y = posy+letterData["y5"];
	let pos7x = posx+letterData["x6"];
	let pos7y = posy+letterData["y6"];
	let pos8x = posx+letterData["x7"];
	let pos8y = posy+letterData["y7"];


	//color of the alphabet
	fill (255,0,0,60);
	noStroke();
	triangle(pos1x, pos1y, pos2x, pos2y, pos4x, pos4y);
	triangle(pos3x, pos3y, pos1x, pos1y, pos2x, pos2y);
	fill (134,191,210,50);
	triangle(pos2x, pos2y, pos8x, pos8y, pos3x, pos3y);

	//lines use to draw the alphabet
	stroke(255);
	strokeWeight(1);
	noFill();
	line(pos1x, pos1y, pos2x, pos2y);
	line(pos2x, pos2y, pos3x, pos3y);
	line(pos1x, pos1y, pos4x, pos4y);
	line(pos4x, pos4y, pos5x, pos5y);
	line(pos5x, pos5y, pos6x, pos6y);
	line(pos2x, pos2y, pos7x, pos7y);
	line(pos7x, pos7y, pos5x, pos5y);
	line(pos2x, pos2y, pos8x, pos8y);
	line(pos8x, pos8y, pos3x, pos3y);

	//stars or ellipse
	fill(39, 63, 102);
	stroke(39, 63, 102);
	ellipse(pos1x, pos1y, 5);
	ellipse(pos2x, pos2y, 5);
	ellipse(pos3x, pos3y, 5);
	ellipse(pos4x, pos4y, 5);
	ellipse(pos5x, pos5y, 5);
	ellipse(pos6x, pos6y, 5);
	//the Main star
	push();
	translate(pos4x,pos4y);
	star();
	pop();




	}

	function interpolate_letter(percent, oldObj, newObj) {
	let new_letter = {};

	//The animation function
	let new_percent = 0;
	let amount_of_anticipation = 40;

	if(percent <= amount_of_anticipation) {
	new_percent = map (percent, 0, 40, 0, -30);
	}
	else{
	new_percent = map(percent, 40, 100, -30, 100);
	}

	//variable
	new_letter["x"] = map(new_percent, 0, 100, oldObj["x"], newObj["x"]);
	new_letter["y"] = map(new_percent, 0, 100, oldObj["y"], newObj["y"]);
	new_letter["x1"] = map(new_percent, 0, 100, oldObj["x1"], newObj["x1"]);
	new_letter["y1"] = map(new_percent, 0, 100, oldObj["y1"], newObj["y1"]);
	new_letter["x2"] = map(new_percent, 0, 100, oldObj["x2"], newObj["x2"]);
	new_letter["y2"] = map(new_percent, 0, 100, oldObj["y2"], newObj["y2"]);
	new_letter["x3"] = map(new_percent, 0, 100, oldObj["x3"], newObj["x3"]);
	new_letter["y3"] = map(new_percent, 0, 100, oldObj["y3"], newObj["y3"]);
	new_letter["x4"] = map(new_percent, 0, 100, oldObj["x4"], newObj["x4"]);
	new_letter["y4"] = map(new_percent, 0, 100, oldObj["y4"], newObj["y4"]);
	new_letter["x5"] = map(new_percent, 0, 100, oldObj["x5"], newObj["x5"]);
	new_letter["y5"] = map(new_percent, 0, 100, oldObj["y5"], newObj["y5"]);

	new_letter["x5"] = oldObj["x5"];
	new_letter["y5"] = oldObj["y5"];


	return new_letter;
	}

	var swapWords = [
	"STARMAPS",
	"WENLINNN",
	"MDDN242W"
	]
	/*
	* Here are some things you can edit
	*/
	const colorBack = (130);
	const colorLines = (250);

	function sliderToDataObject() {
	let obj = {};
	obj["x"] = map(param_sliders[0].value(), 0, 100, 0, 100);
	obj["y"] = map(param_sliders[1].value(), 0, 100, 0, 200);
	obj["x1"] = map(param_sliders[2].value(), 0, 100, 0, 100);
	obj["y1"] = map(param_sliders[3].value(), 0, 100, 0, 200);
	obj["x2"] = map(param_sliders[4].value(), 0, 100, 0, 100);
	obj["y2"] = map(param_sliders[5].value(), 0, 100, 0, 200);
	obj["x3"] = map(param_sliders[6].value(), 0, 100, 0, 100);
	obj["y3"] = map(param_sliders[7].value(), 0, 100, 0, 200);
	obj["x4"] = map(param_sliders[8].value(), 0, 100, 0, 100);
	obj["y4"] = map(param_sliders[9].value(), 0, 100, 0, 200);
	obj["x5"] = map(param_sliders[10].value(), 0, 100, 0, 100);
	obj["y5"] = map(param_sliders[11].value(), 0, 100, 0, 200);
	obj["x6"] = map(param_sliders[12].value(), 0, 100, 0, 100);
	obj["y6"] = map(param_sliders[13].value(), 0, 100, 0, 200);
	obj["x7"] = map(param_sliders[14].value(), 0, 100, 0, 100);
	obj["y7"] = map(param_sliders[15].value(), 0, 100, 0, 200);

	return obj;
	}

	let numSliders = 16;

	// PROBABLY DON't NEED TO EDIT ANYTHING ELSE.

	let param_sliders = [];

	let main_canvas = null;

	const canvasWidth = 960;
	const canvasHeight = 500;

	let debugBox = false;

	function setup () {
	// create the drawing canvas, save the canvas element
	main_canvas = createCanvas(canvasWidth, canvasHeight);

	// rotation in degrees (more slider friendly)
	angleMode(DEGREES);

	for(let i=0; i<numSliders; i++) {
	let cur_row = select("#row" + (i+1))
	cur_row.show();
	let cur_slider = createSlider(0, 100, 50)
	let containerString = "slider" + (i+1) + "Container"
	cur_slider.parent(containerString);
	param_sliders.push(cur_slider);
	}

	button = createButton('show data');
	button.mousePressed(buttonPressedEvent);
	button.parent(buttonContainer);
	}

	function buttonPressedEvent() {
	let obj = sliderToDataObject();
	json = JSON.stringify(obj, null, 2);
	alert(json);
	}

	function draw () {
	// clear screen
	background(colorBack);

	// compute the center of the canvas
	let center_x = canvasWidth / 2;
	let center_y = canvasHeight / 2;

	// draw the letters A, B, C from saved data
	push();
	scale(2);
	translate(width/4 - 50, 25);

	if (debugBox) {
	noFill()
	strokeWeight(4);
	stroke(0, 200, 0);
	rect(0, 0, 100, 200);
	}

	let obj = sliderToDataObject();
	drawLetter(obj);
	pop();
	}

	function keyTyped() {
	if (key == '!') {
	saveBlocksImages();
	}
	else if (key == '@') {
	saveBlocksImages(true);
	}
	else if (key == 'd') {
	debugBox = !debugBox;
	// console.log("debugBox is now: " + debugBox);
	redraw();
	}
	else if (key == ' ') {
	let obj = sliderToDataObject();
	json = JSON.stringify(obj, null, 2);
	console.log(json);
	}
	}
	/*
	* Here are some things you can edit
	*/
	const colorBack = (7,10,41);
	const colorFront = "#199cff";
	const colorLines = "#000090";

	/*
	* do not edit this rest of this file, instead edit the letter
	* drawing code in draw_letters.js
	*/

	const canvasWidth = 960;
	const canvasHeight = 500;

	// these variables are used for animation
	let soloCurLetter = "B";
	let soloLastLetter = "A"
	let soloPrevObj = alphabet["default"];
	let soloIsAnimating = false;
	let soloNumAnimationFrames = 30;
	let soloCurAnimationFrame = 0;

	// Handy string of all letters available
	const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?";

	let chosenLetters = [];
	let chosenPrevObjs = [null, null, null, null, null, null, null, null];
	let chosenIsAnimating = [false, false, false, false, false, false, false, false];
	let chosenNumAnimationFrames = 30;
	let chosenCurAnimationFrame = [0, 0, 0, 0, 0, 0, 0, 0];
	let curChosenLetter = 0;

	let lastKeyPressedTime;
	let secondsUntilSwapMode = 15;
	let lastWordSwappedTime;
	let isSwappingWords = true;
	let secondsPerWord = 8;
	let curSwapWord = 0;

	var defaultSwapWords = [
	"ACTUALLY",
	"1234567?",
	"EXPECTED",
	"PROPERTY",
	"ADDITION",
	"FOLLOWED",
	"PROVIDED",
	"ALTHOUGH",
	"HAPPENED",
	"QUESTION",
	"AMERICAN",
	"INCREASE",
	"RECEIVED",
	"ANYTHING",
	"INDUSTRY",
	"RELIGION",
	"BUILDING",
	"INTEREST",
	"REMEMBER",
	"BUSINESS",
	"INVOLVED",
	"REQUIRED",
	"CHILDREN",
	"NATIONAL",
	"SERVICES",
	"COMPLETE",
	"ORGANIZE",
	"SOUTHERN",
	"CONSIDER",
	"PERSONAL",
	"STANDARD",
	"CONTINUE",
	"PLANNING",
	"STRENGTH",
	"ALPHABET",
	"POSITION",
	"STUDENTS",
	"DECISION",
	"POSSIBLE",
	"SUDDENLY",
	"DIRECTLY",
	"PRESSURE",
	"THINKING",
	"DISTRICT",
	"PROBABLY",
	"TOGETHER",
	"ECONOMIC",
	"PROBLEMS",
	"TRAINING",
	"EVIDENCE",
	"PROGRAMS"
	]

	const interpolation_is_on = (typeof interpolate_letter === "function")

	function setup () {
	// create the drawing canvas, save the canvas element
	main_canvas = createCanvas(canvasWidth, canvasHeight);
	main_canvas.parent('canvasContainer');

	let now = millis();
	lastKeyPressedTime = now;
	lastWordSwappedTime = now;

	if (typeof swapWords === 'undefined') {
	// the variable is defined
	swapWords = [];
	}
	swapWords = swapWords.concat(defaultSwapWords);
	chosenLetters = [];
	let first_word = swapWords[0];
	for(let i=0; i<first_word.length; i++) {
	chosenLetters.push(first_word[i]);
	}
	}

	function getCharacterInterpolationObj(percent, oldObj, newObj) {
	if (interpolation_is_on) {
	// safe to use the function
	obj = interpolate_letter(percent, oldObj, newObj)
	}
	else {
	if(percent == 0) {
	obj = oldObj;
	}
	else {
	obj = newObj;
	}
	}
	return obj;
	}

	function getObjFromChar(c) {
	if (c in alphabet) {
	return alphabet[c];
	}
	else {
	return alphabet["default"];
	}
	}

	function getCharacterInterpolation(percent, oldChar, newChar) {
	let oldObj = getObjFromChar(oldChar);
	let newObj = getObjFromChar(newChar);
	return getCharacterInterpolationObj(percent, oldObj, newObj);
	}


	function computeCurrentSoloChar() {
	// now figure out what object to draw
	let obj;
	if (soloIsAnimating) {
	nextObj = getObjFromChar(soloCurLetter);
	progress = map(soloCurAnimationFrame, 0, soloNumAnimationFrames, 0, 100);
	obj = getCharacterInterpolationObj(progress, soloPrevObj, nextObj)
	}
	else {
	obj = getObjFromChar(soloCurLetter);
	}
	return obj;
	}

	// draws a single character given an object, position, and scale
	function drawFromDataObject(x, y, s, obj) {
	push();
	translate(x, y);
	scale(s, s);
	drawLetter(obj);
	pop();
	}

	function computeCurrentChosenChar(n) {
	// now figure out what object to draw
	var obj;
	if (chosenIsAnimating[n]) {
	if(chosenCurAnimationFrame[n] < 0) {
	obj = chosenPrevObjs[n];
	}
	else {
	nextObj = getObjFromChar(chosenLetters[n]);
	if (interpolation_is_on) {
	// safe to use the function
	let percent = map(chosenCurAnimationFrame[n], 0, chosenNumAnimationFrames, 0, 100)
	// obj["box1"]["position"] = map(chosenCurAnimationFrame[n], 0, chosenNumAnimationFrames, chosenPrevObjs[n]["box1"]["position"], nextObj["box1"]["position"])

	obj = interpolate_letter(percent, chosenPrevObjs[n], nextObj)
	}
	else {
	obj = nextObj;
	}
	}
	}
	else {
	obj = getObjFromChar(chosenLetters[n]);
	}
	return obj;
	}

	function draw () {
	now = millis();
	// check to see if we should go into swapping mode
	if(!isSwappingWords && lastKeyPressedTime + 1000 * secondsUntilSwapMode < now) {
	isSwappingWords = true;
	}

	if(isSwappingWords) {
	if(lastWordSwappedTime + 1000 * secondsPerWord < now) {
	lastWordSwappedTime = now;
	curSwapWord = (curSwapWord + 1) % swapWords.length;
	for(var i=0; i<8; i++) {
	var c = swapWords[curSwapWord][i];
	swapExhibitLetter(i, c, 6*i);
	}
	}
	}

	background(7,10,41);
	fill(colorFront);
	stroke(95, 52, 8);

	// shorthand variables to allow margin
	var o = 20
	var w2 = width - 2 * o
	var h2 = height - 2 * o
	for(var i=0; i<8; i++) {
	// see if animation should be turned off
	if(chosenIsAnimating[i] && chosenCurAnimationFrame[i] >= chosenNumAnimationFrames) {
	chosenIsAnimating[i] = false;
	}
	// if we are animating, increment the number of animation frames
	if(chosenIsAnimating[i]) {
	chosenCurAnimationFrame[i] = chosenCurAnimationFrame[i] + 1;
	}
	var obj = computeCurrentChosenChar(i);
	drawFromDataObject(o + i*w2/8.0, o + h2/2.0 - 120, 1.0, obj)
	}
	}

	function swapExhibitLetter(n, c, frameDelay) {
	chosenPrevObjs[n] = computeCurrentChosenChar(n);
	chosenLetters[n] = c;
	chosenIsAnimating[n] = true;
	chosenCurAnimationFrame[n] = 0 - frameDelay;
	}

	function keyTyped() {
	if (key == '!') {
	saveBlocksImages();
	}
	else if (key == '@') {
	saveBlocksImages(true);
	}
	else {
	lastKeyPressedTime = millis();
	if(isSwappingWords) {
	isSwappingWords = false;
	}
	upper_key = key.toUpperCase();
	swapExhibitLetter(curChosenLetter, upper_key, 0);
	curChosenLetter = (curChosenLetter + 1) % 8;
	}
	}
	/*
	* Here are some things you can edit
	*/
	const colorBack = (7,10,41);
	const colorLines = (0);

	/*
	* do not edit this rest of this file, instead edit the letter
	* drawing code in draw_letters.js
	*/

	const canvasWidth = 960;
	const canvasHeight = 500;

	// these variables are used for animation
	let soloCurLetter = "B";
	let soloLastLetter = "A"
	let soloPrevObj = alphabet["default"];
	let soloIsAnimating = false;
	let soloNumAnimationFrames = 30;
	let soloCurAnimationFrame = 0;

	let debugBox = false;

	// Handy string of all letters available
	const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?";

	function setup () {
	// create the drawing canvas, save the canvas element
	main_canvas = createCanvas(canvasWidth, canvasHeight);
	main_canvas.parent('canvasContainer');

	// with no animation, redrawing the screen is not necessary
	// noLoop();
	}

	function mouseClicked() {
	debugBox = !debugBox;
	// console.log("debugBox is now: " + debugBox);
	redraw();
	}

	const interpolation_is_on = (typeof interpolate_letter === "function")

	function getCharacterInterpolationObj(percent, oldObj, newObj) {
	if (interpolation_is_on) {
	// safe to use the function
	obj = interpolate_letter(percent, oldObj, newObj)
	}
	else {
	if(percent == 0) {
	obj = oldObj;
	}
	else {
	obj = newObj;
	}
	}
	return obj;
	}

	function getObjFromChar(c) {
	if (c in alphabet) {
	return alphabet[c];
	}
	else {
	return alphabet["default"];
	}
	}

	function getCharacterInterpolation(percent, oldChar, newChar) {
	let oldObj = getObjFromChar(oldChar);
	let newObj = getObjFromChar(newChar);
	return getCharacterInterpolationObj(percent, oldObj, newObj);
	}


	function computeCurrentSoloChar() {
	// now figure out what object to draw
	var obj;
	if (soloIsAnimating) {
	nextObj = getObjFromChar(soloCurLetter);
	progress = map(soloCurAnimationFrame, 0, soloNumAnimationFrames, 0, 100);
	obj = getCharacterInterpolationObj(progress, soloPrevObj, nextObj)
	}
	else {
	obj = getObjFromChar(soloCurLetter);
	}
	return obj;
	}

	let hot_key_press = false;
	function draw () {
	// clear screen
	background(7,10,41);
	//background(30);

	// draw the interpolation on the guidelines
	push();
	scale(0.5);

	// constants
	const left_margin = 40;
	const right_margin = 2*width - 40;
	const top_margin = 80;
	const bottom_margin = 2*height - 60;
	const numSteps = 11;
	const x_step = (right_margin - left_margin + 100) / (numSteps + 1)
	const first_letter_offset_x = 20;

	translate(0, top_margin);

	// draw lines
	stroke(83.1, 68.6, 21.6);
	line(left_margin, 0, right_margin, 0);
	for(let i=left_margin; i<right_margin-8; i+=30) {
	line(i, 100, i+12, 100);
	}
	line(left_margin, 200, right_margin, 200);

	translate(left_margin+first_letter_offset_x, 0);
	for(let i=0; i<numSteps; i = i+1) {
	let percent = map(i, 0, numSteps, 0, 100);
	let curLetterObj = getCharacterInterpolation(percent, soloLastLetter, soloCurLetter);
	// print(curLetterObj, soloLastLetter, soloCurLetter);
	if (debugBox) {
	noFill()
	strokeWeight(4);
	stroke(0, 200, 0);
	rect(0, 0, 100, 200);
	}

	if (interpolation_is_on \|\| (i==0 \|\| i==numSteps-1)) {
	drawLetter(curLetterObj);
	}
	stroke(83.1, 68.6, 21.6);
	fill(83.1, 68.6, 21.6);
	textSize(50);
	textAlign(CENTER)
	if (i == 0) {
	text(soloLastLetter, 50, 280);
	}
	else if (i == (numSteps -1)) {
	if (hot_key_press) {
	rect(50-40, 280-40, 80, 80);
	hot_key_press = false;
	}
	text(soloCurLetter, 50, 280);
	}
	else if (interpolation_is_on) {
	text("" + i*10 + "%", 50, 280);
	}
	translate(x_step, 0);
	}
	pop();

	// now draw the letter full size below

	// compute the center of the canvas
	let center_x = canvasWidth / 2;
	let center_y = canvasHeight / 2;

	// see if animation should be turned off
	if(soloIsAnimating && soloCurAnimationFrame >= soloNumAnimationFrames) {
	soloIsAnimating = false;
	}
	// if we are animating, increment the number of animation frames
	if(soloIsAnimating) {
	soloCurAnimationFrame = soloCurAnimationFrame + 1;
	}

	push();
	translate(center_x, center_y);
	let cur_obj = computeCurrentSoloChar();
	drawLetter(cur_obj);
	pop();
	}

	function keyTyped() {
	if (key == '!') {
	saveBlocksImages();
	}
	else if (key == '@') {
	saveBlocksImages(true);
	}
	else {
	lastKeyPressedTime = millis();
	let upper_key = key.toUpperCase();
	hot_key_press = true;
	soloPrevObj = computeCurrentSoloChar();
	soloLastLetter = soloCurLetter;
	soloCurLetter = upper_key;
	soloIsAnimating = true;
	soloCurAnimationFrame = 0;
	}
	}
	const alphabet = {
	"default": {
	"size": 40,
	"x": 100,
	"y": 30,
	"x1":73,
	"y1":0,
	"x2":0,
	"y2":0,
	"x3":100,
	"y3":90,
	"x4":38,
	"y4":112,
	"x5":37,
	"y5":200,
	"x6":100,
	"y6":58,
	"x7":34,
	"y7":14
	},
	"A": {
	"size": 40,
	"x": 50,
	"y": 0,
	"x1": 100,
	"y1": 200,
	"x2": 0,
	"y2": 76,
	"x3": 0,
	"y3": 200,
	"x4": 53,
	"y4": 142,
	"x5": 53,
	"y5": 142
	},

	"B": {
	"size": 75,
	"x": 25,
	"y": 0,
	"x1": 75,
	"y1": 46,
	"x2": 46,
	"y2": 96,
	"x3": 29,
	"y3": 200,
	"x4": 100,
	"y4": 140,
	"x5": 0,
	"y5": 60
	},

	"C": {
	"size": 50,
	"x": 0,
	"y": 45,
	"x1": 45,
	"y1": 0,
	"x2": 100,
	"y2": 0,
	"x3": 0,
	"y3": 152,
	"x4": 52,
	"y4": 200,
	"x5": 100,
	"y5": 200,
	"x6": 0,
	"y6": 98
	},


	"D": {
	"size": 50,
	"x": 100,
	"y": 58,
	"x1": 0,
	"y1": 0,
	"x2":0,
	"y2":200,
	"x3":0,
	"y3":200,
	"x4":100,
	"y4":130,
	"x5":0,
	"y5":0,
	"x6":100,
	"y6":58
	},

	"E": {
	"size": 50,
	"x": 0,
	"y": 100,
	"x1": 0,
	"y1": 200,
	"x2":0,
	"y2":100,
	"x3":100,
	"y3":0,
	"x4":0,
	"y4":0,
	"x5":0,
	"y5":200,
	"x6":100,
	"y6":100,
	"x7":100,
	"y7":200

	},

	"F": {
	"size": 50,
	"x": 100,
	"y": 0,
	"x1": 0,
	"y1": 0,
	"x2":0,
	"y2":200,
	"x3":0,
	"y3":84,
	"x4":0,
	"y4":84,
	"x5":100,
	"y5":82,
	"x6":100,
	"y6":82
	},

	"G": {
	"size": 50,
	"x": 0,
	"y": 154,
	"x1": 49,
	"y1": 200,
	"x2":100,
	"y2":200,
	"x3":0,
	"y3":46,
	"x4":49,
	"y4":0,
	"x5":100,
	"y5":0,
	"x6":0,
	"y6":98,
	"x7":75,
	"y7":168
	},

	"H": {
	"size": 50,
	"x": 100,
	"y": 0,
	"x1":100,
	"y1":200,
	"x2":100,
	"y2":200,
	"x3":0,
	"y3":200,
	"x4":0,
	"y4":0,
	"x5":50,
	"y5":100,
	"x6":0,
	"y6":0,
	"x7":100,
	"y7":0

	},


	"I": {
	"size": 50,
	"x": 0,
	"y": 200,
	"x1":48,
	"y1":54,
	"x2":100,
	"y2":0,
	"x3":100,
	"y3":200,
	"x4":50,
	"y4":130,
	"x5":47,
	"y5":0,
	"x6":48,
	"y6":200,
	"x7":0,
	"y7":0
	},

	"J": {
	"size": 50,
	"x": 50,
	"y":150,
	"x1": 0,
	"y1": 0,
	"x2":50,
	"y2":20,
	"x3":0,
	"y3":200,
	"x4":50,
	"y4":200,
	"x5":0,
	"y5":200,
	"x6":50,
	"y6":0,
	"x7":100,
	"y7":0

	},

	"K": {
	"size": 50,
	"x": 0,
	"y": 100,
	"x1": 0,
	"y1": 200,
	"x2":0,
	"y2":20,
	"x3":100,
	"y3":0,
	"x4":0,
	"y4":20,
	"x5":100,
	"y5":200,
	"x6":100,
	"y6":200,
	"x7":100,
	"y7":200

	},

	"L": {
	"size": 50,
	"x": 0,
	"y": 0,
	"x1": 0,
	"y1": 200,
	"x2":50,
	"y2":150,
	"x3":0,
	"y3":200,
	"x4":100,
	"y4":200,
	"x5":0,
	"y5":200,
	"x6":100,
	"y6":200,
	"x7":100,
	"y7":200

	},
	//
	"M": {
	"size": 50,
	// "x": 50,
	// "y": 160,
	// "x1":23,
	// "y1": 0,
	// "x2":50,
	// "y2":160,
	// "x3":100,
	// "y3":200,
	// "x4":70,
	// "y4":0,
	// "x5":70,
	// "y5":0,
	// "x6":50,
	// "y6":160,
	// "x7":0,
	// "y7":200

	"x": 50,
	"y": 160,
	"x1":23,
	"y1": 0,
	"x2":50,
	"y2":160,
	"x3":100,
	"y3":200,
	"x4":70,
	"y4":0,
	"x5":70,
	"y5":0,
	"x6":50,
	"y6":160,
	"x7":0,
	"y7":200
	},

	"N": {
	"size": 50,
	"x": 100,
	"y": 200,
	"x1": 0,
	"y1": 0,
	"x2":0,
	"y2":200,
	"x3":0,
	"y3":100,
	"x4":100,
	"y4":200,
	"x5":100,
	"y5":0,
	"x6":100,
	"y6":100,
	"x7":0,
	"y7":200

	},
	//
	"O": {
	"size": 50,
	"x": 50,
	"y": 0,
	"x1": 100,
	"y1": 50,
	"x2":50,
	"y2":200,
	"x3":0,
	"y3":50,
	"x4":0,
	"y4":150,
	"x5":50,
	"y5":200,
	"x6":50,
	"y6":0,
	"x7":100,
	"y7":150

	},
	//
	"P": {
	"size": 50,
	"x": 10,
	"y": 80,
	"x1": 100,
	"y1": 80,
	"x2":0,
	"y2":80,
	"x3":0,
	"y3":200,
	"x4":0,
	"y4":0,
	"x5":100,
	"y5":0,
	"x6":0,
	"y6":0,
	"x7":100,
	"y7":0

	},
	//
	"Q": {
	"size": 50,
	"x": 50,
	"y": 0,
	"x1":100,
	"y1": 50,
	"x2":56,
	"y2":180,
	"x3":0,
	"y3":50,
	"x4":0,
	"y4":150,
	"x5":100,
	"y5":200,
	"x6":50,
	"y6":0,
	"x7":100,
	"y7":150
	},
	//
	"R": {
	"size": 50,
	"x": 100,
	"y": 84,
	"x1": 0,
	"y1": 84,
	"x2":0,
	"y2":0,
	"x3":100,
	"y3":0,
	"x4":0,
	"y4":0,
	"x5":0,
	"y5":200,
	"x6":0,
	"y6":0,
	"x7":100,
	"y7":200
	},
	//
	"S": {
	"size": 50,
	"x": 100,
	"y": 100,
	"x1": 0,
	"y1": 100,
	"x2":100,
	"y2":0,
	"x3":100,
	"y3":200,
	"x4":100,
	"y4":200,
	"x5":0,
	"y5":200,
	"x6":0,
	"y6":100,
	"x7":0,
	"y7":0
	},
	//
	"T": {
	"size": 50,
	"x": 50,
	"y": 200,
	"x1": 58,
	"y1": 0,
	"x2":100,
	"y2":0,
	"x3":50,
	"y3":200,
	"x4":45,
	"y4":0,
	"x5":0,
	"y5":0,
	"x6":50,
	"y6":200,
	"x7":100,
	"y7":0
	},
	//
	"U": {
	"size": 50,
	"x": 100,
	"y": 0,
	"x1": 100,
	"y1": 200,
	"x2":0,
	"y2":200,
	"x3":0,
	"y3":200,
	"x4":0,
	"y4":200,
	"x5":0,
	"y5":0,
	"x6":100,
	"y6":200
	},
	//
	"V": {
	"size": 50,
	"x": 0,
	"y": 0,
	"x1": 50,
	"y1": 200,
	"x2":100,
	"y2":0,
	// "x3":0,
	// "y3":200,
	"x4":0,
	"y4":0,
	"x5":100,
	"y5":0
	// "x6":100,
	// "y6":58
	},
	//
	"W": {
	"size": 50,
	"x": 93,
	"y": 45,
	"x1": 93,
	"y1": 45,
	"x2":100,
	"y2":0,
	"x3":40,
	"y3":200,
	"x4":10,
	"y4":42,
	"x5":0,
	"y5":0,
	"x6":70,
	"y6":200,
	"x7":100,
	"y7":0

	},
	//
	"X": {
	"size": 50,
	"x": 0,
	"y": 200,
	"x1": 100,
	"y1": 200,
	"x2":0,
	"y2":0,
	"x3":0,
	"y3":200,
	"x4":0,
	"y4":200,
	"x5":100,
	"y5":0,
	"x6":100,
	"y6":200
	},
	//
	"Y": {
	"size": 50,
	"x": 0,
	"y": 0,
	"x1": 100,
	"y1": 0,
	"x2":50,
	"y2":50,
	"x3":50,
	"y3":50,
	"x4":50,
	"y4":200,
	"x5":50,
	"y5":50,
	"x6":0,
	"y6":0
	},
	//
	"Z": {
	"size": 50,
	"x": 0,
	"y": 200,
	"x1": 100,
	"y1": 0,
	"x2":0,
	"y2":0,
	"x3":20,
	"y3":200,
	"x4":0,
	"y4":200,
	"x5":100,
	"y5":200,
	"x6":35,
	"y6":200,
	"x7":83,
	"y7":30


	},

	"0": {
	"size": 50,
	"x": 0,
	"y": 0,
	"x1": 0,
	"y1": 200,
	"x2":100,
	"y2":200,
	"x3":100,
	"y3":0,
	"x4":100,
	"y4":0,
	"x5":100,
	"y5":200,
	"x6":50,
	"y6":100,
	"x7":50,
	"y7":100
	},

	"1": {
	"size": 50,
	"x": 50,
	"y": 0,
	"x1": 50,
	"y1": 180,
	"x2":0,
	"y2":200,
	"x3":50,
	"y3":30,
	"x4":13,
	"y4":28,
	"x5":50,
	"y5":14,
	"x6":50,
	"y6":0,
	"x7":100,
	"y7":200
	},
	//
	"2": {
	"size": 50,
	"x": 100,
	"y": 24,
	"x1": 72,
	"y1": 0,
	"x2":0,
	"y2":0,
	"x3":100,
	"y3":86,
	"x4":0,
	"y4":200,
	"x5":100,
	"y5":200,
	"x6":100,
	"y6":50,
	"x7":30,
	"y7":10

	},
	//
	"3": {
	"size": 50,
	"x": 0,
	"y": 200,
	"x1": 100,
	"y1": 0,
	"x2":0,
	"y2":0,
	"x3":100,
	"y3":200,
	"x4":100,
	"y4":200,
	"x5":100,
	"y5":0,
	"x6":0,
	"y6":102,
	"x7":100,
	"y7":90
	},
	//
	"4": {
	"size": 50,
	"x": 91,
	"y": 0,
	"x1": 0,
	"y1": 100,
	"x2":100,
	"y2":100,
	"x3":51,
	"y3":200,
	"x4":50,
	"y4":100,
	"x5":50,
	"y5":100,
	"x6":50,
	"y6":100,
	"x7":50,
	"y7":100
	},
	//
	"5": {
	"size": 50,
	"x": 0,
	"y": 100,
	"x1": 0,
	"y1": 0,
	"x2":100,
	"y2":0,
	"x3":100,
	"y3":100,
	"x4":100,
	"y4":200,
	"x5":0,
	"y5":200,
	"x6":0,
	"y6":100,
	"x7":0,
	"y7":100

	},
	//
	"6": {
	"size": 50,
	"x": 0,
	"y": 100,
	"x1": 0,
	"y1": 0,
	"x2":100,
	"y2":0,
	"x3":100,
	"y3":100,
	"x4":100,
	"y4":200,
	"x5":0,
	"y5":100,
	"x6":0,
	"y6":200
	},
	//
	"7": {
	"size": 50,
	"x": 0,
	"y": 0,
	"x1": 100,
	"y1": 200,
	"x2":0,
	"y2":0,
	"x3":100,
	"y3":0,
	"x4":100,
	"y4":200,
	"x5":100,
	"y5":200,
	"x6":100,
	"y6":82,
	"x7":100,
	"y7":200,
	},
	//
	"8": {
	"size": 50,
	"x": 0,
	"y": 200,
	"x1": 100,
	"y1": 0,
	"x2":0,
	"y2":0,
	"x3":100,
	"y3":200,
	"x4":100,
	"y4":100,
	"x5":0,
	"y5":100,
	"x6":100,
	"y6":200,
	"x7":0,
	"y7":200
	},
	//
	"9": {
	"size": 50,
	"x": 0,
	"y": 0,
	"x1": 0,
	"y1":100,
	"x2":0,
	"y2":0,
	"x3":100,
	"y3":0,
	"x4":100,
	"y4":200,
	"x5":0,
	"y5":200,
	"x6":50,
	"y6":100,
	"x7":100,
	"y7":100

	}

	}
	{
	"commits": [
	{
	"sha": "c2b991b9f993eb16a51ba16481f9e964913e45db",
	"name": "final"
	},
	{
	"sha": "933a128f815fbca3f9f041b6da0b75762fe20cee",
	"name": "experiment1"
	},
	{
	"sha": "7eaf0aa0cdfd2e6763357a4857ea607a5bfe0de8",
	"name": "experiment2"
	}
	]
	}
	const canvasWidth = 960;
	const canvasHeight = 500;

	/*
	* my three variable per letter are:
	*
	size: radius of the second circle (in pixels)
	offsetx: x offset (in pixels) of the second circle
	relative to the first one
	offsety: y offset (in pixels) of the second circle
	relative to the first one
	*
	*/

	//angleMode(DEGREES);
	//background


	const letterA = {
	"size": 0,
	"x": 240,
	"y":250,
	"x1":180,
	"y1":450,
	"x2":255,
	"y2":390,

	"x3":180,
	"y3":450,
	"x4":150,
	"y4":296,
	"x5":320,
	"y5":450,
	"x6":240,
	"y6":250,
	"x7":240,
	"y7":250




	}

	const letterB = {
	"size": 150,
	"x1":240,
	"y1": 250,
	"x2":240,
	"y2":440,
	"x3":350,
	"y3":380,
	"x4":240,
	"y4":250,
	"x5":330,
	"y5":310,
	"x6":290,
	"y6":350,
	"x7":170,
	"y7":290,
	"x8":240,
	"y8":440




	//"color": 40
	}

	const letterC = {
	"size": 100,
	"x1": 270,
	"y1": 250,
	"x2":200,
	"y2":250,
	"x3":150,
	"y3":420,
	"x4":150,
	"y4":360,
	"x5":200,
	"y5":250,
	"x6":150,
	"y6":300,
	"x7":150,
	"y7":300,
	"x8":270,
	"y8":460

	}

	const colorFront1 = "#052342";
	const colorFront2 = "#0c427a";
	const colorBack = (30);
	const colorStroke = (255);


	function setup () {

	// create the drawing canvas, save the canvas element
	main_canvas = createCanvas(canvasWidth, canvasHeight);
	main_canvas.parent('canvasContainer');

	// color/stroke setup
	stroke(colorStroke);
	strokeWeight(4);

	// with no animation, redrawing the screen is not necessary
	noLoop();

	}

	function drawLetter(posx, posy, letterData) {
	// determine parameters for second circle
	// noStroke();
	let size2 = letterData["size"];
	let pos1x = posx+letterData["x"];
	let pos1y = posy+letterData["y"];
	let pos2x = posx+letterData["x1"];
	let pos2y = posy+letterData["y1"];
	let pos3x = posx+letterData["x2"];
	let pos3y = posy+letterData["y2"];
	let pos4x = posx+letterData["x3"];
	let pos4y = posy+letterData["y3"];
	let pos5x = posx+letterData["x4"];
	let pos5y = posy+letterData["y4"];
	let pos6x = posx+letterData["x5"];
	let pos6y = posy+letterData["y5"];
	let pos7x = posx+letterData["x6"];
	let pos7y = posy+letterData["y6"];
	let pos8x = posx+letterData["x7"];
	let pos8y = posy+letterData["y7"];
	let pos9x = posx+letterData["x8"];
	let pos9y = posy+letterData["y8"];
	let pos10x = posx+letterData["x9"];
	let pos10y = posy+letterData["y9"];
	// let pos9x = posx+letterData["x5"];
	// let pos9y = posy+letterData["y5"];
	// let pos10x = posx+letterData["x6"];
	// let pos10y = posy+letterData["y6"];



	stroke(255);
	strokeWeight(1);
	//line(pos1x, pos1y, posx-50,posy+200);
	//fill(255, 15, 239, 50);
	//noStroke();
	noFill();

	line(pos5x, pos5y, pos9x, pos9y);
	line(pos2x, pos2y,pos3x,pos3y);
	line(pos7x, pos7y, pos6x, pos6y);
	line(pos5x, pos5y,pos6x,pos6y);
	line(pos4x, pos4y, pos8x, pos8y);
	line(pos4x, pos4y, pos9x, pos9y);
	//line(pos9x, pos9y, pos10x, pos10y);
	fill(colorStroke);
	ellipse(pos1x+0.5, pos1y, 4, 4);
	ellipse(pos5x+0.5, pos5y, 4, 4);
	ellipse(pos6x+0.5, pos6y, 4, 4);
	ellipse(pos3x+0.5, pos3y, 4, 4);
	ellipse(pos2x+0.5, pos2y, 4, 4);
	ellipse(pos8x+0.5, pos8y, 4, 4);

	fill(250,250,0, 90);
	noStroke();
	// triangle(pos2x,pos2y, pos3x, pos3y, pos1x, pos1y);
	// triangle(pos3x,pos3y, pos2x, pos2y, pos4x, pos4y);

	//line(pos1x, pos1y,pos3x,pos3y);
	// beginShape();
	// vertex(pos1x, pos1y);
	// vertex(pos2x, pos2y);
	// vertex(pos3x, pos3y);
	// endShape(CLOSE);


	//triangle(pos1x, pos1y,pos2x, pos2y,pos3x, pos3y);
	// triangle(pos7x, pos7y,pos5x, pos5y,pos6x, pos6y);
	//triangle(pos3x, pos3y, pos3x-50,pos3y+200,pos3x+36,pos3y+100);
	// triangle(pos3x, pos3y, pos6x+75,pos6y + 200,pos7x-25,pos7y+100);

	//fill(color);
	//fill(19, 52, 107,90);
	// beginShape();
	// vertex(pos2x,pos2y);
	// vertex(pos3x+120,pos3y);
	// vertex(pos2x+90,pos2y+100);
	// vertex(pos2x-25,pos2y+100);
	// endShape(CLOSE);

	//scale(1.5);
	// beginShape();
	// vertex(pos2x-25,pos2y+100);
	// vertex(pos2x+145,pos2y+100);
	// vertex(pos2x+115,pos2y+200);
	// vertex(pos2x-50,pos2y+200);
	// endShape(CLOSE);

	}

	function draw () {
	// clear screen
	background(colorBack);

	//backgrpund stars;
	for (var i=0; i<50; i++){
	var x = random(width);
	var y = random(height);
	var r = 0.5;
	fill(255);
	noStroke();
	ellipse(x,y,r2,r2);
	}

	//ellipse()

	// compute the center of the canvas
	let center_x = canvasWidth/4;
	let center_y = -canvasHeight/4 ;

	// draw the letters A, B, C from saved data
	//translate(-100, -100);
	drawLetter(center_x-250, center_y,letterA);
	drawLetter(center_x, center_y, letterB);
	drawLetter(center_x + 250, center_y, letterC);
	}

	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);
	// call this function after 1 second
	setTimeout(function(){
	p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
	}, 1000);
	}