Skip to content

Instantly share code, notes, and snippets.

@dribnet

dribnet/README.md

Last active March 27, 2018 02:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dribnet/ad2960012a5b17c26bb68f39c812aae7 to your computer and use it in GitHub Desktop.
Save dribnet/ad2960012a5b17c26bb68f39c812aae7 to your computer and use it in GitHub Desktop.
Download ZIP
updated PS2
Raw
README.md

PS2 MDDN 242 2018

This is the code for getting started with PS2. The drop down selects previous saved settings. The show data button exposes the current drawing as JSON so it can be added to the code.

Replace this README with information about your alphabet.

Raw
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="start.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>
</table>
</body>
Raw
letters.json
{
"A":
[
true,
false,
false,
false,
false,
false
],
"B":
[
true,
false,
true,
false,
false,
false
],
"C":
[
true,
true,
false,
false,
false,
false
]
}
Raw
sketch.js
var main_canvas;
var pos1_slider;
var tilt1_slider;
var pos2_slider;
var tilt2_slider;
var pos3_slider;
var tilt3_slider;
var canvasWidth = 960;
var canvasHeight = 500;
var 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() {
var 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() {
var item = sel.value();
dataObjectToSliders(savedValues[item]);
}
function buttonPressedEvent() {
var obj = sliderToDataObject();
json = JSON.stringify(obj, null, 2);
alert(json);
}
var colorFront = [207, 222, 227];
var colorBack = [29, 42, 46];
function drawPart(y_offset, pos, tilt) {
var middle_x = 2 * canvasWidth / 3;
var middle_y = canvasHeight / 2;
resetMatrix();
translate(middle_x + pos, middle_y + y_offset);
rotate(tilt);
var 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) {
var pos, tilt;
pos = pos_slider.value();
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);
}
}
Raw
start.js
const canvasWidth = 960;
const canvasHeight = 500;
function setup () {
// create the drawing canvas, save the canvas element
main_canvas = createCanvas(canvasWidth, canvasHeight);
}
const colorBack = "#f0f0f0";
const colorFront = "#303030";
const colorSpot1 = "#b03030";
const colorSpot2 = "#d04040";
const colorSpot3 = "#f05050";
function drawLetter(whichLetter) {
let posx=0, posy=0;
if (whichLetter == "A") {
fill(colorFront);
ellipse(posx, posy, 200, 200);
fill(colorSpot1);
ellipse(posx, posy, 120, 120);
fill(colorSpot2);
ellipse(posx, posy, 70, 70);
fill(colorSpot3);
ellipse(posx, posy, 30, 30);
}
else if (whichLetter == "B") {
fill(colorFront);
ellipse(posx, posy, 200, 200);
fill(colorSpot1);
ellipse(posx, posy, 120, 120);
fill(colorSpot2);
ellipse(posx, posy, 70, 70);
fill(colorSpot3);
ellipse(posx, posy, 30, 30);
}
else {
fill(colorFront);
ellipse(posx, posy, 200, 200);
fill(colorSpot1);
ellipse(posx, posy, 120, 120);
fill(colorSpot2);
ellipse(posx, posy, 70, 70);
fill(colorSpot3);
ellipse(posx, posy, 30, 30);
}
}
function draw () {
background(colorBack);
noStroke();
push();
translate(1*width/4, height/2);
drawLetter("A")
pop();
push();
translate(2*width/4, height/2);
drawLetter("B")
pop();
push();
translate(3*width/4, height/2);
drawLetter("C")
pop();
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
}
Raw
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>
Raw
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 colorBack = "#f0f0f0";
const colorFront = "#303030";
const colorSpot1 = "#b03030";
const colorSpot2 = "#d04040";
const colorSpot3 = "#f05050";
let letterA_posX = -20;
let letterA_posY = -20;
let letterB_posX = 20;
let letterB_posY = 20;
function drawLetter(posx, posy, offx, offy) {
fill(colorFront);
ellipse(posx, posy, 200, 200);
fill(colorSpot1);
ellipse(posx, posy, 120, 120);
fill(colorSpot2);
ellipse(posx, posy, 70, 70);
fill(colorSpot3);
ellipse(posx+offx, posy+offy, 30, 30);
}
function draw () {
background(colorBack);
noStroke();
let centerX = width/2;
let centerY = height/2;
drawLetter(centerX-100, centerY, letterA_posX, letterA_posY);
drawLetter(centerX+100, centerY, letterB_posX, letterB_posY);
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
}
Raw
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>
Raw
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);
}
}
Raw
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);
p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment