Skip to content

Instantly share code, notes, and snippets.

@MrAzureAngel

MrAzureAngel/.block

Forked from dribnet/.block
Last active August 19, 2016 11:02
Show Gist options
  • Save MrAzureAngel/72afc3d04341fcb2c64f7290ca88a3cc to your computer and use it in GitHub Desktop.
Save MrAzureAngel/72afc3d04341fcb2c64f7290ca88a3cc 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

GVR

UPDATE - from the previous itteration I mainly fixed the color scheme to be a bit better and worked more on adding a visual marker when you type in letters with the word version. I was unable to get the exhibition function working.

You can press UP and DOWN to increase the size of the font and LEFT and RIGHT to disable and enable the strokewidth.

You can now choose both alphabet options.

You can now choose the word writing option and click anywhere on screen to start writing there. You can press return to go to the next line and backspace to delete letters. Have it semi working so that it deletes and moves correctly, but pressing return puts an 'E' into the array for some reason and the saved state jumps to the incorrect level if you have more than one line of text.

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.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>
</div>
<div class="inner" id="controls" height="500px">
<table>
<tr>
<td>
<hr>
</td>
</tr>
<tr>
<td>Choose</td>
<td id="selectorContainer"></td>
</tr>
<tr>
<td></td>
<td id="buttonContainer"></td>
</tr>
</div>
</div>
</table>
</body>
Raw
sketch.js
var canvasWidth = 960;
var canvasHeight = 860;
var letterArray = [];
var easing = 0.05;
// The number of points that are "On" in the current letter (active pixels)
var numPoints = 0;
// How detailed the sketch for the letters are
var detail = 0;
// Size of the font
var pxlSize = 10;
// For holding the letters as they are generated for click display for single letter mode and alphabet and write modes
var letterHolderSingle = [];
var letterHolderAlphabet = [];
var letterHolderWord = [];
// State toggles
var currState = 0; // 0 = none, 1 = Single Letter mode (interactive), 2 = Alphabetic Grid Mode, 3 = word interaction
// Data sets for instructions and alphabet display
var singleInstruct;
var alphabetInstruct;
var wordInstruct;
var instSize;
// Variables for currState 3, writing your own words
var startXWord;
var startYWord;
var nextLetter;
var prevLetter;
var nextLine;
var pointerX;
var pointerY;
var targetMax = 10;
var targetMin = 3;
var direction = true;
var lsize = 1;
// TIme variable for instruction character growth
var timeA;
var timeB;
// Time variables for color growth
var timeC1;
var timeC2;
// Color Variables
var c1,c2,c3,c4,cCount,cDirection;
// Style 1 = to create a Stylised 8-Bit letters alphabet
// Consists of a 4 X 5 Grid. IMages are in the Images folder for reference.
// Each point is either on or off and populated into an array for display
// Just using A B C for this example. If I like it I will develop it more
function setup () {
// create the drawing canvas, save the canvas element
main_canvas = createCanvas(canvasWidth, canvasHeight);
//Starts the word in the center for currState 3, word writer if no mouse clicked
startXWord = 150;
startYWord = canvasHeight/2;
nextLetter = 0;
pointerX = startXWord;
pointerY = startYWord;
// Time variables
timeA = millis();
timeC1 = millis();
// Color variables for pulse
c1 = 190;
c2 = 93;
c3 = 239;
c4 = 200;
cCount = 0;
cDirection = true;
// rotation in degrees (more slider friendly)
angleMode(DEGREES);
instSize = 5;
// populating instructions and alphabet
singleInstruct = 'PRESS ANY CHARACTER'.split('');
alphabetInstruct = 'THE FULL CHARACTER SET'.split('');
wordInstruct = 'CLICK ANYWHERE THEN WRITE'.split('');
alphabetDisplay = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'.split('');
// creates and populates a 4 X 5 array with null values to be populated later
for(var i = 0; i < 5; i++){
letterArray[i] = [];
for(var j = 0; j < 4; j++){
letterArray[i][j] = null;
}
}
rectMode(CENTER);
sel = createSelect();
sel.option('Alphabet Grid');
sel.option('Alphabet Silhouette');
sel.option('Single Letter Mode');
sel.option('Write Mode');
sel.changed(dropDownChooser);
// position each element on the page
main_canvas.parent('canvasContainer');
sel.parent(selectorContainer);
}
// Populates the letter array based on the input received
function populateLetterArray(item){
switch(item) {
case("A"):
letterArray[0][0] = 0;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 0;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 0;
letterArray[4][2] = 0;
letterArray[4][3] = 1;
break;
case("B"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 0;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 0;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 0;
break;
case("C"):
letterArray[0][0] = 0;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 0;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 0;
letterArray[2][2] = 0;
letterArray[2][3] = 0;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 0;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 0;
break;
case("D"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 0;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 0;
letterArray[2][2] = 0;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 0;
break;
case("E"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 0;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 0;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 0;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("F"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 0;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 0;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 0;
letterArray[4][0] = 1;
letterArray[4][1] = 0;
letterArray[4][2] = 0;
letterArray[4][3] = 0;
break;
case("G"):
letterArray[0][0] = 0;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 0;
letterArray[2][0] = 1;
letterArray[2][1] = 0;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 0;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("H"):
letterArray[0][0] = 1;
letterArray[0][1] = 0;
letterArray[0][2] = 0;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 0;
letterArray[4][2] = 0;
letterArray[4][3] = 1;
break;
case("I"):
letterArray[0][0] = 0;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 0;
letterArray[1][1] = 0;
letterArray[1][2] = 1;
letterArray[1][3] = 0;
letterArray[2][0] = 0;
letterArray[2][1] = 0;
letterArray[2][2] = 1;
letterArray[2][3] = 0;
letterArray[3][0] = 0;
letterArray[3][1] = 0;
letterArray[3][2] = 1;
letterArray[3][3] = 0;
letterArray[4][0] = 0;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("J"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 0;
letterArray[1][1] = 0;
letterArray[1][2] = 1;
letterArray[1][3] = 0;
letterArray[2][0] = 0;
letterArray[2][1] = 0;
letterArray[2][2] = 1;
letterArray[2][3] = 0;
letterArray[3][0] = 0;
letterArray[3][1] = 0;
letterArray[3][2] = 1;
letterArray[3][3] = 0;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 0;
break;
case("K"):
letterArray[0][0] = 1;
letterArray[0][1] = 0;
letterArray[0][2] = 0;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 1;
letterArray[1][3] = 0;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 0;
letterArray[2][3] = 0;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 1;
letterArray[3][3] = 0;
letterArray[4][0] = 1;
letterArray[4][1] = 0;
letterArray[4][2] = 0;
letterArray[4][3] = 1;
break;
case("L"):
letterArray[0][0] = 1;
letterArray[0][1] = 0;
letterArray[0][2] = 0;
letterArray[0][3] = 0;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 0;
letterArray[2][0] = 1;
letterArray[2][1] = 0;
letterArray[2][2] = 0;
letterArray[2][3] = 0;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 0;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("M"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 1;
letterArray[1][2] = 1;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 0;
letterArray[4][2] = 0;
letterArray[4][3] = 1;
break;
case("N"):
letterArray[0][0] = 1;
letterArray[0][1] = 0;
letterArray[0][2] = 0;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 1;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 1;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 0;
letterArray[4][2] = 0;
letterArray[4][3] = 1;
break;
case("O"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 0;
letterArray[2][2] = 0;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("P"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 0;
letterArray[4][0] = 1;
letterArray[4][1] = 0;
letterArray[4][2] = 0;
letterArray[4][3] = 0;
break;
case("Q"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 0;
letterArray[2][2] = 0;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 1;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("R"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 1;
letterArray[3][3] = 0;
letterArray[4][0] = 1;
letterArray[4][1] = 0;
letterArray[4][2] = 0;
letterArray[4][3] = 1;
break;
case("S"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 0;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 0;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("T"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 0;
letterArray[1][1] = 0;
letterArray[1][2] = 1;
letterArray[1][3] = 0;
letterArray[2][0] = 0;
letterArray[2][1] = 0;
letterArray[2][2] = 1;
letterArray[2][3] = 0;
letterArray[3][0] = 0;
letterArray[3][1] = 0;
letterArray[3][2] = 1;
letterArray[3][3] = 0;
letterArray[4][0] = 0;
letterArray[4][1] = 0;
letterArray[4][2] = 1;
letterArray[4][3] = 0;
break;
case("U"):
letterArray[0][0] = 1;
letterArray[0][1] = 0;
letterArray[0][2] = 0;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 0;
letterArray[2][2] = 0;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("V"):
letterArray[0][0] = 1;
letterArray[0][1] = 0;
letterArray[0][2] = 0;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 0;
letterArray[2][2] = 0;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 0;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 0;
break;
case("W"):
letterArray[0][0] = 1;
letterArray[0][1] = 0;
letterArray[0][2] = 0;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 1;
letterArray[3][2] = 1;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("X"):
letterArray[0][0] = 1;
letterArray[0][1] = 0;
letterArray[0][2] = 0;
letterArray[0][3] = 1;
letterArray[1][0] = 0;
letterArray[1][1] = 1;
letterArray[1][2] = 1;
letterArray[1][3] = 0;
letterArray[2][0] = 0;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 0;
letterArray[3][0] = 0;
letterArray[3][1] = 1;
letterArray[3][2] = 1;
letterArray[3][3] = 0;
letterArray[4][0] = 1;
letterArray[4][1] = 0;
letterArray[4][2] = 0;
letterArray[4][3] = 1;
break;
case("Y"):
letterArray[0][0] = 1;
letterArray[0][1] = 0;
letterArray[0][2] = 0;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 0;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 0;
letterArray[3][0] = 0;
letterArray[3][1] = 0;
letterArray[3][2] = 1;
letterArray[3][3] = 0;
letterArray[4][0] = 0;
letterArray[4][1] = 0;
letterArray[4][2] = 1;
letterArray[4][3] = 0;
break;
case("Z"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 0;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 0;
letterArray[2][1] = 0;
letterArray[2][2] = 1;
letterArray[2][3] = 0;
letterArray[3][0] = 0;
letterArray[3][1] = 1;
letterArray[3][2] = 0;
letterArray[3][3] = 0;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("0"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 0;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 1;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("1"):
letterArray[0][0] = 0;
letterArray[0][1] = 0;
letterArray[0][2] = 1;
letterArray[0][3] = 0;
letterArray[1][0] = 0;
letterArray[1][1] = 1;
letterArray[1][2] = 1;
letterArray[1][3] = 0;
letterArray[2][0] = 0;
letterArray[2][1] = 0;
letterArray[2][2] = 1;
letterArray[2][3] = 0;
letterArray[3][0] = 0;
letterArray[3][1] = 0;
letterArray[3][2] = 1;
letterArray[3][3] = 0;
letterArray[4][0] = 0;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("2"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 0;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 0;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("3"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 0;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 0;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 0;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("4"):
letterArray[0][0] = 1;
letterArray[0][1] = 0;
letterArray[0][2] = 0;
letterArray[0][3] = 0;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 1;
letterArray[1][3] = 0;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 0;
letterArray[3][1] = 0;
letterArray[3][2] = 1;
letterArray[3][3] = 0;
letterArray[4][0] = 0;
letterArray[4][1] = 0;
letterArray[4][2] = 1;
letterArray[4][3] = 0;
break;
case("5"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 0;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 0;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("6"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 0;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("7"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 0;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 0;
letterArray[2][1] = 0;
letterArray[2][2] = 0;
letterArray[2][3] = 1;
letterArray[3][0] = 0;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 0;
letterArray[4][1] = 0;
letterArray[4][2] = 0;
letterArray[4][3] = 1;
break;
case("8"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 1;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
case("9"):
letterArray[0][0] = 1;
letterArray[0][1] = 1;
letterArray[0][2] = 1;
letterArray[0][3] = 1;
letterArray[1][0] = 1;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 1;
letterArray[2][0] = 1;
letterArray[2][1] = 1;
letterArray[2][2] = 1;
letterArray[2][3] = 1;
letterArray[3][0] = 0;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 1;
letterArray[4][0] = 0;
letterArray[4][1] = 0;
letterArray[4][2] = 0;
letterArray[4][3] = 1;
break;
case(" "):
letterArray[0][0] = 0;
letterArray[0][1] = 0;
letterArray[0][2] = 0;
letterArray[0][3] = 0;
letterArray[1][0] = 0;
letterArray[1][1] = 0;
letterArray[1][2] = 0;
letterArray[1][3] = 0;
letterArray[2][0] = 0;
letterArray[2][1] = 0;
letterArray[2][2] = 0;
letterArray[2][3] = 0;
letterArray[3][0] = 0;
letterArray[3][1] = 0;
letterArray[3][2] = 0;
letterArray[3][3] = 0;
letterArray[4][0] = 1;
letterArray[4][1] = 1;
letterArray[4][2] = 1;
letterArray[4][3] = 1;
break;
}
}
// Function to write the instructions to the screen based on the screen chosen
function writeInstructions(){
if(currState == 1){
for(var i = 0; i <= singleInstruct.length-1; i++){
timeB = millis();
if(timeB - timeA > 50){
timeA = millis();
if(direction){
lsize+=lsize*easing;
if(lsize>targetMax){
direction = false;
}
} else {
lsize-=lsize*easing;
if(lsize<targetMin){
direction = true;
}
}
}
populateLetterArray(singleInstruct[i]);
this.letterTemp = new aLetter(10+(i*(lsize*5)), 700, lsize);
this.letterTemp.populateArray();
this.letterTemp.display();
}
}
if(currState == 2 || currState == 4){
for(var i = 0; i <= alphabetInstruct.length-1; i++){
timeB = millis();
if(timeB - timeA > 50){
timeA = millis();
if(direction){
lsize+=lsize*easing;
if(lsize>targetMax){
direction = false;
}
} else {
lsize-=lsize*easing;
if(lsize<targetMin){
direction = true;
}
}
}
populateLetterArray(alphabetInstruct[i]);
this.letterTemp = new aLetter(10+(i*(lsize*5)), 700, lsize);
this.letterTemp.populateArray();
this.letterTemp.display();
}
}
if(currState == 3){
for(var i = 0; i <= wordInstruct.length-1; i++){
timeB = millis();
if(timeB - timeA > 50){
timeA = millis();
if(direction){
lsize+=lsize*easing;
if(lsize>targetMax){
direction = false;
}
} else {
lsize-=lsize*easing;
if(lsize<targetMin){
direction = true;
}
}
}
populateLetterArray(wordInstruct[i]);
this.letterTemp = new aLetter(10+(i*(lsize*5)), 700, lsize);
this.letterTemp.populateArray();
this.letterTemp.display();
}
}
}
// For when user presses a button
function letterChangedEvent(value) {
this.value = value;
populateLetterArray(this.value);
}
// Used only with the dropdown
function dropDownChooser(){
doAction(sel.value());
}
// Actions for the drop down chooser
function doAction(val){
this.value = val;
if(this.value == 'Alphabet Grid'){
resetStates();
currState = 2;
}
if(this.value == 'Alphabet Silhouette'){
resetStates();
currState = 4;
}
if(this.value == 'Single Letter Mode'){
resetStates();
currState = 1;
}
if(this.value == 'Write Mode'){
resetStates();
currState = 3;
}
}
// function to create and object of type aLetter
function aLetter(lx,ly,size){
this.x = lx;
this.y = ly;
this.size = size;
this.lArray = [];
this.randSet = false;
this.populateArray = function(){
for(var i = 0; i < 5; i++){
this.lArray[i] = [];
for(var j = 0; j < 4; j++){
this.lArray[i][j] = letterArray[i][j];
}
}
};
this.display = function(){
push();
for(var i = 0; i < 5; i++){
for(var j = 0; j < 5; j++){
if(this.lArray[j][i] == 1){
rect(this.x+(i*1*this.size),this.y+(j*1*this.size),this.size,this.size);
}
}
}
pop();
};
}
var colorBack = [29, 42, 46];
function draw () {
noStroke();
frameRate(60);
//background(colorBack);
stroke(95, 52, 8);
//print(currState);
// Lerping the color of the items
timeC2 = millis();
if(timeC2 - timeC1 > 5){
timerC1 = millis();
if(cDirection == false){
c1--;
c2++;
c3--;
c4++;
cCount--;
if(cCount<0){
cDirection = true;
}
}
if(cDirection){
c1++;
c2--;
c3++;
c4--;
cCount++;
if(cCount>75){
cDirection = false;
}
}
}
// Much more pleasant color schemes
var cFill = [c1,c2,c3,c4];
var cFill2 = [c3,c4,c2,c1];
background(cFill2);
fill(cFill);
activateMode();
}
function activateMode(){
if(currState == 1){
letterHolderSingle.forEach(function(aLetter){
aLetter.display();
});
}
if(currState == 2){
var count = 1;
var j = 1;
for(var i = 0; i <= alphabetDisplay.length-1; i++){
//print(alphabetDisplay[i]);
if(count > 6){
j++;
count = 1;
}
// Displays the alphabet and numbers in a box of 6 X 6
populateLetterArray(alphabetDisplay[i]);
this.letterTemp = new aLetter(pxlSize+(count*(pxlSize*5)), (j*(pxlSize*6)), pxlSize);
this.letterTemp.populateArray();
this.letterTemp.display();
count++;
}
}
if(currState == 3){
rect(pointerX-(2.5*pxlSize),pointerY+(pxlSize*5),pxlSize*4,pxlSize);
letterHolderWord.forEach(function(aLetter){
aLetter.display();
});
}
if(currState == 4){
var count = 1;
var j = 1;
for(var i = 0; i <= alphabetDisplay.length-1; i++){
//print(alphabetDisplay[i]);
if(count > 6){
j++;
count = 1;
}
// Displays the alphabet and numbers in a box of 6 X 6
populateLetterArray(alphabetDisplay[i]);
this.letterTemp = new aLetter(pxlSize+(count*(pxlSize*4)), (j*(pxlSize*5)), pxlSize);
this.letterTemp.populateArray();
this.letterTemp.display();
count++;
}
}
writeInstructions();
}
function resetStates(){
// Resets the Arrays so that when a new drop down box is chosen you start over
letterHolderSingle = [];
letterHolderWord = [];
nextLetter = 0;
nextLine = 0;
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
} else {
if(currState == 1){
upperKey = key.toUpperCase();
letterChangedEvent(upperKey);
var letterTemp = new aLetter(mouseX,mouseY,pxlSize);
letterTemp.populateArray();
append(letterHolderSingle, letterTemp);
}
if(currState == 3){
upperKey = key.toUpperCase();
letterChangedEvent(upperKey);
var letterTemp = new aLetter(startXWord+(nextLetter*(pxlSize*5)),startYWord+(nextLine*(pxlSize*5)),pxlSize);
letterTemp.populateArray();
append(letterHolderWord, letterTemp);
nextLetter++;
pointerX = startXWord + (nextLetter*(pxlSize*5)) - pxlSize;
}
}
}
function keyPressed(){
if(keyCode == UP_ARROW && pxlSize<=100){
pxlSize = pxlSize + 5;
}
if(keyCode == DOWN_ARROW && pxlSize>=10){
pxlSize = pxlSize - 5;
}
if(keyCode == LEFT_ARROW){
strokeWeight(0);
}
if(keyCode == RIGHT_ARROW){
strokeWeight(1);
}
// Some of the logic here is working, but it is beyond the time I have right now
// It works fairly well, but I am sure there is a much more elagent way of doing this!
// Basically I am trying make it so the user can enter multiple lines of text and be able
// to delete. Its in the placing of the letter that I am having issues. Specifically because of that weird 'E' that enter is throwing
// Ive tried removing the last entry, but it does not seem to work
if(keyCode == BACKSPACE && currState == 3){
letterHolderWord = shorten(letterHolderWord);
nextLetter--;
pointerX = pointerX - (pxlSize*5);
if(nextLetter<0){
nextLetter = prevLetter;
nextLine--;
pointerY -= pxlSize*5;
pointerX = startXWord+(pxlSize*4);
}
}
// Pressing return places the x,y on the next line down depending on pxlSize
if(keyCode == RETURN && currState == 3){
nextLine++;
prevLetter = nextLetter-1;
nextLetter = 0;
pointerY += pxlSize*5;
}
}
function mousePressed(){
if(currState == 3){
startXWord = mouseX;
startYWord = mouseY;
pointerX = mouseX;
pointerY = mouseY;
resetStates();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment