uwcc/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    PS2 MDDN 242 2019

(Replace this README with information about your alphabet. This is an example.)
Each of my letters is composed with two circles. The size and position of the first circle is fixed, but the location and size of the second circle is controlled by three parameters.
The three parameters per letter:

size : radius of the second circle
offsetx : x offset of the second circle relative to the first one
offsety : y offset of the second circle relative to the first one


## 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
/*
 * Here are some things you can edit
 */
const colorBack    = "#e3eded";
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;

// 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(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(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(colorLines);
    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  = "#199cff";
const colorFront2  = "#59ccff";
const colorStroke  = "#233f11";

/*
 * Draw the letter given the letterData
 *
 * Letters should always be drawn with the
 * following bounding box guideline:
 * from (0,0) to (100, 200)
 */
function drawLetter(letterData) {
  // color/stroke setup
  stroke(colorStroke);
  strokeWeight(4);

  // determine parameters for second circle
  let size2 = letterData["size"];
  let pos2x = 50  + letterData["offsetx"];
  let pos2y = 150 + letterData["offsety"];

  // draw two circles
  fill(colorFront1);
  ellipse(50, 150, 75, 75);
  fill(colorFront2);
  ellipse(pos2x, pos2y, size2, size2);
}

function interpolate_letter(percent, oldObj, newObj) {
  let new_letter = {};
  new_letter["size"]    = map(percent, 0, 100, oldObj["size"], newObj["size"]);
  new_letter["offsetx"] = map(percent, 0, 100, oldObj["offsetx"], newObj["offsetx"]);
  new_letter["offsety"] = map(percent, 0, 100, oldObj["offsety"], newObj["offsety"]);
  return new_letter;
}

var swapWords = [
  "ABBAABBA",
  "CAB?CAB?",
  "BAAAAAAA"
]

## 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    = "#e3eded";
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(colorBack);
  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="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>

## 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    = "#e3eded";
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;

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(colorBack);

  // 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(colorLines);
  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(colorLines);
    fill(colorLines);
    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,
    "offsetx": 0,
    "offsety": 0
  },
  "A": {
    "size": 40,
    "offsetx": 0,
    "offsety": 17
  },
  "B": {
    "size": 75,
    "offsetx": 0,
    "offsety": -70
  },
  "C": {
    "size": 50,
    "offsetx": 15,
    "offsety": 0
  }
}

## preview.jpg

      
    Raw
  

              preview.jpg
            
          
## 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
 *
 */

const letterA = {
  "size": 80,
  "offsetx": 0,
  "offsety": 35
}

const letterB = {
  "size": 150,
  "offsetx": 0,
  "offsety": -145
}

const letterC = {
  "size": 100,
  "offsetx": 30,
  "offsety": 0
}

const colorFront1  = "#199cff";
const colorFront2  = "#59ccff";
const colorBack    = "#e3eded";
const colorStroke  = "#233f11";

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
  let size2 = letterData["size"];
  let pos2x = posx + letterData["offsetx"];
  let pos2y = posy + letterData["offsety"];

  // draw two circles
  fill(colorFront1);
  ellipse(posx, posy, 150, 150);
  fill(colorFront2);
  ellipse(pos2x, pos2y, size2, size2);
}

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
  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>
	/*
	* Here are some things you can edit
	*/
	const colorBack = "#e3eded";
	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;

	// 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(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(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(colorLines);
	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 = "#199cff";
	const colorFront2 = "#59ccff";
	const colorStroke = "#233f11";

	/*
	* Draw the letter given the letterData
	*
	* Letters should always be drawn with the
	* following bounding box guideline:
	* from (0,0) to (100, 200)
	*/
	function drawLetter(letterData) {
	// color/stroke setup
	stroke(colorStroke);
	strokeWeight(4);

	// determine parameters for second circle
	let size2 = letterData["size"];
	let pos2x = 50 + letterData["offsetx"];
	let pos2y = 150 + letterData["offsety"];

	// draw two circles
	fill(colorFront1);
	ellipse(50, 150, 75, 75);
	fill(colorFront2);
	ellipse(pos2x, pos2y, size2, size2);
	}

	function interpolate_letter(percent, oldObj, newObj) {
	let new_letter = {};
	new_letter["size"] = map(percent, 0, 100, oldObj["size"], newObj["size"]);
	new_letter["offsetx"] = map(percent, 0, 100, oldObj["offsetx"], newObj["offsetx"]);
	new_letter["offsety"] = map(percent, 0, 100, oldObj["offsety"], newObj["offsety"]);
	return new_letter;
	}

	var swapWords = [
	"ABBAABBA",
	"CAB?CAB?",
	"BAAAAAAA"
	]
	/*
	* Here are some things you can edit
	*/
	const colorBack = "#e3eded";
	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(colorBack);
	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;
	}
	}
	const alphabet = {
	"default": {
	"size": 40,
	"offsetx": 0,
	"offsety": 0
	},
	"A": {
	"size": 40,
	"offsetx": 0,
	"offsety": 17
	},
	"B": {
	"size": 75,
	"offsetx": 0,
	"offsety": -70
	},
	"C": {
	"size": 50,
	"offsetx": 15,
	"offsety": 0
	}
	}
	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
	*
	*/

	const letterA = {
	"size": 80,
	"offsetx": 0,
	"offsety": 35
	}

	const letterB = {
	"size": 150,
	"offsetx": 0,
	"offsety": -145
	}

	const letterC = {
	"size": 100,
	"offsetx": 30,
	"offsety": 0
	}

	const colorFront1 = "#199cff";
	const colorFront2 = "#59ccff";
	const colorBack = "#e3eded";
	const colorStroke = "#233f11";

	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
	let size2 = letterData["size"];
	let pos2x = posx + letterData["offsetx"];
	let pos2y = posy + letterData["offsety"];

	// draw two circles
	fill(colorFront1);
	ellipse(posx, posy, 150, 150);
	fill(colorFront2);
	ellipse(pos2x, pos2y, size2, size2);
	}

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