dribnet/README.md

## README.md

      
    Raw
  

              README.md
            
          
    PS2 MDDN 242 2018

(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


## 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="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="interactino.html">interaction</a>
    <li><a href="exhibition.html">exhibition</a>
<ul>
</body>

## 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
            
          
## 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="interactino.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 colorFront  = "#199cff";
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
  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"];

  // draw two circles
  ellipse(posx, posy, 150, 150);
  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, 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="interactino.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
      }
    },
  "B":
    {
      "box1": {
        "position": -191,
        "tilt": -90
      },
      "box2": {
        "position": -54,
        "tilt": -45
      },
      "box3": {
        "position": -12,
        "tilt": 6
      }
    },
  "C":
    {
      "box1": {
        "position": -163,
        "tilt": -84
      },
      "box2": {
        "position": -191,
        "tilt": 163
      },
      "box3": {
        "position": 0,
        "tilt": -27
      }
    }
}

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="interactino.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="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="interactino.html">interaction</a>
	<li><a href="exhibition.html">exhibition</a>
	<ul>
	</body>
	{
	"A":
	[
	true,
	false,
	false,
	false,
	false,
	false
	],
	"B":
	[
	true,
	false,
	true,
	false,
	false,
	false
	],
	"C":
	[
	true,
	true,
	false,
	false,
	false,
	false
	]
	}
	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 colorFront = "#199cff";
	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
	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"];

	// draw two circles
	ellipse(posx, posy, 150, 150);
	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, 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
	}
	},
	"B":
	{
	"box1": {
	"position": -191,
	"tilt": -90
	},
	"box2": {
	"position": -54,
	"tilt": -45
	},
	"box3": {
	"position": -12,
	"tilt": 6
	}
	},
	"C":
	{
	"box1": {
	"position": -163,
	"tilt": -84
	},
	"box2": {
	"position": -191,
	"tilt": 163
	},
	"box3": {
	"position": 0,
	"tilt": -27
	}
	}
	}

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