Skip to content

Instantly share code, notes, and snippets.

@Michael-Kelly-Digital-Design

Michael-Kelly-Digital-Design/.block

Forked from dribnet/.block
Last active October 14, 2016 09:28
Show Gist options
  • Save Michael-Kelly-Digital-Design/04fe7dd7a756858dedf77d4672696e9c to your computer and use it in GitHub Desktop.
Save Michael-Kelly-Digital-Design/04fe7dd7a756858dedf77d4672696e9c to your computer and use it in GitHub Desktop.
Download ZIP
Dimensional Glyph
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

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.

##Concepts

Glyph 4

Radial Glyph
{% img Glyph4 conceptAsset 1.png 220 'Glyph4 concept 1' %} Bezier Glyph {% img Glyph4 conceptAsset 2.png 220 'Glyph4 concept 1' %}

Glyph 8

##Diary

Thursday 29 September

12pm-3pm: created objects to store variables for drawable shape

Raw
glyph.js
/*
* val4 is an array of 4 numbers that range from [0,100]
* size is the number of pixels for width and height
* use p5.js to draw a round grawscale glpyh within the bounding box
*/
function glyph4( values, size ) {
var v = values;
var s = size;
var scale;
var strokeCol = 100;
// ----- -----
var el0 = { //background ellipse
"diameter": s,
"col": 210,
"outline": 3
};
var el1 = { //
"diameter": 0,
"col": 245
};
var el2 = {
"diameter": 0,
"col": 0
};
var el3 = {
"diameter": 0,
"col": 0
}
var connect = {
"col": 0,
"pos2": 0,
"pos2": 0
};
//calculate values
el0.pos = createVector( s/2, s/2 );
el1.pos = createVector( s/2, s/2 );
el1.diameter = s - map( values[ 0 ], 0, 100, el0.outline * 2, s/4 );
var scale = el1.diameter /s;
var centerOff = map( v[ 1 ] + v[ 2 ], 0, 200, 0, el0.diameter /5 ) + el0.diameter /32; //distance from center for el2/el3
centerOff *= scale;
el2.pos = createVector( s/2 + ( centerOff ), s/2 + ( centerOff ) );
el2.diameter = map( v[ 1 ], 0, 100, s/6, s/3 );
el2.diameter *= scale;
el3.pos = createVector( s/2 - ( centerOff ), s/2 - ( centerOff ) );
el3.diameter = map( v[ 2 ], 0, 100, s/6, s/3 );
el3.diameter *= scale;
connect.pos1 = createVector( s/2 - ( el1.diameter )/2 +el0.outline*2 , s/2 );
connect.pos2 = createVector( s/2 + ( el1.diameter )/2 -el0.outline*2 , s/2 );
//draw ellipses
fill( el0.col );
noStroke();
strokeWeight( el0.outline );
ellipse( el0.pos.x, el0.pos.y, el0.diameter ); //background
stroke( 100 ); //TODO
fill( el1.col );
ellipse( el1.pos.x, el1.pos.y, el1.diameter ); //backfill
ellipse( el2.pos.x, el2.pos.y, el2.diameter ); //ellipse 1
ellipse( el3.pos.x, el3.pos.y, el3.diameter );
line( connect.pos1.x, connect.pos1.y, connect.pos2.x, connect.pos2.y );
//DEBUG>
push();
stroke( 255, 0, 0 );
strokeWeight( 1 );
noFill();
rect( 0, 0, size + 2, size + 2 );
stroke( 0, 255, 0 );
//ellipse(s/2, s/2, size - 2);
pop();
//<DEBUG
}
/*
* val8 is an array of 8 numbers that range from [0,100]
* size is the number of pixels for width and height
* use p5.js to draw a square color glpyh within the bounding box
*/
function glyph8( values, size ) {
var red = [ 255, 0, 0 ];
var green = [ 0, 255, 0 ];
var blue = [ 0, 0, 255 ];
var white = [ 255, 255, 255 ];
var colors = [ red, green, blue, white, red, green, blue, white ];
stroke( 0 );
fill( 0 );
rect( 0, 0, size, size );
for ( var i = 0; i < 8; i++ ) {
stroke( colors[ i ] );
fill( colors[ i ] );
offsety = i * size /8;
offsetx = ( size * values[ i ] ) /100;
rect( 0, offsety, offsetx, size /8 );
}
}
Raw
index.html
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/addons/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
<script language="javascript" type="text/javascript" src="glyph.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.1;
-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>
<tr>
<td>1</td>
<td id="slider1Container"></td>
</tr>
<tr>
<td>2</td>
<td id="slider2Container"></td>
</tr>
<tr>
<td>3</td>
<td id="slider3Container"></td>
</tr>
<tr>
<td>4</td>
<td id="slider4Container"></td>
</tr>
<tr>
<td>5</td>
<td id="slider5Container"></td>
</tr>
<tr>
<td>6</td>
<td id="slider6Container"></td>
</tr>
<tr>
<td>7</td>
<td id="slider7Container"></td>
</tr>
<tr>
<td>8</td>
<td id="slider8Container"></td>
</tr>
<tr>
<td>
<hr>
</td>
</tr>
<tr>
<td>Glyph</td>
<td id="selector1Container"></td>
</tr>
<tr>
<td>Mode</td>
<td id="selector2Container"></td>
</tr>
<tr>
<td>Size</td>
<td id="selector3Container"></td>
</tr>
<tr>
<td></td>
<td id="buttonContainer"></td>
</tr>
</div>
</div>
</table>
</body>
Raw
sketch.js
var canvasWidth = 960;
var canvasHeight = 500;
var glyphSelector;
var modeSelector;
var sizeSelector;
var val_sliders = [];
function setup () {
// create the drawing canvas, save the canvas element
var main_canvas = createCanvas(canvasWidth, canvasHeight);
main_canvas.parent('canvasContainer');
// create two sliders
for (i=0; i<8; i++) {
var slider = createSlider(0, 100, 50);
slider.parent("slider" + (i+1) + "Container")
val_sliders.push(slider);
}
glyphSelector = createSelect();
glyphSelector.option('glyph4');
glyphSelector.option('glyph8');
glyphSelector.changed(modeChangedEvent);
glyphSelector.parent('selector1Container');
modeSelector = createSelect();
modeSelector.option('drive');
modeSelector.option('random_grid');
// modeSelector.option('sorttest');
modeSelector.changed(modeChangedEvent);
modeSelector.parent('selector2Container');
sizeSelector = createSelect();
sizeSelector.option('64');
sizeSelector.option('128');
sizeSelector.option('256');
sizeSelector.parent('selector3Container');
sizeSelector.value('256');
sizeSelector.changed(sizeChangedEvent);
button = createButton('redo');
button.mousePressed(buttonPressedEvent);
button.parent('buttonContainer');
refreshGridData();
modeChangedEvent();
}
var numGridRows;
var numGridCols;
var gridValues; // row, col order
var gridOffsetX, gridOffsetY;
var gridSpacingX, gridSpacingY;
// Generate data for putting glyphs in a grid
function refreshGridData() {
numGridCols = 7;
numGridRows = 3;
gridOffsetX = 10;
gridSpacingX = 136;
gridOffsetY = 20;
gridSpacingY = 166;
gridValues = new Array(numGridRows);
for (var i=0; i<numGridRows; i++) {
gridValues[i] = new Array(numGridCols);
for (var j=0; j<numGridCols; j++) {
gridValues[i][j] = new Array(8);
for (var k=0; k<8; k++) {
gridValues[i][j][k] = random(100);
}
}
}
}
function sizeChangedEvent() {
var mode = modeSelector.value();
if (mode != "drive") {
refreshGridData();
}
}
function modeChangedEvent() {
var mode = modeSelector.value();
var glyph = glyphSelector.value();
// enable/disable sliders
if (mode === "drive") {
// disable the button
button.attribute('disabled','');
// enable the first four sliders
for(i=0; i<4; i++) {
val_sliders[i].removeAttribute('disabled');
}
if(glyph === "glyph4") {
for(i=4; i<8; i++) {
val_sliders[i].attribute('disabled','');
}
}
else {
for(i=4; i<8; i++) {
val_sliders[i].removeAttribute('disabled');
}
}
}
else {
// disable the button
button.removeAttribute('disabled');
// disable the sliders
for(i=0; i<8; i++) {
val_sliders[i].attribute('disabled','');
}
}
}
function buttonPressedEvent() {
refreshGridData();
}
var colorBack = [128, 128, 128];
var colorFront = [200, 200, 200];
function drawDriveMode() {
var glyph_is_glyph4 = true;
if(glyphSelector.value() === "glyph8")
glyph_is_glyph4 = false;
var glyphSize = parseInt(sizeSelector.value(), 10);
var halfSize = glyphSize / 2;
background(colorBack);
var halfSize = glyphSize / 2;
var middle_x = canvasWidth / 2;
var middle_y = canvasHeight / 2;
resetMatrix();
translate(middle_x - halfSize, middle_y - halfSize);
var val = [0,0,0,0,0,0,0,0];
for(i=0; i<8; i++) {
val[i] = val_sliders[i].value();
}
stroke(128, 128, 192);
noFill();
if(glyph_is_glyph4) {
ellipse(halfSize, halfSize, glyphSize+2);
glyph4(val, glyphSize)
}
else {
rect(-1, -1, glyphSize+1, glyphSize+2);
glyph8(val, glyphSize)
}
}
function drawSortMode() {
var glyph_fn = glyph4;
if(glyphSelector.value() === "glyph8")
glyph_fn = glyph8;
background(colorBack);
for (var i=0; i<numGridRows; i++) {
for (var j=0; j<numGridCols; j++) {
resetMatrix();
translate(gridOffsetX + j * gridSpacingX, gridOffsetY + i * gridSpacingY);
for (var k=0; k<8; k++) {
glyph_fn(gridValues[i][j], 128);
}
}
}
}
function draw () {
var mode = modeSelector.value();
if (mode == "drive") {
drawDriveMode();
}
else {
drawSortMode();
}
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment