Marithia/README.md

## README.md

      
    Raw
  

              README.md
            
          
    PS2 MDDN 242 2018 Final

For this project, my letter forms I wanted to be arcs. My initial idea was to make three to four arcs depending on how many I need for my alphabet, however I quickly realised that made it too messy and I wanted something simple and elegant. After making the first three letter to test it out I decided that it would be better to change my idea.
This next idea I wanted the arcs to be more like full circles but not quite. I change it to two arcs one bigger and one smaller as I like the look of it more. With this it was more interesting to see what forms I could come with just two arcs. I sketch out all my letter forms so it was easier to make which was really helpful.
Some problems I had with these arcs was that the arcs would not show up or it would show up but not change when I increased or decreased the arc. These problems were easy fixes as it was just simply naming variables wrong or misplacing things. Another major problem I ran into that took me a while to figure out was how to rotate the arcs in the letter.js and not draw. Eventually I found the problem which was that I did not call the variable.
For the colours I played around with the fill and the stroke, some bright some mellow and plain. Bright colours did not really fit well with what I wanted my letter forms to be as they were inspired from the moon in the crescent shape. I ended up settling on a blue grey white colour scheme which I think fit really well.
The animation part I wanted my letters to rotate and fly out of the screen for some but all should rotate in some way. I was going to go with one that did not rotate however I figured that since it was arcs it would make sense for it rotate. I like the animation with the fast rotations of rotating around each other and how they snap back to the letter shape like a gravitational pull.
Overall I really enjoyed this project, I like how my letter forms turned out but I think if could have added more had I thought about my letter forms more and refined it. However it was my intention to make it simple and elegant. Had I manged my time better it would have been better. My finally letter form I am not satisfied with it but I like how it turned out in the end.
pos2x - draws the x position of the first point
pos2y - draws the y position of the first point
pos3x - draws the x position of the second point
pos3y - draws the y position of the second point
arcAngle - the size of the arcs for both arcs
rotatearc2 - rotates the outer arc
rotatearc3 - rotates the inner arc

  
## alphabet.html
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/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="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?";

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 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) {
      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) % letters.length;
    }
    pop();
  }
}

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

## draw_letters.js
 const colorFront  = "#199cff";
 const colorStroke = "#233f11";

 var swapWords = [
    "CRESCENT",
    "ELEGANCE",
    "SERAPHIC",
    "VIRTUOUS"
 ]

function drawLetter(letterData) {
  // colorstroke setup
  fill(colorFront);
  stroke(colorStroke);
  strokeWeight(4);
  angleMode(DEGREES);

  //Variables for letter forms
  let posx = 0;
  let posy = 0;

  let pos2x = posx + letterData["offsetx"];
  let pos2y = posy + letterData["offsety"];
  let pos3x = posx + letterData["offset3x"];
  let pos3y = posy + letterData["offset3y"];
  let arcAngle = 270;
  let rotatearc2 = letterData["rotate2"];
  let rotatearc3= letterData["rotate3"];

  //drawing arcs here
  push();
  strokeWeight(7);
  stroke(38, 70, 81, 65);
  fill(245, 245, 245, 100);
  rotate(rotatearc2+46.5);
  translate(50,175);
  arc(pos2x, pos2y, 80, -80, arcAngle, PI, PI + QUARTER_PI);
  noFill();
  stroke(0, 17, 33, 70);
  fill(114, 142, 153, 25);
  strokeWeight(3);
  rotate(rotatearc3);
  translate(20,20);
  arc(pos3x, pos3y, 30, -30, arcAngle, PI, PI + QUARTER_PI);

  pop();

}

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

  new_letter["offsetx"] = map(percent, 0, 100, oldObj["offsetx"], newObj["offsetx"]);
  new_letter["offsety"] = map(percent, 0, 100, oldObj["offsety"], newObj["offsety"]);

  new_letter["rotate3"] = map(percent, 0, 100, oldObj["rotate3"], newObj["rotate3"]);
  if(percent < 40/5){
      fill(255, 255, 255);
  new_letter["offset3x"] = oldObj["offset3x"];
  new_letter["offset3y"] = oldObj["offset3y"];

  new_letter["rotate3"] = oldObj["rotate3"];
  new_letter["colour2"] = oldObj["colour2"];
  }else if (percent > -40){

  new_letter["offset3x"] = map(percent, 80, 100, oldObj["offset3x"], newObj["offset3x"]);
  new_letter["offset3y"] = map(percent, 80, 100, oldObj["offset3y"], newObj["offset3y"]);

  new_letter["rotate2"] = map(percent, -30, 50, oldObj["rotate2"], newObj["rotate2"]);
  new_letter["colour2"] = map(percent, -30, 50, oldObj["colour2"], newObj["colour2"]);
 }
  return new_letter;
}


## exhibition.html
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/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="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 colorLines   = "#000090";
if (typeof colorFront === 'undefined') {
  colorFront   = "#199cff";
}

/*
 * 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="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/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="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="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/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="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;

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

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-1, 0, 100);
    let curLetterObj = getCharacterInterpolation(percent, soloLastLetter, soloCurLetter);
    // print(curLetterObj, soloLastLetter, soloCurLetter);
    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": {
      //"offsetx": 0,
      //"offsety": 0,
      // "offset3x": 0,
      // "offset3y":0
  },
  //Drawing the letters here
  "A": {
  "rotate2": 0,
  "offsetx": 110,
  "offsety": -93,
  "offset3x": 103,
  "offset3y": -102
},

  "B": {
  "rotate2": -90,
  "offsetx": -120,
  "offsety": -21,
  "rotate3": 180,
  "offset3x": 95,
  "offset3y": -12
},

  "C": {
  "rotate2": -90,
  "offsetx": -120,
  "offsety": -21,
  "offset3x": -128,
  "offset3y": -30
},

  "D": {
  "rotate2": -270,
  "offsetx": 25,
  "offsety": -324,
  "rotate3": 180,
  "offset3x": -55,
  "offset3y": 295
},

  "E": {
  "rotate2": -90,
  "offsetx": -120,
  "offsety": -21,
  "offset3x": -140,
  "offset3y": -16
},

  "F": {
  "rotate2": -90,
  "offsetx": -120,
  "offsety": -21,
  "offset3x": -115,
  "offset3y": -43
},

  "G": {
  "rotate2": -90,
  "offsetx": -125,
  "offsety": -26,
  "rotate3": 135,
  "offset3x": 75,
  "offset3y": 58
},

  "H": {
  "rotate2": 0,
  "offsetx": 110,
  "offsety": -93,
  "offset3x": 90,
  "offset3y": -115
},

  "I": {
  "rotate2": 0,
  "offsetx": 110,
  "offsety": -93,
  "offset3x": 53,
  "offset3y": -148
},

  "J": {
  "rotate2": -230,
  "offsetx": -97,
  "offsety": -338,
  "rotate3": 200,
  "offset3x": 154,
  "offset3y": 292
},

  "K": {
  "rotate2": -90,
  "offsetx": -120,
  "offsety": -21,
  "offset3x": -158,
  "offset3y": -58
},

  "L": {
  "rotate2": -90,
  "offsetx": -124,
  "offsety": -25,
  "rotate3": -90,
  "offset3x": -32,
  "offset3y": -142
},

  "M": {
  "rotate2": 0,
  "offsetx": 110,
  "offsety": -93,
  "offset3x": 72,
  "offset3y": -130
},

  "N": {
  "rotate2": 0,
  "offsetx": 110,
  "offsety": -93,
  "rotate3": 180,
  "offset3x": -110,
  "offset3y": 92
},

  "O": {
  "rotate2": -90,
  "offsetx": -130,
  "offsety": -30,
  "rotate3": 180,
  "offset3x": 80,
  "offset3y": -19
},

  "P": {
  "rotate2": -90,
  "offsetx": -125,
  "offsety": -25.5,
  "rotate3": 190,
  "offset3x": 72,
  "offset3y": -13
},

  "Q": {
  "rotate2": -45,
  "offsetx": 4,
  "offsety": -16.5,
  "rotate3": 90,
  "offset3x": -12,
  "offset3y": -45
},

  "R": {
  "rotate2": -90,
  "offsetx": -122,
  "offsety": -23,
  "rotate3": -95,
  "offset3x": 13,
  "offset3y": -114.5
},

  "S": {
  "rotate2": -50,
  "offsetx": -0.5,
  "offsety": -25,
  "rotate3": 170,
  "offset3x": 26,
  "offset3y": -22.5
},

  "T": {
  "rotate2": 0,
  "offsetx": 110,
  "offsety": -93,
  "rotate3": 180,
  "offset3x": -89,
  "offset3y": 111
},

  "U": {
  "rotate2": 180,
  "offsetx": -200,
  "offsety": -249,
  "rotate3": 0,
  "offset3x": -208,
  "offset3y": -258
},

  "V": {
  "rotate2": 180,
  "offsetx": -200,
  "offsety": -249,
  "rotate3": 0,
  "offset3x": -238,
  "offset3y": -285
},

  "W": {
  "rotate2": 180,
  "offsetx": -199,
  "offsety": -250,
  "rotate3": 0,
  "offset3x": -227,
  "offset3y": -236
},

  "X": {
  "rotate2": -130,
  "offsetx": -203,
  "offsety": -108,
  "rotate3": 180,
  "offset3x": 190,
  "offset3y": 100
},

  "Y": {
  "rotate2": 180,
  "offsetx": -180,
  "offsety": -230,
  "rotate3": 0,
  "offset3x": -238,
  "offset3y": -285
},

  "Z": {
  "rotate2": -90,
  "offsetx": -100,
  "offsety": -45,
  "rotate3": 180,
  "offset3x": 120,
  "offset3y": -15
},

  "0": {
  "rotate2": -90,
  "offsetx": -120,
  "offsety": -21,
  "rotate3": 180,
  "offset3x": 120,
  "offset3y": 20
},

  "1": {
  "rotate2": -270,
  "offsetx": 25,
  "offsety": -324,
  "rotate3": 0,
  "offset3x": 0,
  "offset3y": -345
},

  "2": {
  "rotate2": -270,
  "offsetx": 9,
  "offsety": -320,
  "rotate3": 200,
  "offset3x": 30,
  "offset3y": 304
},

  "3": {
  "rotate2": -270,
  "offsetx": 8,
  "offsety": -302,
  "rotate3": 0,
  "offset3x": 37,
  "offset3y": -348
},

  "4": {
  "rotate2": -90,
  "offsetx": -110,
  "offsety": -30,
  "rotate3": 180,
  "offset3x": 120,
  "offset3y": -15
},

  "5": {
  "rotate2": -90,
  "offsetx": -118,
  "offsety": -40,
  "rotate3": 160,
  "offset3x": 96,
  "offset3y": 6
},

  "6": {
  "rotate2": -270,
  "offsetx": 34,
  "offsety": -316,
  "rotate3": 30,
  "offset3x": -184,
  "offset3y": -345
},

  "7": {
  "rotate2": -270,
  "offsetx": 33,
  "offsety": -317,
  "rotate3": 90,
  "offset3x": -361,
  "offset3y": -23
},

  "8": {
  "rotate2": 180,
  "offsetx": -182,
  "offsety": -231,
  "rotate3": 180,
  "offset3x": 203,
  "offset3y": 248
},

  "9": {
  "rotate2": -270,
  "offsetx": 34,
  "offsety": -316,
  "rotate3": -30,
  "offset3x": 130,
  "offset3y": -310
}
}

## letters.json
{
  "A":
    [
      true,
      false,
      false,
      false,
      false,
      false
    ],
  "B":
    [
      true,
      false,
      true,
      false,
      false,
      false
    ],
  "C":
    [
      true,
      true,
      false,
      false,
      false,
      false
    ]
}

## preview.jpg

      
    Raw
  

              preview.jpg
            
          
## purview.json
{
  "commits": [
    {
      "sha": "11d7ce8aa75e285d3de7a8bad8d03fd8392d1bea",
      "name": "final"
    },
    {
      "sha": "1368d35f4438de4ef3f7bfc38562e8a522b80b88",
      "name": "experiment5"
    },
    {
      "sha": "7609f0576361ee6d12f16d2fc7e4e80ed8d3f8f4",
      "name": "experiment4"
    },
    {
      "sha": "164f22f315fe95eefc2f029174181d58d2491b84",
      "name": "experiment3"
    },
    {
      "sha": "0839428dd09860c82034c3ba7590a63513413892",
      "name": "experiment2"
    },
    {
      "sha": "3ad2d08c7028ed38e90138e2e0029e24788f0b63",
      "name": "experiment1"
    }
  ]
}

## sketch.html
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/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;


const letterA = {
  "size": 20,
  "offsetx": 200,
  "offsety": 485,
  "offset3x": 235,
  "offset3y": 515,
  "rotate": 90
}

const letterC = {
  "size": 80,
}

const letterB = {
  "size": 100,
}

const colorFront  = "#e2d3ed";
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');


  angleMode(DEGREES);

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

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

function drawLetter(posx, posy, scale, letterData) {
  // determine parameters for second circle
  let size2 = letterData["size"];
  let pos2x = posx + letterData["offsetx"];
  let pos2y = posy + letterData["offsety"];
  let pos3x = posx + letterData["offset3x"];
  let pos3y = posy + letterData["offset3y"];
  let rotate2 = letterData["rotatearc"];

angleMode(DEGREES);

  push();

  translate(-140,-690);

  noFill();
  arc(pos2x, pos2y, 230, -230, 270, PI, PI + QUARTER_PI);
  arc(pos3x, pos3y, 90, -90, 270, PI, PI + QUARTER_PI);

  pop();


  push();

  noFill();
  rotate(-45);
  translate(-30,-40);


  arc(pos2x, pos2y, 230, -230, 270, PI, PI + QUARTER_PI);
  arc(pos3x, pos3y, 90, -90, 270, PI, PI + QUARTER_PI);

  pop();


  push();
  noFill();
  rotate(-225);
  translate(-660, -1280);
  arc(pos3x, pos3y, 90, -90, 270, PI, PI + QUARTER_PI);
  pop();

  push();

  noFill();
  rotate(-45);
  translate(-250,-260);
  arc(pos2x, pos2y, 230, -230, 270, PI, PI + QUARTER_PI);


  pop();

}

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, 10, letterA);
  drawLetter(center_x      , center_y, 10, letterB);
  drawLetter(center_x + 250, center_y, 10, letterC);
}

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

## style1.html
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="style1.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>
    Links to other sections:
<ul>
    <li><a href="style1.html">style_1</a>
    <li><a href="style2.html">style_2</a>
    <li><a href="alphabet.html">alphabet</a>
    <li><a href="interaction.html">interaction</a>
    <li><a href="exhibition.html">exhibition</a>
<ul>
        </div>
        <div class="inner" id="controls" height="500px">
            <table class="home">
                <tr>
                    <td>Pos1</td>
                    <td id="slider1Container"></td>
                </tr>
                <tr>
                    <td>Tilt1</td>
                    <td id="slider2Container"></td>
                </tr>
                <tr>
                    <td>Pos2</td>
                    <td id="slider3Container"></td>
                </tr>
                <tr>
                    <td>Tilt2</td>
                    <td id="slider4Container"></td>
                </tr>
                <tr>
                    <td>Pos3</td>
                    <td id="slider5Container"></td>
                </tr>
                <tr>
                    <td>Tilt3</td>
                    <td id="slider6Container"></td>
                </tr>
                <tr>
                    <td>
                        <hr>
                    </td>
                </tr>
                <tr>
                    <td>Letter</td>
                    <td id="selectorContainer"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="buttonContainer"></td>
                </tr>
        </div>
    </div>
</table>
</body>

## style1.js
let main_canvas = null;
let pos1_slider = null;
let tilt1_slider = null;
let pos2_slider = null;
let tilt2_slider = null;
let pos3_slider = null;
let tilt3_slider = null;

const canvasWidth = 960;
const canvasHeight = 500;

let savedValues = {
  "A":
    // {
    //   "box1": {
    //     "position": -174,
    //     "tilt": -47
    //   },
    //   "box2": {
    //     "position": -104,
    //     "tilt": -4
    //   },
    //   "box3": {
    //     "position": -121,
    //     "tilt": 58
    //   }
    {
  "box1": {
    "position": 71,
    "tilt": -23
  },
  "box2": {
    "position": 6,
    "tilt": 49
  },
  "box3": {
    "position": -146,
    "tilt": 113
  }

    },
  "B":
    // {
    //   "box1": {
    //     "position": -191,
    //     "tilt": -90
    //   },
    //   "box2": {
    //     "position": -54,
    //     "tilt": -45
    //   },
    //   "box3": {
    //     "position": -12,
    //     "tilt": 6
    //   }
    {
  "box1": {
    "position": -154,
    "tilt": -72
  },
  "box2": {
    "position": 9,
    "tilt": 9
  },
  "box3": {
    "position": -21,
    "tilt": -9
  }

    },
  "C":
    // {
    //   "box1": {
    //     "position": -163,
    //     "tilt": -84
    //   },
    //   "box2": {
    //     "position": -191,
    //     "tilt": 163
    //   },
    //   "box3": {
    //     "position": 0,
    //     "tilt": -27
    //   }
    // }
    {
//   "box1": {
//     "position": 48,
//     "tilt": 33
//   },
//   "box2": {
//     "position": -109,
//     "tilt": 84
//   },
//   "box3": {
//     "position": 16,
//     "tilt": 95
//   }
// }
//{
  "box1": {
    "position": 89,
    "tilt": 26
  },
  "box2": {
    "position": -185,
    "tilt": 120
  },
  "box3": {
    "position": 7,
    "tilt": 12
  }
}
}

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

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

  // create two sliders
  pos1_slider = createSlider(-200, 200, 0);
  tilt1_slider = createSlider(-180, 180, 0);
  pos2_slider = createSlider(-200, 200, 0);
  tilt2_slider = createSlider(-180, 180, 0);
  pos3_slider = createSlider(-200, 200, 0);
  tilt3_slider = createSlider(-180, 180, 0);

  sel = createSelect();
  sel.option('A');
  sel.option('B');
  sel.option('C');
  sel.changed(letterChangedEvent);

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

  // position each element on the page
  main_canvas.parent('canvasContainer');
  pos1_slider.parent('slider1Container');
  tilt1_slider.parent('slider2Container');
  pos2_slider.parent('slider3Container');
  tilt2_slider.parent('slider4Container');
  pos3_slider.parent('slider5Container');
  tilt3_slider.parent('slider6Container');

  sel.parent(selectorContainer);
  button.parent(buttonContainer);
}

function sliderToDataObject() {
  let obj = {};
  obj["box1"] = {};
  obj["box1"]["position"] = pos1_slider.value();
  obj["box1"]["tilt"] = tilt1_slider.value();
  obj["box2"] = {};
  obj["box2"]["position"] = pos2_slider.value();
  obj["box2"]["tilt"] = tilt2_slider.value();
  obj["box3"] = {};
  obj["box3"]["position"] = pos3_slider.value();
  obj["box3"]["tilt"] = tilt3_slider.value();
  return obj;
}

function dataObjectToSliders(obj) {
  pos1_slider.value(obj["box1"]["position"]);
  tilt1_slider.value(obj["box1"]["tilt"]);
  pos2_slider.value(obj["box2"]["position"]);
  tilt2_slider.value(obj["box2"]["tilt"]);
  pos3_slider.value(obj["box3"]["position"]);
  tilt3_slider.value(obj["box3"]["tilt"]);
}

function letterChangedEvent() {
  let item = sel.value();
  dataObjectToSliders(savedValues[item]);
}

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

const colorFront = [207, 222, 227];
const colorBack = [29, 42, 46];

function drawPart(y_offset, pos, tilt) {
  let middle_x = 2 * canvasWidth / 3;
  let middle_y = canvasHeight / 2;
  resetMatrix();
  translate(middle_x + pos, middle_y + y_offset);
  rotate(tilt);

  let scale = 10;

  fill(colorFront);
  // rect(-100,-100,100,100);
  rect(-20*scale, -3*scale, 20*scale, 3*scale);
}

function drawFromSliders(y_offset, pos_slider, tilt_slider) {
  let pos = pos_slider.value();
  let tilt = tilt_slider.value();
  drawPart(y_offset, pos, tilt);
}

function draw () {
  background(colorBack);
  fill(colorFront);
  stroke(95, 52, 8);

  drawFromSliders(-50, pos1_slider, tilt1_slider);
  drawFromSliders(  0, pos2_slider, tilt2_slider);
  drawFromSliders( 50, pos3_slider, tilt3_slider);
}

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

## style2.html
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="style2.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>
    Links to other sections:
<ul>
    <li><a href="style1.html">style_1</a>
    <li><a href="style2.html">style_2</a>
    <li><a href="alphabet.html">alphabet</a>
    <li><a href="interaction.html">interaction</a>
    <li><a href="exhibition.html">exhibition</a>
<ul>
        </div>
        <div class="inner" id="controls" height="500px">
            <table>
                <tr>
                    <td></td>
                    <td id="container_0"></td>
                    <td></td>
                    <td id="container_1"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="container_2"></td>
                    <td></td>
                    <td id="container_3"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="container_4"></td>
                    <td></td>
                    <td id="container_5"></td>
                </tr>
                <tr>
                    <td>
                        <hr>
                    </td>
                </tr>
                <tr>
                    <td>Letter</td>
                    <td id="selectorContainer"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="buttonContainer"></td>
                </tr>
        </div>
    </div>
</table>
</body>

## style2.js
let main_canvas = null;

let checkboxes = [];

const canvasWidth = 960;
const canvasHeight = 500;

let letterParams = {
  "A":
    [
      true,
      false,
      false,
      false,
      false,
      false
    ],
  "B":
    [
      true,
      false,
      true,
      false,
      false,
      false
    ],
  "C":
    [
      true,
      true,
      false,
      false,
      false,
      false
    ]
}

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

  sel = createSelect();
  sel.option('A');
  sel.option('B');
  sel.option('C');
  sel.changed(letterChangedEvent);

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

  // position each element on the page
  main_canvas.parent('canvasContainer');

  sel.parent(selectorContainer);
  button.parent(buttonContainer);

  for(let i=0; i<6; i++) {
    let cur_checkbox = createCheckbox('', false);
    checkboxes.push(cur_checkbox);
    cur_checkbox.parent('container_' + i);
  }

  letterChangedEvent();
}

function uiToDataObject() {
  let obj = [];
  for(let i=0; i<6; i++) {
    obj.push(checkboxes[i].checked());
  }
  return obj;
}

function dataObjectToUi(obj) {
  for(let i=0; i<6; i++) {
    checkboxes[i].checked(obj[i]);
  }
}

function letterChangedEvent() {
  let item = sel.value();
  dataObjectToUi(letterParams[item]);
}

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

const colorFront = [207, 222, 227];
const colorBack = [29, 42, 46];

function drawPart(y_offset, pos, tilt) {
  let middle_x = 2 * canvasWidth / 3;
  let middle_y = canvasHeight / 2;
  resetMatrix();
  translate(middle_x + pos, middle_y + y_offset);
  rotate(tilt);

  let scale = 10;

  fill(colorFront);
  // rect(-100,-100,100,100);
  rect(-20*scale, -3*scale, 20*scale, 3*scale);
}

function drawPart(pos, is_on) {
  let rad = 0;
  if(is_on) {
    strokeWeight(0);
    rad = 90;
    fill(colorFront);
  }
  else {
    stroke(colorFront);
    strokeWeight(8);
    rad = 40;
    noFill();
  }
  push();
  translate(pos[0], pos[1]);
  ellipse(0, 0, rad, rad);
  pop();
}

// obj is an array of six booleans
function drawCharacter(x, y, obj) {
  let spacing_x = 50, spacing_y = 100;

  let positions = [
    [-spacing_x, -spacing_y],
    [ spacing_x, -spacing_y],
    [-spacing_x, 0],
    [ spacing_x, 0],
    [-spacing_x, spacing_y],
    [ spacing_x, spacing_y],
  ]

  push();
    translate(x, y);
    for(let i=0; i<6; i++) {
      drawPart(positions[i], obj[i])
    }
  pop();
}

function draw () {
  background(colorBack);
  fill(colorFront);
  stroke(95, 52, 8);

  obj = uiToDataObject();
  drawCharacter(width/2, height/2, obj);
}

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="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/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="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?";

	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 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) {
	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) % letters.length;
	}
	pop();
	}
	}

	function keyTyped() {
	if (key == '!') {
	saveBlocksImages();
	}
	else if (key == '@') {
	saveBlocksImages(true);
	}
	}
	const colorFront = "#199cff";
	const colorStroke = "#233f11";

	var swapWords = [
	"CRESCENT",
	"ELEGANCE",
	"SERAPHIC",
	"VIRTUOUS"
	]

	function drawLetter(letterData) {
	// colorstroke setup
	fill(colorFront);
	stroke(colorStroke);
	strokeWeight(4);
	angleMode(DEGREES);

	//Variables for letter forms
	let posx = 0;
	let posy = 0;

	let pos2x = posx + letterData["offsetx"];
	let pos2y = posy + letterData["offsety"];
	let pos3x = posx + letterData["offset3x"];
	let pos3y = posy + letterData["offset3y"];
	let arcAngle = 270;
	let rotatearc2 = letterData["rotate2"];
	let rotatearc3= letterData["rotate3"];

	//drawing arcs here
	push();
	strokeWeight(7);
	stroke(38, 70, 81, 65);
	fill(245, 245, 245, 100);
	rotate(rotatearc2+46.5);
	translate(50,175);
	arc(pos2x, pos2y, 80, -80, arcAngle, PI, PI + QUARTER_PI);
	noFill();
	stroke(0, 17, 33, 70);
	fill(114, 142, 153, 25);
	strokeWeight(3);
	rotate(rotatearc3);
	translate(20,20);
	arc(pos3x, pos3y, 30, -30, arcAngle, PI, PI + QUARTER_PI);

	pop();

	}

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

	new_letter["offsetx"] = map(percent, 0, 100, oldObj["offsetx"], newObj["offsetx"]);
	new_letter["offsety"] = map(percent, 0, 100, oldObj["offsety"], newObj["offsety"]);

	new_letter["rotate3"] = map(percent, 0, 100, oldObj["rotate3"], newObj["rotate3"]);
	if(percent < 40/5){
	fill(255, 255, 255);
	new_letter["offset3x"] = oldObj["offset3x"];
	new_letter["offset3y"] = oldObj["offset3y"];

	new_letter["rotate3"] = oldObj["rotate3"];
	new_letter["colour2"] = oldObj["colour2"];
	}else if (percent > -40){

	new_letter["offset3x"] = map(percent, 80, 100, oldObj["offset3x"], newObj["offset3x"]);
	new_letter["offset3y"] = map(percent, 80, 100, oldObj["offset3y"], newObj["offset3y"]);

	new_letter["rotate2"] = map(percent, -30, 50, oldObj["rotate2"], newObj["rotate2"]);
	new_letter["colour2"] = map(percent, -30, 50, oldObj["colour2"], newObj["colour2"]);
	}
	return new_letter;
	}
	const alphabet = {
	"default": {
	//"offsetx": 0,
	//"offsety": 0,
	// "offset3x": 0,
	// "offset3y":0
	},
	//Drawing the letters here
	"A": {
	"rotate2": 0,
	"offsetx": 110,
	"offsety": -93,
	"offset3x": 103,
	"offset3y": -102
	},

	"B": {
	"rotate2": -90,
	"offsetx": -120,
	"offsety": -21,
	"rotate3": 180,
	"offset3x": 95,
	"offset3y": -12
	},

	"C": {
	"rotate2": -90,
	"offsetx": -120,
	"offsety": -21,
	"offset3x": -128,
	"offset3y": -30
	},

	"D": {
	"rotate2": -270,
	"offsetx": 25,
	"offsety": -324,
	"rotate3": 180,
	"offset3x": -55,
	"offset3y": 295
	},

	"E": {
	"rotate2": -90,
	"offsetx": -120,
	"offsety": -21,
	"offset3x": -140,
	"offset3y": -16
	},

	"F": {
	"rotate2": -90,
	"offsetx": -120,
	"offsety": -21,
	"offset3x": -115,
	"offset3y": -43
	},

	"G": {
	"rotate2": -90,
	"offsetx": -125,
	"offsety": -26,
	"rotate3": 135,
	"offset3x": 75,
	"offset3y": 58
	},

	"H": {
	"rotate2": 0,
	"offsetx": 110,
	"offsety": -93,
	"offset3x": 90,
	"offset3y": -115
	},

	"I": {
	"rotate2": 0,
	"offsetx": 110,
	"offsety": -93,
	"offset3x": 53,
	"offset3y": -148
	},

	"J": {
	"rotate2": -230,
	"offsetx": -97,
	"offsety": -338,
	"rotate3": 200,
	"offset3x": 154,
	"offset3y": 292
	},

	"K": {
	"rotate2": -90,
	"offsetx": -120,
	"offsety": -21,
	"offset3x": -158,
	"offset3y": -58
	},

	"L": {
	"rotate2": -90,
	"offsetx": -124,
	"offsety": -25,
	"rotate3": -90,
	"offset3x": -32,
	"offset3y": -142
	},

	"M": {
	"rotate2": 0,
	"offsetx": 110,
	"offsety": -93,
	"offset3x": 72,
	"offset3y": -130
	},

	"N": {
	"rotate2": 0,
	"offsetx": 110,
	"offsety": -93,
	"rotate3": 180,
	"offset3x": -110,
	"offset3y": 92
	},

	"O": {
	"rotate2": -90,
	"offsetx": -130,
	"offsety": -30,
	"rotate3": 180,
	"offset3x": 80,
	"offset3y": -19
	},

	"P": {
	"rotate2": -90,
	"offsetx": -125,
	"offsety": -25.5,
	"rotate3": 190,
	"offset3x": 72,
	"offset3y": -13
	},

	"Q": {
	"rotate2": -45,
	"offsetx": 4,
	"offsety": -16.5,
	"rotate3": 90,
	"offset3x": -12,
	"offset3y": -45
	},

	"R": {
	"rotate2": -90,
	"offsetx": -122,
	"offsety": -23,
	"rotate3": -95,
	"offset3x": 13,
	"offset3y": -114.5
	},

	"S": {
	"rotate2": -50,
	"offsetx": -0.5,
	"offsety": -25,
	"rotate3": 170,
	"offset3x": 26,
	"offset3y": -22.5
	},

	"T": {
	"rotate2": 0,
	"offsetx": 110,
	"offsety": -93,
	"rotate3": 180,
	"offset3x": -89,
	"offset3y": 111
	},

	"U": {
	"rotate2": 180,
	"offsetx": -200,
	"offsety": -249,
	"rotate3": 0,
	"offset3x": -208,
	"offset3y": -258
	},

	"V": {
	"rotate2": 180,
	"offsetx": -200,
	"offsety": -249,
	"rotate3": 0,
	"offset3x": -238,
	"offset3y": -285
	},

	"W": {
	"rotate2": 180,
	"offsetx": -199,
	"offsety": -250,
	"rotate3": 0,
	"offset3x": -227,
	"offset3y": -236
	},

	"X": {
	"rotate2": -130,
	"offsetx": -203,
	"offsety": -108,
	"rotate3": 180,
	"offset3x": 190,
	"offset3y": 100
	},

	"Y": {
	"rotate2": 180,
	"offsetx": -180,
	"offsety": -230,
	"rotate3": 0,
	"offset3x": -238,
	"offset3y": -285
	},

	"Z": {
	"rotate2": -90,
	"offsetx": -100,
	"offsety": -45,
	"rotate3": 180,
	"offset3x": 120,
	"offset3y": -15
	},

	"0": {
	"rotate2": -90,
	"offsetx": -120,
	"offsety": -21,
	"rotate3": 180,
	"offset3x": 120,
	"offset3y": 20
	},

	"1": {
	"rotate2": -270,
	"offsetx": 25,
	"offsety": -324,
	"rotate3": 0,
	"offset3x": 0,
	"offset3y": -345
	},

	"2": {
	"rotate2": -270,
	"offsetx": 9,
	"offsety": -320,
	"rotate3": 200,
	"offset3x": 30,
	"offset3y": 304
	},

	"3": {
	"rotate2": -270,
	"offsetx": 8,
	"offsety": -302,
	"rotate3": 0,
	"offset3x": 37,
	"offset3y": -348
	},

	"4": {
	"rotate2": -90,
	"offsetx": -110,
	"offsety": -30,
	"rotate3": 180,
	"offset3x": 120,
	"offset3y": -15
	},

	"5": {
	"rotate2": -90,
	"offsetx": -118,
	"offsety": -40,
	"rotate3": 160,
	"offset3x": 96,
	"offset3y": 6
	},

	"6": {
	"rotate2": -270,
	"offsetx": 34,
	"offsety": -316,
	"rotate3": 30,
	"offset3x": -184,
	"offset3y": -345
	},

	"7": {
	"rotate2": -270,
	"offsetx": 33,
	"offsety": -317,
	"rotate3": 90,
	"offset3x": -361,
	"offset3y": -23
	},

	"8": {
	"rotate2": 180,
	"offsetx": -182,
	"offsety": -231,
	"rotate3": 180,
	"offset3x": 203,
	"offset3y": 248
	},

	"9": {
	"rotate2": -270,
	"offsetx": 34,
	"offsety": -316,
	"rotate3": -30,
	"offset3x": 130,
	"offset3y": -310
	}
	}
	{
	"A":
	[
	true,
	false,
	false,
	false,
	false,
	false
	],
	"B":
	[
	true,
	false,
	true,
	false,
	false,
	false
	],
	"C":
	[
	true,
	true,
	false,
	false,
	false,
	false
	]
	}
	{
	"commits": [
	{
	"sha": "11d7ce8aa75e285d3de7a8bad8d03fd8392d1bea",
	"name": "final"
	},
	{
	"sha": "1368d35f4438de4ef3f7bfc38562e8a522b80b88",
	"name": "experiment5"
	},
	{
	"sha": "7609f0576361ee6d12f16d2fc7e4e80ed8d3f8f4",
	"name": "experiment4"
	},
	{
	"sha": "164f22f315fe95eefc2f029174181d58d2491b84",
	"name": "experiment3"
	},
	{
	"sha": "0839428dd09860c82034c3ba7590a63513413892",
	"name": "experiment2"
	},
	{
	"sha": "3ad2d08c7028ed38e90138e2e0029e24788f0b63",
	"name": "experiment1"
	}
	]
	}
	const canvasWidth = 960;
	const canvasHeight = 500;


	const letterA = {
	"size": 20,
	"offsetx": 200,
	"offsety": 485,
	"offset3x": 235,
	"offset3y": 515,
	"rotate": 90
	}

	const letterC = {
	"size": 80,
	}

	const letterB = {
	"size": 100,
	}

	const colorFront = "#e2d3ed";
	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');


	angleMode(DEGREES);

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

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

	function drawLetter(posx, posy, scale, letterData) {
	// determine parameters for second circle
	let size2 = letterData["size"];
	let pos2x = posx + letterData["offsetx"];
	let pos2y = posy + letterData["offsety"];
	let pos3x = posx + letterData["offset3x"];
	let pos3y = posy + letterData["offset3y"];
	let rotate2 = letterData["rotatearc"];

	angleMode(DEGREES);

	push();

	translate(-140,-690);

	noFill();
	arc(pos2x, pos2y, 230, -230, 270, PI, PI + QUARTER_PI);
	arc(pos3x, pos3y, 90, -90, 270, PI, PI + QUARTER_PI);

	pop();


	push();

	noFill();
	rotate(-45);
	translate(-30,-40);


	arc(pos2x, pos2y, 230, -230, 270, PI, PI + QUARTER_PI);
	arc(pos3x, pos3y, 90, -90, 270, PI, PI + QUARTER_PI);

	pop();


	push();
	noFill();
	rotate(-225);
	translate(-660, -1280);
	arc(pos3x, pos3y, 90, -90, 270, PI, PI + QUARTER_PI);
	pop();

	push();

	noFill();
	rotate(-45);
	translate(-250,-260);
	arc(pos2x, pos2y, 230, -230, 270, PI, PI + QUARTER_PI);


	pop();

	}

	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, 10, letterA);
	drawLetter(center_x , center_y, 10, letterB);
	drawLetter(center_x + 250, center_y, 10, letterC);
	}

	function keyTyped() {
	if (key == '!') {
	saveBlocksImages();
	}
	else if (key == '@') {
	saveBlocksImages(true);
	}
	}
	let main_canvas = null;
	let pos1_slider = null;
	let tilt1_slider = null;
	let pos2_slider = null;
	let tilt2_slider = null;
	let pos3_slider = null;
	let tilt3_slider = null;

	const canvasWidth = 960;
	const canvasHeight = 500;

	let savedValues = {
	"A":
	// {
	// "box1": {
	// "position": -174,
	// "tilt": -47
	// },
	// "box2": {
	// "position": -104,
	// "tilt": -4
	// },
	// "box3": {
	// "position": -121,
	// "tilt": 58
	// }
	{
	"box1": {
	"position": 71,
	"tilt": -23
	},
	"box2": {
	"position": 6,
	"tilt": 49
	},
	"box3": {
	"position": -146,
	"tilt": 113
	}

	},
	"B":
	// {
	// "box1": {
	// "position": -191,
	// "tilt": -90
	// },
	// "box2": {
	// "position": -54,
	// "tilt": -45
	// },
	// "box3": {
	// "position": -12,
	// "tilt": 6
	// }
	{
	"box1": {
	"position": -154,
	"tilt": -72
	},
	"box2": {
	"position": 9,
	"tilt": 9
	},
	"box3": {
	"position": -21,
	"tilt": -9
	}

	},
	"C":
	// {
	// "box1": {
	// "position": -163,
	// "tilt": -84
	// },
	// "box2": {
	// "position": -191,
	// "tilt": 163
	// },
	// "box3": {
	// "position": 0,
	// "tilt": -27
	// }
	// }
	{
	// "box1": {
	// "position": 48,
	// "tilt": 33
	// },
	// "box2": {
	// "position": -109,
	// "tilt": 84
	// },
	// "box3": {
	// "position": 16,
	// "tilt": 95
	// }
	// }
	//{
	"box1": {
	"position": 89,
	"tilt": 26
	},
	"box2": {
	"position": -185,
	"tilt": 120
	},
	"box3": {
	"position": 7,
	"tilt": 12
	}
	}
	}

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

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

	// create two sliders
	pos1_slider = createSlider(-200, 200, 0);
	tilt1_slider = createSlider(-180, 180, 0);
	pos2_slider = createSlider(-200, 200, 0);
	tilt2_slider = createSlider(-180, 180, 0);
	pos3_slider = createSlider(-200, 200, 0);
	tilt3_slider = createSlider(-180, 180, 0);

	sel = createSelect();
	sel.option('A');
	sel.option('B');
	sel.option('C');
	sel.changed(letterChangedEvent);

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

	// position each element on the page
	main_canvas.parent('canvasContainer');
	pos1_slider.parent('slider1Container');
	tilt1_slider.parent('slider2Container');
	pos2_slider.parent('slider3Container');
	tilt2_slider.parent('slider4Container');
	pos3_slider.parent('slider5Container');
	tilt3_slider.parent('slider6Container');

	sel.parent(selectorContainer);
	button.parent(buttonContainer);
	}

	function sliderToDataObject() {
	let obj = {};
	obj["box1"] = {};
	obj["box1"]["position"] = pos1_slider.value();
	obj["box1"]["tilt"] = tilt1_slider.value();
	obj["box2"] = {};
	obj["box2"]["position"] = pos2_slider.value();
	obj["box2"]["tilt"] = tilt2_slider.value();
	obj["box3"] = {};
	obj["box3"]["position"] = pos3_slider.value();
	obj["box3"]["tilt"] = tilt3_slider.value();
	return obj;
	}

	function dataObjectToSliders(obj) {
	pos1_slider.value(obj["box1"]["position"]);
	tilt1_slider.value(obj["box1"]["tilt"]);
	pos2_slider.value(obj["box2"]["position"]);
	tilt2_slider.value(obj["box2"]["tilt"]);
	pos3_slider.value(obj["box3"]["position"]);
	tilt3_slider.value(obj["box3"]["tilt"]);
	}

	function letterChangedEvent() {
	let item = sel.value();
	dataObjectToSliders(savedValues[item]);
	}

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

	const colorFront = [207, 222, 227];
	const colorBack = [29, 42, 46];

	function drawPart(y_offset, pos, tilt) {
	let middle_x = 2 * canvasWidth / 3;
	let middle_y = canvasHeight / 2;
	resetMatrix();
	translate(middle_x + pos, middle_y + y_offset);
	rotate(tilt);

	let scale = 10;

	fill(colorFront);
	// rect(-100,-100,100,100);
	rect(-20scale, -3scale, 20scale, 3scale);
	}

	function drawFromSliders(y_offset, pos_slider, tilt_slider) {
	let pos = pos_slider.value();
	let tilt = tilt_slider.value();
	drawPart(y_offset, pos, tilt);
	}

	function draw () {
	background(colorBack);
	fill(colorFront);
	stroke(95, 52, 8);

	drawFromSliders(-50, pos1_slider, tilt1_slider);
	drawFromSliders( 0, pos2_slider, tilt2_slider);
	drawFromSliders( 50, pos3_slider, tilt3_slider);
	}

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

	let checkboxes = [];

	const canvasWidth = 960;
	const canvasHeight = 500;

	let letterParams = {
	"A":
	[
	true,
	false,
	false,
	false,
	false,
	false
	],
	"B":
	[
	true,
	false,
	true,
	false,
	false,
	false
	],
	"C":
	[
	true,
	true,
	false,
	false,
	false,
	false
	]
	}

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

	sel = createSelect();
	sel.option('A');
	sel.option('B');
	sel.option('C');
	sel.changed(letterChangedEvent);

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

	// position each element on the page
	main_canvas.parent('canvasContainer');

	sel.parent(selectorContainer);
	button.parent(buttonContainer);

	for(let i=0; i<6; i++) {
	let cur_checkbox = createCheckbox('', false);
	checkboxes.push(cur_checkbox);
	cur_checkbox.parent('container_' + i);
	}

	letterChangedEvent();
	}

	function uiToDataObject() {
	let obj = [];
	for(let i=0; i<6; i++) {
	obj.push(checkboxes[i].checked());
	}
	return obj;
	}

	function dataObjectToUi(obj) {
	for(let i=0; i<6; i++) {
	checkboxes[i].checked(obj[i]);
	}
	}

	function letterChangedEvent() {
	let item = sel.value();
	dataObjectToUi(letterParams[item]);
	}

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

	const colorFront = [207, 222, 227];
	const colorBack = [29, 42, 46];

	function drawPart(y_offset, pos, tilt) {
	let middle_x = 2 * canvasWidth / 3;
	let middle_y = canvasHeight / 2;
	resetMatrix();
	translate(middle_x + pos, middle_y + y_offset);
	rotate(tilt);

	let scale = 10;

	fill(colorFront);
	// rect(-100,-100,100,100);
	rect(-20scale, -3scale, 20scale, 3scale);
	}

	function drawPart(pos, is_on) {
	let rad = 0;
	if(is_on) {
	strokeWeight(0);
	rad = 90;
	fill(colorFront);
	}
	else {
	stroke(colorFront);
	strokeWeight(8);
	rad = 40;
	noFill();
	}
	push();
	translate(pos[0], pos[1]);
	ellipse(0, 0, rad, rad);
	pop();
	}

	// obj is an array of six booleans
	function drawCharacter(x, y, obj) {
	let spacing_x = 50, spacing_y = 100;

	let positions = [
	[-spacing_x, -spacing_y],
	[ spacing_x, -spacing_y],
	[-spacing_x, 0],
	[ spacing_x, 0],
	[-spacing_x, spacing_y],
	[ spacing_x, spacing_y],
	]

	push();
	translate(x, y);
	for(let i=0; i<6; i++) {
	drawPart(positions[i], obj[i])
	}
	pop();
	}

	function draw () {
	background(colorBack);
	fill(colorFront);
	stroke(95, 52, 8);

	obj = uiToDataObject();
	drawCharacter(width/2, height/2, obj);
	}

	function keyTyped() {
	if (key == '!') {
	saveBlocksImages();
	}
	else if (key == '@') {
	saveBlocksImages(true);
	}
	}
	// note: this file is poorly named - it can generally be ignored.

	// helper functions below for supporting blocks/purview

	function saveBlocksImages(doZoom) {
	if(doZoom == null) {
	doZoom = false;
	}

	// generate 960x500 preview.jpg of entire canvas
	// TODO: should this be recycled?
	var offscreenCanvas = document.createElement('canvas');
	offscreenCanvas.width = 960;
	offscreenCanvas.height = 500;
	var context = offscreenCanvas.getContext('2d');
	// background is flat white
	context.fillStyle="#FFFFFF";
	context.fillRect(0, 0, 960, 500);
	context.drawImage(this.canvas, 0, 0, 960, 500);
	// save to browser
	var downloadMime = 'image/octet-stream';
	var imageData = offscreenCanvas.toDataURL('image/jpeg');
	imageData = imageData.replace('image/jpeg', downloadMime);
	p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg');

	// generate 230x120 thumbnail.png centered on mouse
	offscreenCanvas.width = 230;
	offscreenCanvas.height = 120;

	// background is flat white
	context = offscreenCanvas.getContext('2d');
	context.fillStyle="#FFFFFF";
	context.fillRect(0, 0, 230, 120);

	if(doZoom) {
	// pixelDensity does the right thing on retina displays
	var pd = this._pixelDensity;
	var sx = pd * mouseX - pd * 230/2;
	var sy = pd * mouseY - pd * 120/2;
	var sw = pd * 230;
	var sh = pd * 120;
	// bounds checking - just displace if necessary
	if (sx < 0) {
	sx = 0;
	}
	if (sx > this.canvas.width - sw) {
	sx = this.canvas.width - sw;
	}
	if (sy < 0) {
	sy = 0;
	}
	if (sy > this.canvas.height - sh) {
	sy = this.canvas.height - sh;
	}
	// save to browser
	context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120);
	}
	else {
	// now scaledown
	var full_width = this.canvas.width;
	var full_height = this.canvas.height;
	context.drawImage(this.canvas, 0, 0, full_width, full_height, 0, 0, 230, 120);
	}
	imageData = offscreenCanvas.toDataURL('image/png');
	imageData = imageData.replace('image/png', downloadMime);
	// call this function after 1 second
	setTimeout(function(){
	p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
	}, 1000);
	}