Skip to content

Instantly share code, notes, and snippets.

@AndrewMoffat

AndrewMoffat/.block

Forked from dribnet/.block
Last active August 16, 2016 06:16
Show Gist options
  • Save AndrewMoffat/7c10e340ce7a58923e7c6326110f6417 to your computer and use it in GitHub Desktop.
Save AndrewMoffat/7c10e340ce7a58923e7c6326110f6417 to your computer and use it in GitHub Desktop.
Download ZIP
PS2 MDDN 342 2016
Raw
.block
license: mit
Raw
.purview_helper.js
// note: this file is poorly named - it can generally be ignored.
// helper functions below for supporting blocks/purview
function saveBlocksImages(doZoom) {
if(doZoom == null) {
doZoom = false;
}
// generate 960x500 preview.jpg of entire canvas
// TODO: should this be recycled?
var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = 960;
offscreenCanvas.height = 500;
var context = offscreenCanvas.getContext('2d');
// background is flat white
context.fillStyle="#FFFFFF";
context.fillRect(0, 0, 960, 500);
context.drawImage(this.canvas, 0, 0, 960, 500);
// save to browser
var downloadMime = 'image/octet-stream';
var imageData = offscreenCanvas.toDataURL('image/jpeg');
imageData = imageData.replace('image/jpeg', downloadMime);
p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg');
// generate 230x120 thumbnail.png centered on mouse
offscreenCanvas.width = 230;
offscreenCanvas.height = 120;
// background is flat white
context = offscreenCanvas.getContext('2d');
context.fillStyle="#FFFFFF";
context.fillRect(0, 0, 230, 120);
if(doZoom) {
// pixelDensity does the right thing on retina displays
var pd = this._pixelDensity;
var sx = pd * mouseX - pd * 230/2;
var sy = pd * mouseY - pd * 120/2;
var sw = pd * 230;
var sh = pd * 120;
// bounds checking - just displace if necessary
if (sx < 0) {
sx = 0;
}
if (sx > this.canvas.width - sw) {
sx = this.canvas.width - sw;
}
if (sy < 0) {
sy = 0;
}
if (sy > this.canvas.height - sh) {
sy = this.canvas.height - sh;
}
// save to browser
context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120);
}
else {
// now scaledown
var full_width = this.canvas.width;
var full_height = this.canvas.height;
context.drawImage(this.canvas, 0, 0, full_width, full_height, 0, 0, 230, 120);
}
imageData = offscreenCanvas.toDataURL('image/png');
imageData = imageData.replace('image/png', downloadMime);
p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
}
Raw
README.md

PS2 MDDN 342 2016

Interaction

Final exhibition, I have chosen the word loopy to describe Font. The cyclic nature of the forms, both overall and detail wise made it an obvious choice.

Raw
index.html
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
<script language="javascript" type="text/javascript" src="sketch.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.0;
-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>
</div>
<div class="inner" id="controls" height="500px">
<table id="slider-controls">
</table>
<table>
<tr>
<td>Line1 X</td>
<td id="slider1Container"></td>
</tr>
<tr>
<td>Line 1 Y</td>
<td id="slider2Container"></td>
</tr>
<tr>
<td>Line 1 Rotate</td>
<td id="slider3Container"></td>
</tr>
<tr>
<td>Line 1 Length</td>
<td id="slider4Container"></td>
</tr>
<tr>
<td>Line 2 X</td>
<td id="slider5Container"></td>
</tr>
<tr>
<td>Line 2 Y</td>
<td id="slider6Container"></td>
</tr>
<tr>
<td>Line 2 Rotate</td>
<td id="slider7Container"></td>
</tr>
<tr>
<td>Line 2 Length</td>
<td id="slider8Container"></td>
</tr>
<tr>
<td>Arc 1 X</td>
<td id="slider9Container"></td>
</tr>
<tr>
<td>Arc 1 Y</td>
<td id="slider10Container"></td>
</tr>
<tr>
<td>Arc 1 Radius Y</td>
<td id="slider11Container"></td>
</tr>
<tr>
<td>Arc 1 start </td>
<td id="slider12Container"></td>
</tr>
<tr>
<td>Arc 1 End</td>
<td id="slider13Container"></td>
</tr>
<tr>
<td>Arc 2 X</td>
<td id="slider14Container"></td>
</tr>
<tr>
<td>Arc 2 Y</td>
<td id="slider15Container"></td>
</tr>
<tr>
<td>Arc 2 Radius Y</td>
<td id="slider16Container"></td>
</tr>
<tr>
<td>Arc 2 start </td>
<td id="slider17Container"></td>
</tr>
<tr>
<td>Arc 2 End</td>
<td id="slider18Container"></td>
</tr>
<tr>
<td>Letter</td>
<td id="selectorContainer"></td>
</tr>
<tr>
<td></td>
<td id="buttonContainer"></td>
</tr>
</div>
</div>
</table>
</body>
Raw
letters.json
{
"A": {
"line1": {
"line1_Xpos": 25,
"line1_Ypos": 10,
"line1_Rotate": 195,
"line1_Length": 160
},
"line2": {
"line2_Xpos": 85,
"line2_Ypos": 10,
"line2_Rotate": 155,
"line2_Length": 160
},
"arc1": {
"arc1_X": 55,
"arc1_Y": 0,
"arc1_Radius": 100,
"arc1_startAngle": 240,
"arc1_endAngle": 300
},
"arc2": {
"arc2_X": 50,
"arc2_Y": -55,
"arc2_Radius": 160,
"arc2_startAngle": 45,
"arc2_endAngle": 120
}
},
"B": {
"line1": {
"line1_Xpos": 35,
"line1_Ypos": 40,
"line1_Rotate": 180,
"line1_Length": 160
},
"line2": {
"line2_Xpos": 40,
"line2_Ypos": 10,
"line2_Rotate": 180,
"line2_Length": 160
},
"arc1": {
"arc1_X": 55,
"arc1_Y": 15,
"arc1_Radius": 100,
"arc1_startAngle": 270,
"arc1_endAngle": 90
},
"arc2": {
"arc2_X": 60,
"arc2_Y": -45,
"arc2_Radius": 100,
"arc2_startAngle": 270,
"arc2_endAngle": 90
}
},
"C": {
"line1": {
"line1_Xpos": 5,
"line1_Ypos": 10,
"line1_Rotate": 180,
"line1_Length": 120
},
"line2": {
"line2_Xpos": 5,
"line2_Ypos": 10,
"line2_Rotate": 180,
"line2_Length": 100
},
"arc1": {
"arc1_X": 50,
"arc1_Y": 5,
"arc1_Radius": 180,
"arc1_startAngle": 75,
"arc1_endAngle": 180
},
"arc2": {
"arc2_X": 55,
"arc2_Y": -45,
"arc2_Radius": 200,
"arc2_startAngle": 180,
"arc2_endAngle": 270
}
},
"D": {
"line1": {
"line1_Xpos": 0,
"line1_Ypos": 10,
"line1_Rotate": 180,
"line1_Length": 160
},
"line2": {
"line2_Xpos": -5,
"line2_Ypos": 25,
"line2_Rotate": 180,
"line2_Length": 160
},
"arc1": {
"arc1_X": 25,
"arc1_Y": -25,
"arc1_Radius": 180,
"arc1_startAngle": 255,
"arc1_endAngle": 105
},
"arc2": {
"arc2_X": 30,
"arc2_Y": -25,
"arc2_Radius": 160,
"arc2_startAngle": 45,
"arc2_endAngle": 120
}
},
"E": {
"line1": {
"line1_Xpos": -5,
"line1_Ypos": 45,
"line1_Rotate": 180,
"line1_Length": 180
},
"line2": {
"line2_Xpos": 45,
"line2_Ypos": 0,
"line2_Rotate": 90,
"line2_Length": 80
},
"arc1": {
"arc1_X": 25,
"arc1_Y": -20,
"arc1_Radius": 160,
"arc1_startAngle": 225,
"arc1_endAngle": 300
},
"arc2": {
"arc2_X": 25,
"arc2_Y": 15,
"arc2_Radius": 160,
"arc2_startAngle": 60,
"arc2_endAngle": 135
}
},
"F": {
"line1": {
"line1_Xpos": -5,
"line1_Ypos": 45,
"line1_Rotate": 180,
"line1_Length": 180
},
"line2": {
"line2_Xpos": 5,
"line2_Ypos": 0,
"line2_Rotate": 0,
"line2_Length": 80
},
"arc1": {
"arc1_X": 25,
"arc1_Y": -20,
"arc1_Radius": 160,
"arc1_startAngle": 225,
"arc1_endAngle": 300
},
"arc2": {
"arc2_X": 25,
"arc2_Y": -40,
"arc2_Radius": 140,
"arc2_startAngle": 60,
"arc2_endAngle": 120
}
},
"G": {
"line1": {
"line1_Xpos": 35,
"line1_Ypos": 35,
"line1_Rotate": 180,
"line1_Length": 60
},
"line2": {
"line2_Xpos": 15,
"line2_Ypos": -5,
"line2_Rotate": 270,
"line2_Length": 40
},
"arc1": {
"arc1_X": 25,
"arc1_Y": -20,
"arc1_Radius": 240,
"arc1_startAngle": 75,
"arc1_endAngle": 300
},
"arc2": {
"arc2_X": 25,
"arc2_Y": -20,
"arc2_Radius": 240,
"arc2_startAngle": 75,
"arc2_endAngle": 270
}
},
"H": {
"line1": {
"line1_Xpos": 10,
"line1_Ypos": 40,
"line1_Rotate": 180,
"line1_Length": 220
},
"line2": {
"line2_Xpos": 55,
"line2_Ypos": 40,
"line2_Rotate": 180,
"line2_Length": 220
},
"arc1": {
"arc1_X": 40,
"arc1_Y": 60,
"arc1_Radius": 300,
"arc1_startAngle": 255,
"arc1_endAngle": 285
},
"arc2": {
"arc2_X": 40,
"arc2_Y": -90,
"arc2_Radius": 300,
"arc2_startAngle": 75,
"arc2_endAngle": 105
}
},
"I": {
"line1": {
"line1_Xpos": 10,
"line1_Ypos": 40,
"line1_Rotate": 180,
"line1_Length": 100
},
"line2": {
"line2_Xpos": 10,
"line2_Ypos": 40,
"line2_Rotate": 180,
"line2_Length": 100
},
"arc1": {
"arc1_X": 15,
"arc1_Y": -40,
"arc1_Radius": 40,
"arc1_startAngle": 0,
"arc1_endAngle": 360
},
"arc2": {
"arc2_X": 15,
"arc2_Y": -40,
"arc2_Radius": 20,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
},
"J": {
"line1": {
"line1_Xpos": 50,
"line1_Ypos": 40,
"line1_Rotate": 180,
"line1_Length": 100
},
"line2": {
"line2_Xpos": 50,
"line2_Ypos": 40,
"line2_Rotate": 180,
"line2_Length": 100
},
"arc1": {
"arc1_X": 30,
"arc1_Y": 30,
"arc1_Radius": 120,
"arc1_startAngle": 0,
"arc1_endAngle": 165
},
"arc2": {
"arc2_X": 50,
"arc2_Y": -40,
"arc2_Radius": 20,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
},
"K": {
"line1": {
"line1_Xpos": -10,
"line1_Ypos": 40,
"line1_Rotate": 180,
"line1_Length": 220
},
"line2": {
"line2_Xpos": 35,
"line2_Ypos": 40,
"line2_Rotate": 130,
"line2_Length": 100
},
"arc1": {
"arc1_X": -20,
"arc1_Y": -80,
"arc1_Radius": 300,
"arc1_startAngle": 45,
"arc1_endAngle": 75
},
"arc2": {
"arc2_X": 50,
"arc2_Y": -40,
"arc2_Radius": 0,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
},
"L": {
"line1": {
"line1_Xpos": -15,
"line1_Ypos": 40,
"line1_Rotate": 180,
"line1_Length": 220
},
"line2": {
"line2_Xpos": 45,
"line2_Ypos": 45,
"line2_Rotate": 90,
"line2_Length": 60
},
"arc1": {
"arc1_X": -20,
"arc1_Y": -55,
"arc1_Radius": 0,
"arc1_startAngle": 45,
"arc1_endAngle": 75
},
"arc2": {
"arc2_X": 50,
"arc2_Y": -40,
"arc2_Radius": 0,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
},
"M": {
"line1": {
"line1_Xpos": -20,
"line1_Ypos": 40,
"line1_Rotate": 180,
"line1_Length": 100
},
"line2": {
"line2_Xpos": 70,
"line2_Ypos": 40,
"line2_Rotate": 180,
"line2_Length": 100
},
"arc1": {
"arc1_X": 5,
"arc1_Y": -15,
"arc1_Radius": 100,
"arc1_startAngle": 180,
"arc1_endAngle": 345
},
"arc2": {
"arc2_X": 55,
"arc2_Y": -15,
"arc2_Radius": 100,
"arc2_startAngle": 195,
"arc2_endAngle": 360
}
},
"N": {
"line1": {
"line1_Xpos": 10,
"line1_Ypos": 40,
"line1_Rotate": 180,
"line1_Length": 160
},
"line2": {
"line2_Xpos": 70,
"line2_Ypos": 40,
"line2_Rotate": 180,
"line2_Length": 160
},
"arc1": {
"arc1_X": -5,
"arc1_Y": 25,
"arc1_Radius": 300,
"arc1_startAngle": 285,
"arc1_endAngle": 360
},
"arc2": {
"arc2_X": 0,
"arc2_Y": 25,
"arc2_Radius": 300,
"arc2_startAngle": 300,
"arc2_endAngle": 360
}
},
"O": {
"line1": {
"line1_Xpos": 10,
"line1_Ypos": -40,
"line1_Rotate": 180,
"line1_Length": 0
},
"line2": {
"line2_Xpos": 65,
"line2_Ypos": 30,
"line2_Rotate": 180,
"line2_Length": 0
},
"arc1": {
"arc1_X": -5,
"arc1_Y": 25,
"arc1_Radius": 300,
"arc1_startAngle": 285,
"arc1_endAngle": 360
},
"arc2": {
"arc2_X": 35,
"arc2_Y": 0,
"arc2_Radius": 200,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
},
"P": {
"line1": {
"line1_Xpos": 40,
"line1_Ypos": 60,
"line1_Rotate": 180,
"line1_Length": 220
},
"line2": {
"line2_Xpos": 90,
"line2_Ypos": -50,
"line2_Rotate": 35,
"line2_Length": 0
},
"arc1": {
"arc1_X": 65,
"arc1_Y": -35,
"arc1_Radius": 100,
"arc1_startAngle": 0,
"arc1_endAngle": 360
},
"arc2": {
"arc2_X": 70,
"arc2_Y": -30,
"arc2_Radius": 120,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
},
"Q": {
"line1": {
"line1_Xpos": 35,
"line1_Ypos": 60,
"line1_Rotate": 180,
"line1_Length": 220
},
"line2": {
"line2_Xpos": 40,
"line2_Ypos": 65,
"line2_Rotate": 225,
"line2_Length": 40
},
"arc1": {
"arc1_X": 10,
"arc1_Y": -35,
"arc1_Radius": 100,
"arc1_startAngle": 0,
"arc1_endAngle": 360
},
"arc2": {
"arc2_X": 10,
"arc2_Y": -30,
"arc2_Radius": 120,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
},
"R": {
"line1": {
"line1_Xpos": 15,
"line1_Ypos": 60,
"line1_Rotate": 180,
"line1_Length": 160
},
"line2": {
"line2_Xpos": 25,
"line2_Ypos": -15,
"line2_Rotate": 265,
"line2_Length": 0
},
"arc1": {
"arc1_X": 50,
"arc1_Y": 15,
"arc1_Radius": 140,
"arc1_startAngle": 195,
"arc1_endAngle": 285
},
"arc2": {
"arc2_X": 65,
"arc2_Y": 35,
"arc2_Radius": 220,
"arc2_startAngle": 210,
"arc2_endAngle": 285
}
},
"S": {
"line1": {
"line1_Xpos": -5,
"line1_Ypos": 55,
"line1_Rotate": 325,
"line1_Length": 0
},
"line2": {
"line2_Xpos": 25,
"line2_Ypos": -15,
"line2_Rotate": 265,
"line2_Length": 0
},
"arc1": {
"arc1_X": 20,
"arc1_Y": -40,
"arc1_Radius": 140,
"arc1_startAngle": 90,
"arc1_endAngle": 315
},
"arc2": {
"arc2_X": 15,
"arc2_Y": 35,
"arc2_Radius": 160,
"arc2_startAngle": 270,
"arc2_endAngle": 135
}
},
"T": {
"line1": {
"line1_Xpos": 25,
"line1_Ypos": -85,
"line1_Rotate": 0,
"line1_Length": 300
},
"line2": {
"line2_Xpos": 50,
"line2_Ypos": -35,
"line2_Rotate": 90,
"line2_Length": 160
},
"arc1": {
"arc1_X": -10,
"arc1_Y": -10,
"arc1_Radius": 100,
"arc1_startAngle": 285,
"arc1_endAngle": 360
},
"arc2": {
"arc2_X": 65,
"arc2_Y": -40,
"arc2_Radius": 20,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
},
"U": {
"line1": {
"line1_Xpos": -5,
"line1_Ypos": -35,
"line1_Rotate": 0,
"line1_Length": 120
},
"line2": {
"line2_Xpos": 55,
"line2_Ypos": -35,
"line2_Rotate": 360,
"line2_Length": 120
},
"arc1": {
"arc1_X": 20,
"arc1_Y": 20,
"arc1_Radius": 140,
"arc1_startAngle": 0,
"arc1_endAngle": 180
},
"arc2": {
"arc2_X": 15,
"arc2_Y": 20,
"arc2_Radius": 140,
"arc2_startAngle": 15,
"arc2_endAngle": 90
}
},
"V": {
"line1": {
"line1_Xpos": -10,
"line1_Ypos": -35,
"line1_Rotate": 330,
"line1_Length": 160
},
"line2": {
"line2_Xpos": 65,
"line2_Ypos": -35,
"line2_Rotate": 25,
"line2_Length": 160
},
"arc1": {
"arc1_X": 20,
"arc1_Y": 20,
"arc1_Radius": 0,
"arc1_startAngle": 0,
"arc1_endAngle": 180
},
"arc2": {
"arc2_X": 65,
"arc2_Y": -50,
"arc2_Radius": 20,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
},
"W": {
"line1": {
"line1_Xpos": 35,
"line1_Ypos": 25,
"line1_Rotate": 210,
"line1_Length": 0
},
"line2": {
"line2_Xpos": -50,
"line2_Ypos": -35,
"line2_Rotate": 115,
"line2_Length": 0
},
"arc1": {
"arc1_X": -15,
"arc1_Y": -5,
"arc1_Radius": 220,
"arc1_startAngle": 30,
"arc1_endAngle": 225
},
"arc2": {
"arc2_X": 80,
"arc2_Y": -5,
"arc2_Radius": 220,
"arc2_startAngle": 345,
"arc2_endAngle": 150
}
},
"X": {
"line1": {
"line1_Xpos": 55,
"line1_Ypos": -40,
"line1_Rotate": 40,
"line1_Length": 220
},
"line2": {
"line2_Xpos": 50,
"line2_Ypos": 60,
"line2_Rotate": 145,
"line2_Length": 260
},
"arc1": {
"arc1_X": -35,
"arc1_Y": 55,
"arc1_Radius": 20,
"arc1_startAngle": 0,
"arc1_endAngle": 360
},
"arc2": {
"arc2_X": 60,
"arc2_Y": -55,
"arc2_Radius": 20,
"arc2_startAngle": 360,
"arc2_endAngle": 0
}
},
"Y": {
"line1": {
"line1_Xpos": 55,
"line1_Ypos": -40,
"line1_Rotate": 40,
"line1_Length": 220
},
"line2": {
"line2_Xpos": 10,
"line2_Ypos": 10,
"line2_Rotate": 145,
"line2_Length": 120
},
"arc1": {
"arc1_X": -30,
"arc1_Y": 55,
"arc1_Radius": 20,
"arc1_startAngle": 0,
"arc1_endAngle": 360
},
"arc2": {
"arc2_X": 20,
"arc2_Y": -55,
"arc2_Radius": 160,
"arc2_startAngle": 75,
"arc2_endAngle": 135
}
},
"Z": {
"line1": {
"line1_Xpos": 10,
"line1_Ypos": -55,
"line1_Rotate": 270,
"line1_Length": 160
},
"line2": {
"line2_Xpos": 10,
"line2_Ypos": 35,
"line2_Rotate": 270,
"line2_Length": 160
},
"arc1": {
"arc1_X": 55,
"arc1_Y": 50,
"arc1_Radius": 200,
"arc1_startAngle": 195,
"arc1_endAngle": 270
},
"arc2": {
"arc2_X": 50,
"arc2_Y": -55,
"arc2_Radius": 200,
"arc2_startAngle": 0,
"arc2_endAngle": 90
}
},
"0": {
"line1": {
"line1_Xpos": 10,
"line1_Ypos": 45,
"line1_Rotate": 230,
"line1_Length": 0
},
"line2": {
"line2_Xpos": 30,
"line2_Ypos": -80,
"line2_Rotate": 115,
"line2_Length": 0
},
"arc1": {
"arc1_X": 10,
"arc1_Y": -20,
"arc1_Radius": 300,
"arc1_startAngle": 285,
"arc1_endAngle": 75
},
"arc2": {
"arc2_X": 35,
"arc2_Y": -20,
"arc2_Radius": 300,
"arc2_startAngle": 105,
"arc2_endAngle": 255
}
},
"1": {
"line1": {
"line1_Xpos": 20,
"line1_Ypos": 40,
"line1_Rotate": 180,
"line1_Length": 220
},
"line2": {
"line2_Xpos": 25,
"line2_Ypos": -70,
"line2_Rotate": 50,
"line2_Length": 60
},
"arc1": {
"arc1_X": 55,
"arc1_Y": 15,
"arc1_Radius": 0,
"arc1_startAngle": 270,
"arc1_endAngle": 90
},
"arc2": {
"arc2_X": 5,
"arc2_Y": -45,
"arc2_Radius": 60,
"arc2_startAngle": 300,
"arc2_endAngle": 360
}
},
"2": {
"line1": {
"line1_Xpos": 60,
"line1_Ypos": -30,
"line1_Rotate": 40,
"line1_Length": 180
},
"line2": {
"line2_Xpos": -15,
"line2_Ypos": 50,
"line2_Rotate": 270,
"line2_Length": 140
},
"arc1": {
"arc1_X": 20,
"arc1_Y": -50,
"arc1_Radius": 180,
"arc1_startAngle": 195,
"arc1_endAngle": 30
},
"arc2": {
"arc2_X": 45,
"arc2_Y": -45,
"arc2_Radius": 20,
"arc2_startAngle": 240,
"arc2_endAngle": 360
}
},
"3": {
"line1": {
"line1_Xpos": 30,
"line1_Ypos": -10,
"line1_Rotate": 30,
"line1_Length": 0
},
"line2": {
"line2_Xpos": -15,
"line2_Ypos": 55,
"line2_Rotate": 285,
"line2_Length": 0
},
"arc1": {
"arc1_X": 20,
"arc1_Y": -50,
"arc1_Radius": 180,
"arc1_startAngle": 195,
"arc1_endAngle": 90
},
"arc2": {
"arc2_X": 20,
"arc2_Y": 40,
"arc2_Radius": 180,
"arc2_startAngle": 270,
"arc2_endAngle": 150
}
},
"4": {
"line1": {
"line1_Xpos": 30,
"line1_Ypos": 10,
"line1_Rotate": 90,
"line1_Length": 140
},
"line2": {
"line2_Xpos": 0,
"line2_Ypos": -20,
"line2_Rotate": 0,
"line2_Length": 100
},
"arc1": {
"arc1_X": 25,
"arc1_Y": -5,
"arc1_Radius": 280,
"arc1_startAngle": 180,
"arc1_endAngle": 255
},
"arc2": {
"arc2_X": -5,
"arc2_Y": 55,
"arc2_Radius": 20,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
},
"5": {
"line1": {
"line1_Xpos": 30,
"line1_Ypos": -60,
"line1_Rotate": 90,
"line1_Length": 80
},
"line2": {
"line2_Xpos": -35,
"line2_Ypos": -60,
"line2_Rotate": 0,
"line2_Length": 80
},
"arc1": {
"arc1_X": -15,
"arc1_Y": 30,
"arc1_Radius": 180,
"arc1_startAngle": 255,
"arc1_endAngle": 105
},
"arc2": {
"arc2_X": -25,
"arc2_Y": 70,
"arc2_Radius": 20,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
},
"6": {
"line1": {
"line1_Xpos": -50,
"line1_Ypos": -5,
"line1_Rotate": 75,
"line1_Length": 0
},
"line2": {
"line2_Xpos": -50,
"line2_Ypos": -10,
"line2_Rotate": 0,
"line2_Length": 0
},
"arc1": {
"arc1_X": -15,
"arc1_Y": 30,
"arc1_Radius": 180,
"arc1_startAngle": 0,
"arc1_endAngle": 360
},
"arc2": {
"arc2_X": -5,
"arc2_Y": -30,
"arc2_Radius": 220,
"arc2_startAngle": 165,
"arc2_endAngle": 300
}
},
"7": {
"line1": {
"line1_Xpos": -30,
"line1_Ypos": -60,
"line1_Rotate": 270,
"line1_Length": 140
},
"line2": {
"line2_Xpos": 35,
"line2_Ypos": -15,
"line2_Rotate": 25,
"line2_Length": 160
},
"arc1": {
"arc1_X": 55,
"arc1_Y": 0,
"arc1_Radius": 0,
"arc1_startAngle": 240,
"arc1_endAngle": 300
},
"arc2": {
"arc2_X": 35,
"arc2_Y": -40,
"arc2_Radius": 40,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
},
"8": {
"line1": {
"line1_Xpos": 55,
"line1_Ypos": -70,
"line1_Rotate": 90,
"line1_Length": 0
},
"line2": {
"line2_Xpos": 20,
"line2_Ypos": 70,
"line2_Rotate": 90,
"line2_Length": 0
},
"arc1": {
"arc1_X": 35,
"arc1_Y": 35,
"arc1_Radius": 160,
"arc1_startAngle": 0,
"arc1_endAngle": 360
},
"arc2": {
"arc2_X": 35,
"arc2_Y": -50,
"arc2_Radius": 140,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
},
"9": {
"line1": {
"line1_Xpos": 55,
"line1_Ypos": -70,
"line1_Rotate": 90,
"line1_Length": 0
},
"line2": {
"line2_Xpos": 15,
"line2_Ypos": 45,
"line2_Rotate": 90,
"line2_Length": 0
},
"arc1": {
"arc1_X": 30,
"arc1_Y": 5,
"arc1_Radius": 180,
"arc1_startAngle": 345,
"arc1_endAngle": 120
},
"arc2": {
"arc2_X": 30,
"arc2_Y": -50,
"arc2_Radius": 160,
"arc2_startAngle": 0,
"arc2_endAngle": 360
}
}
}
Raw
sketch.js
// Canvas fields
var main_canvas;
var canvasWidth = 960;
var canvasHeight = 500;
var widthBound = 200;
var heightBound = 200;
var maxArcRadius = 300;
var ellipseSize = 20;
var blurWidth = 4;
var barWidth = 10;
var line1_Xpos
var line1_Ypos
var line1_rotation
var line1_length
var arc1_X
var arc1_Y
var arc1_Radius
var arc1_startAngle
var arc1_endAngle
var maxLength = 300;
var savedValues;
var debugLetter = "A";
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
var AnimLetter = "A";
var animObj = null;
var AnimIP = false;
var AnimFrames = 60;
var curAnimFrame = 0;
var lettercol=203;
var timer1=0;
var timeExpired=false;
var expire=300;
var nextLetter=4;
var nextLetterExpired=false;
var timer2=0;
var expire2=220
function preload() {
savedValues = loadJSON('letters.json');
}
function setup () {
main_canvas = createCanvas(canvasWidth, canvasHeight);
// Sketch setup
noStroke();
colorMode(HSB, 360, 100, 100, 100);
angleMode(DEGREES);
strokeCap(SQUARE);
line1_Xpos = createSlider(-100, 100, 0,5);
line1_Ypos = createSlider(-100, 100, 0,5);
line1_rotation = createSlider(0, 360, 0,5);
line1_length = createSlider(0, maxLength, 100,20);
line2_Xpos = createSlider(-100, 100, 0,5);
line2_Ypos = createSlider(-100, 100, 0,5);
line2_rotation = createSlider(0, 360, 0,5);
line2_length = createSlider(0, maxLength, 100,20);
arc1_X = createSlider(-100, 100, 0,5);
arc1_Y = createSlider(-100, 100, 0,5);
arc1_Radius = createSlider(0, maxArcRadius, 100,20);
arc1_startAngle = createSlider(0, 360, 0,15);
arc1_endAngle = createSlider(0, 360, 180,15);
arc2_X = createSlider(-100, 100, 0,5);
arc2_Y = createSlider(-100, 100, 0,5);
arc2_Radius = createSlider(0, maxArcRadius, 100,20);
arc2_startAngle = createSlider(0, 360, 0,15);
arc2_endAngle = createSlider(0, 360, 180,15);
line1_Xpos.parent('slider1Container');
line1_Ypos.parent('slider2Container');
line1_rotation.parent('slider3Container');
line1_length.parent('slider4Container');
line2_Xpos.parent('slider5Container');
line2_Ypos.parent('slider6Container');
line2_rotation.parent('slider7Container');
line2_length.parent('slider8Container');
arc1_X.parent('slider9Container');
arc1_Y.parent('slider10Container');
arc1_Radius.parent('slider11Container');
arc1_startAngle.parent('slider12Container');
arc1_endAngle.parent('slider13Container');
arc2_X.parent('slider14Container');
arc2_Y.parent('slider15Container');
arc2_Radius.parent('slider16Container');
arc2_startAngle.parent('slider17Container');
arc2_endAngle.parent('slider18Container');
// Controls setup
sel = createSelect();
sel.option('A');
sel.option('B');
sel.option('C');
sel.changed(letterChangedEvent);
dataObjectToSliders(savedValues["A"])
button = createButton('show data');
button.mousePressed(buttonPressedEvent);
// Element setup
main_canvas.parent('canvasContainer');
sel.parent(selectorContainer);
button.parent(buttonContainer);
}
function sliderToDataObject() {
var obj = {};
obj["line1"] = {};
obj["line1"]["line1_Xpos"] = line1_Xpos.value();
obj["line1"]["line1_Ypos"] = line1_Ypos.value();
obj["line1"]["line1_Rotate"] = line1_rotation.value();
obj["line1"]["line1_Length"] = line1_length.value();
obj["line2"] = {};
obj["line2"]["line2_Xpos"] = line2_Xpos.value();
obj["line2"]["line2_Ypos"] = line2_Ypos.value();
obj["line2"]["line2_Rotate"] = line2_rotation.value();
obj["line2"]["line2_Length"] = line2_length.value();
obj["arc1"] = {};
obj["arc1"]["arc1_X"] = arc1_X.value();
obj["arc1"]["arc1_Y"] = arc1_Y.value();
obj["arc1"]["arc1_Radius"] = arc1_Radius.value();
obj["arc1"]["arc1_startAngle"] = arc1_startAngle.value();
obj["arc1"]["arc1_endAngle"] = arc1_endAngle.value();
obj["arc2"] = {};
obj["arc2"]["arc2_X"] = arc2_X.value();
obj["arc2"]["arc2_Y"] = arc2_Y.value();
obj["arc2"]["arc2_Radius"] = arc2_Radius.value();
obj["arc2"]["arc2_startAngle"] = arc2_startAngle.value();
obj["arc2"]["arc2_endAngle"] = arc2_endAngle.value();
return obj;
}
function dataObjectToSliders(obj) {
line1_Xpos.value(obj["line1"]["line1_Xpos"])
line1_Ypos.value(obj["line1"]["line1_Ypos"])
line1_rotation.value(obj["line1"]["line1_Rotate"])
line1_length.value(obj["line1"]["line1_Length"])
line2_Xpos.value(obj["line2"]["line2_Xpos"])
line2_Ypos.value(obj["line2"]["line2_Ypos"])
line2_rotation.value(obj["line2"]["line2_Rotate"])
line2_length.value(obj["line2"]["line2_Length"])
arc1_X.value(obj["arc1"]["arc1_X"])
arc1_Y.value(obj["arc1"]["arc1_Y"])
arc1_Radius.value(obj["arc1"]["arc1_Radius"])
arc1_startAngle.value(obj["arc1"]["arc1_startAngle"])
arc1_endAngle.value(obj["arc1"]["arc1_endAngle"])
arc2_X.value(obj["arc2"]["arc2_X"])
arc2_Y.value(obj["arc2"]["arc2_Y"])
arc2_Radius.value(obj["arc2"]["arc2_Radius"])
arc2_startAngle.value(obj["arc2"]["arc2_startAngle"])
arc2_endAngle.value(obj["arc2"]["arc2_endAngle"])
}
function letterChangedEvent() {
var item = sel.value();
if (savedValues[item] != undefined) {
dataObjectToSliders(savedValues[item]);
}
}
function buttonPressedEvent() {
var obj = sliderToDataObject();
json = JSON.stringify(obj, null, 2);
alert(json);
}
function draw(){
background(10);
var item = sel.value();
if (timer1>=expire){timeExpired=true;}
if (timer2>=expire2){nextLetterExpired=true;}
timer1=timer1+1;
if (timeExpired && nextLetterExpired){
nextLetter=round(random(25));
timer2=0;
nextLetterExpired=false;
}
if(timeExpired) {
animObj = animCalc();
AnimLetter = letters[nextLetter];
AnimIP = true;
curAnimFrame = 0;
timer2=timer2+1;
}
animationword();
}
function animationword(){
if(AnimIP && curAnimFrame >= AnimFrames) {
AnimIP = false; }
if(AnimIP) {
curAnimFrame = curAnimFrame + 1;
}
if(AnimIP && curAnimFrame <= 30) {
background((100/30)*curAnimFrame);}
if(AnimIP && curAnimFrame <= AnimFrames && curAnimFrame > 30){
background(60-((100/30)*curAnimFrame));}
var obj = animCalc();
drawLetter(.4*width, .5*height, 1,obj);
}
function swapLetter(n, c, frameDelay) {
chosenPrevObjs[n] = computeCurrentChosenChar(n);
chosenLetters[n] = c;
chosenIsAnimating[n] = true;
chosenCurAnimationFrame[n] = 0 - frameDelay;
}
function drawLetter(x,y,s,obj) {
var col1=0;
col1=0;
push();
translate(x, y);
push();
scale(s, s);
line1(obj,col1);
arc1(obj,col1);
pop();
pop();
}
function animCalc() {
var obj;
if (AnimIP) {
nextObj = savedValues[AnimLetter];
obj = {};
obj["line1"] = {};
obj["line1"]["line1_Rotate"] = map(curAnimFrame, 0, AnimFrames, animObj["line1"]["line1_Rotate"], nextObj["line1"]["line1_Rotate"])
obj["line1"]["line1_Xpos"] = map(curAnimFrame, 0, AnimFrames, animObj["line1"]["line1_Xpos"], nextObj["line1"]["line1_Xpos"])
obj["line1"]["line1_Ypos"] = map(curAnimFrame, 0, AnimFrames, animObj["line1"]["line1_Ypos"], nextObj["line1"]["line1_Ypos"])
obj["line1"]["line1_Length"] = map(curAnimFrame, 0, AnimFrames, animObj["line1"]["line1_Length"], nextObj["line1"]["line1_Length"])
obj["line2"] = {};
obj["line2"]["line2_Rotate"] = map(curAnimFrame, 0, AnimFrames, animObj["line2"]["line2_Rotate"], nextObj["line2"]["line2_Rotate"])
obj["line2"]["line2_Xpos"] = map(curAnimFrame, 0, AnimFrames, animObj["line2"]["line2_Xpos"], nextObj["line2"]["line2_Xpos"])
obj["line2"]["line2_Ypos"] = map(curAnimFrame, 0, AnimFrames, animObj["line2"]["line2_Ypos"], nextObj["line2"]["line2_Ypos"])
obj["line2"]["line2_Length"] = map(curAnimFrame, 0, AnimFrames, animObj["line2"]["line2_Length"], nextObj["line2"]["line2_Length"])
obj["arc1"] = {};
obj["arc1"]["arc1_X"] = map(curAnimFrame, 0, AnimFrames, animObj["arc1"]["arc1_X"], nextObj["arc1"]["arc1_X"])
obj["arc1"]["arc1_Y"] = map(curAnimFrame, 0, AnimFrames, animObj["arc1"]["arc1_Y"], nextObj["arc1"]["arc1_Y"])
obj["arc1"]["arc1_Radius"] = map(curAnimFrame, 0, AnimFrames, animObj["arc1"]["arc1_Radius"], nextObj["arc1"]["arc1_Radius"])
obj["arc1"]["arc1_startAngle"] = map(curAnimFrame, 0, AnimFrames, animObj["arc1"]["arc1_startAngle"], nextObj["arc1"]["arc1_startAngle"])
obj["arc1"]["arc1_endAngle"] = map(curAnimFrame, 0, AnimFrames, animObj["arc1"]["arc1_endAngle"], nextObj["arc1"]["arc1_endAngle"])
obj["arc2"] = {};
obj["arc2"]["arc2_X"] = map(curAnimFrame, 0, AnimFrames, animObj["arc2"]["arc2_X"], nextObj["arc2"]["arc2_X"])
obj["arc2"]["arc2_Y"] = map(curAnimFrame, 0, AnimFrames, animObj["arc2"]["arc2_Y"], nextObj["arc2"]["arc2_Y"])
obj["arc2"]["arc2_Radius"] = map(curAnimFrame, 0, AnimFrames, animObj["arc2"]["arc2_Radius"], nextObj["arc2"]["arc2_Radius"])
obj["arc2"]["arc2_startAngle"] = map(curAnimFrame, 0, AnimFrames, animObj["arc2"]["arc2_startAngle"], nextObj["arc2"]["arc2_startAngle"])
obj["arc2"]["arc2_endAngle"] = map(curAnimFrame, 0, AnimFrames, animObj["arc2"]["arc2_endAngle"], nextObj["arc2"]["arc2_endAngle"])
}
else {
obj = savedValues[AnimLetter];
}
return obj;
}
function line1(obj,col) {
var rotation1 =obj["line1"]["line1_Rotate"];
var lineXpos1 = obj["line1"]["line1_Xpos"]/ 100 * widthBound;
var lineYpos1 = obj["line1"]["line1_Ypos"]/ 100 * heightBound;
var length1 = obj["line1"]["line1_Length"];
var rotation2 =obj["line2"]["line2_Rotate"];
var lineXpos2 = obj["line2"]["line2_Xpos"]/ 100 * widthBound;
var lineYpos2 = obj["line2"]["line2_Ypos"]/ 100 * heightBound;
var length2 = obj["line2"]["line2_Length"];
push();
translate(lineXpos1, lineYpos1);
rotate(rotation1);
for(var j=0;j<=length1;j=j+10){
noFill();
stroke(lettercol,col,100);
strokeWeight(ellipseSize*.1);
ellipse(0-(.5*ellipseSize),-(0-(.5*ellipseSize))/2+j,ellipseSize);
}
pop();
push();
translate(lineXpos2, lineYpos2);
rotate(rotation2);
for(var j=0;j<=length2;j=j+10){
noFill();
stroke(lettercol,col,100);
strokeWeight(ellipseSize*.1);
ellipse(0-(.5*ellipseSize),-(0-(.5*ellipseSize))/2+j,ellipseSize);
}
pop();
}
function arc1(obj,col) {
var arcX1 = obj["arc1"]["arc1_X"]/ 100 * widthBound;
var arcY1 = obj["arc1"]["arc1_Y"]/ 100 * heightBound;
var arcRadius1 = obj["arc1"]["arc1_Radius"];
var startAngle1 = obj["arc1"]["arc1_startAngle"];
var endAngle1 = obj["arc1"]["arc1_endAngle"];
var arcX2 = obj["arc2"]["arc2_X"]/ 100 * widthBound;
var arcY2 = obj["arc2"]["arc2_Y"]/ 100 * heightBound;
var arcRadius2 = obj["arc2"]["arc2_Radius"];
var startAngle2 = obj["arc2"]["arc2_startAngle"];
var endAngle2 = obj["arc2"]["arc2_endAngle"];
push();
translate(arcX1, arcY1);
noFill();
stroke(lettercol,col,100);
strokeWeight(ellipseSize*.1);
arc(0, 0, arcRadius1, arcRadius1, startAngle1, endAngle1);
pop();
push();
translate(arcX2, arcY2);
noFill();
stroke(lettercol,col,100);
strokeWeight(ellipseSize*.1);
arc(0, 0, arcRadius2, arcRadius2, startAngle2, endAngle2);
pop();
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
else {
timeExpired=false;
timer1=0;
timer2=0;
upper_key = key.toUpperCase();
if (upper_key in savedValues) {
animObj = animCalc();
AnimLetter = upper_key;
AnimIP = true;
curAnimFrame = 0;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment