(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 circleoffsetx : x offset of the second circle relative to the first oneoffsety : y offset of the second circle relative to the first one| { | |
| "commits": [ | |
| { | |
| "sha": "0000000000000000000000000000000000000003", | |
| "name": "final" | |
| }, | |
| { | |
| "sha": "0000000000000000000000000000000000000002", | |
| "name": "example 2" | |
| }, | |
| { | |
| "sha": "0000000000000000000000000000000000000001", | |
| "name": "example 1" | |
| } | |
| ] | |
| } |
| <!-- This HTML file displays the alphabet page --> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script> | |
| <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script> | |
| <script language="javascript" type="text/javascript" src="letters.js"></script> | |
| <script language="javascript" type="text/javascript" src="draw_letters.js"></script> | |
| <script language="javascript" type="text/javascript" src="alphabet.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="editor.html">editor</a> | |
| <li><a href="interaction.html">interaction</a> | |
| <li><a href="exhibition.html">exhibition</a> | |
| <ul> | |
| </body> |
| /* | |
| * do not edit this file, instead edit the letter | |
| * drawing code in draw_letters.js | |
| */ | |
| if (typeof systemBackgroundColor === 'undefined') { | |
| var systemBackgroundColor = "#e3eded"; | |
| } | |
| if (typeof systemLineColor === 'undefined') { | |
| var systemLineColor = "#000090"; | |
| } | |
| if (typeof systemBoxColor === 'undefined') { | |
| var systemBoxColor = "#00c800"; | |
| } | |
| const canvasWidth = 960; | |
| const canvasHeight = 500; | |
| // Handy string of all letters available | |
| const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?"; | |
| let debugBox = false; | |
| function setup () { | |
| // create the drawing canvas, save the canvas element | |
| main_canvas = createCanvas(canvasWidth, canvasHeight); | |
| main_canvas.parent('canvasContainer'); | |
| // with no animation, redrawing the screen is not necessary | |
| noLoop(); | |
| } | |
| function mouseClicked() { | |
| debugBox = !debugBox; | |
| // console.log("debugBox is now: " + debugBox); | |
| redraw(); | |
| } | |
| function draw () { | |
| // clear screen | |
| background(systemBackgroundColor); | |
| // 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 | |
| push(); | |
| scale(0.5); | |
| // constants | |
| const left_margin = 40; | |
| const right_margin = 2*width - 40; | |
| const top_margin = 80; | |
| const bottom_margin = 2*height - 60; | |
| const x_step = 140; | |
| const y_step = 280; | |
| const first_letter_offset_x = 20; | |
| let cur_letter_index = 0; | |
| for(let j=top_margin; j<bottom_margin-y_step; j+=y_step) { | |
| push(); | |
| translate(0, j); | |
| // draw lines | |
| stroke(systemLineColor); | |
| line(left_margin, 0, right_margin, 0); | |
| for (let i=left_margin; i<right_margin-8; i+=30) { | |
| line(i, 100, i+12, 100); | |
| } | |
| line(left_margin, 200, right_margin, 200); | |
| translate(left_margin+first_letter_offset_x, 0); | |
| for (let i=left_margin+first_letter_offset_x; i<right_margin-x_step+1; i+=x_step) { | |
| if (cur_letter_index < letters.length) { | |
| if (debugBox) { | |
| noFill() | |
| strokeWeight(4); | |
| stroke(systemBoxColor); | |
| rect(0, 0, 100, 200); | |
| } | |
| let letter = letters[cur_letter_index]; | |
| if (letter in alphabet) { | |
| drawLetter(alphabet[letter]); | |
| } | |
| else { | |
| drawLetter(alphabet["default"]); | |
| } | |
| translate(x_step, 0); | |
| cur_letter_index = (cur_letter_index + 1); | |
| } | |
| } | |
| pop(); | |
| } | |
| } | |
| function keyTyped() { | |
| if (key == '!') { | |
| saveBlocksImages(); | |
| } | |
| else if (key == '@') { | |
| saveBlocksImages(true); | |
| } | |
| } |
| /* these are optional special variables which will change the system */ | |
| var systemBackgroundColor = "#caf0f8"; | |
| var systemLineColor = "#000090"; | |
| var systemBoxColor = "#00c800"; | |
| /* internal constants */ | |
| const darkBlue = "#0077b6"; | |
| const lightBlue = "#90e0ef"; | |
| const strokeColor = "#03045e"; | |
| /* | |
| * Draw the letter given the letterData | |
| * | |
| * Letters should always be drawn with the | |
| * following bounding box guideline: | |
| * from (0,0) to (100, 200) | |
| */ | |
| function drawLetter(letterData) { | |
| // color/stroke setup | |
| stroke(strokeColor); | |
| strokeWeight(4); | |
| // determine parameters for second circle | |
| let size2 = letterData["size"]; | |
| let pos2x = 50 + letterData["offsetx"]; | |
| let pos2y = 150 + letterData["offsety"]; | |
| // draw two circles | |
| fill(darkBlue); | |
| ellipse(50, 150, 75, 75); | |
| fill(lightBlue); | |
| ellipse(pos2x, pos2y, size2, size2); | |
| } | |
| function interpolate_letter(percent, oldObj, newObj) { | |
| let new_letter = {}; | |
| new_letter["size"] = map(percent, 0, 100, oldObj["size"], newObj["size"]); | |
| new_letter["offsetx"] = map(percent, 0, 100, oldObj["offsetx"], newObj["offsetx"]); | |
| new_letter["offsety"] = map(percent, 0, 100, oldObj["offsety"], newObj["offsety"]); | |
| return new_letter; | |
| } | |
| var swapWords = [ | |
| "ABBAABBA", | |
| "CAB?CAB?", | |
| "BAAAAAAA" | |
| ] |
| <!-- This HTML file displays the editor page. This is an optional tool to use --> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script> | |
| <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script> | |
| <script language="javascript" type="text/javascript" src="letters.js"></script> | |
| <script language="javascript" type="text/javascript" src="draw_letters.js"></script> | |
| <script language="javascript" type="text/javascript" src="editor.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="sketch.html">sketch</a> | |
| <li><a href="alphabet.html">alphabet</a> | |
| <li><a href="editor.html">editor</a> | |
| <li><a href="interaction.html">interaction</a> | |
| <li><a href="exhibition.html">exhibition</a> | |
| <ul> | |
| <p> | |
| </div> | |
| <div class="inner" id="controls" height="500px"> | |
| <table class="home"> | |
| <tr id="row1" style="display: none"> | |
| <td>Param1</td> | |
| <td id="slider1Container"></td> | |
| </tr> | |
| <tr id="row2" style="display: none"> | |
| <td>Param2</td> | |
| <td id="slider2Container"></td> | |
| </tr> | |
| <tr id="row3" style="display: none"> | |
| <td>Param3</td> | |
| <td id="slider3Container"></td> | |
| </tr> | |
| <tr id="row4" style="display: none"> | |
| <td>Param4</td> | |
| <td id="slider4Container"></td> | |
| </tr> | |
| <tr id="row5" style="display: none"> | |
| <td>Param5</td> | |
| <td id="slider5Container"></td> | |
| </tr> | |
| <tr id="row6" style="display: none"> | |
| <td>Param6</td> | |
| <td id="slider6Container"></td> | |
| </tr> | |
| <tr id="row7" style="display: none"> | |
| <td>Param7</td> | |
| <td id="slider7Container"></td> | |
| </tr> | |
| <tr id="row8" style="display: none"> | |
| <td>Param8</td> | |
| <td id="slider8Container"></td> | |
| </tr> | |
| <tr id="row9" style="display: none"> | |
| <td>Param9</td> | |
| <td id="slider9Container"></td> | |
| </tr> | |
| <tr id="row10" style="display: none"> | |
| <td>Param10</td> | |
| <td id="slider10Container"></td> | |
| </tr> | |
| <tr id="row11" style="display: none"> | |
| <td>Param11</td> | |
| <td id="slider11Container"></td> | |
| </tr> | |
| <tr id="row12" style="display: none"> | |
| <td>Param12</td> | |
| <td id="slider12Container"></td> | |
| </tr> | |
| <tr id="row13" style="display: none"> | |
| <td>Param13</td> | |
| <td id="slider13Container"></td> | |
| </tr> | |
| <tr id="row14" style="display: none"> | |
| <td>Param14</td> | |
| <td id="slider14Container"></td> | |
| </tr> | |
| <tr id="row15" style="display: none"> | |
| <td>Param15</td> | |
| <td id="slider15Container"></td> | |
| </tr> | |
| <tr id="row16" style="display: none"> | |
| <td>Param16</td> | |
| <td id="slider16Container"></td> | |
| </tr> | |
| <tr id="row17" style="display: none"> | |
| <td>Param17</td> | |
| <td id="slider17Container"></td> | |
| </tr> | |
| <tr id="row18" style="display: none"> | |
| <td>Param18</td> | |
| <td id="slider18Container"></td> | |
| </tr> | |
| <tr id="row19" style="display: none"> | |
| <td>Param19</td> | |
| <td id="slider19Container"></td> | |
| </tr> | |
| <tr id="row20" style="display: none"> | |
| <td>Param20</td> | |
| <td id="slider20Container"></td> | |
| </tr> | |
| <tr id="row21" style="display: none"> | |
| <td>Param21</td> | |
| <td id="slider21Container"></td> | |
| </tr> | |
| <tr id="row22" style="display: none"> | |
| <td>Param22</td> | |
| <td id="slider22Container"></td> | |
| </tr> | |
| <tr id="row23" style="display: none"> | |
| <td>Param23</td> | |
| <td id="slider23Container"></td> | |
| </tr> | |
| <tr id="row24" style="display: none"> | |
| <td>Param24</td> | |
| <td id="slider24Container"></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <hr> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td id="buttonContainer"></td> | |
| <p>Press the "d" key to see the bounding box</p> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| </body> |
| /******* | |
| * define this "sliderInfo" variable | |
| * have an entry for each slider you want | |
| * and each row should be: | |
| * ["object_field", minimum_bound, maximum_bound] | |
| */ | |
| const sliderInfo = [ | |
| ["size", 0, 100], | |
| ["offsetx", -30, 30], | |
| ["offsety", -100, 100] | |
| ]; | |
| // PROBABLY DON'T NEED TO EDIT ANYTHING ELSE. STOP HERE. | |
| const numSliders = sliderInfo.length; | |
| if (typeof systemBackgroundColor === 'undefined') { | |
| var systemBackgroundColor = "#e3eded"; | |
| } | |
| // this will use variables if they are already defined | |
| // var systemBackgroundColor = systemBackgroundColor || "#e3eded"; | |
| // if everything is defined above, this should just work | |
| function sliderToDataObject() { | |
| let obj = {}; | |
| for (let i=0; i<numSliders; i=i+1) { | |
| o_name = sliderInfo[i][0] | |
| bounds_low = sliderInfo[i][1] | |
| bounds_high = sliderInfo[i][2] | |
| obj[o_name] = map(param_sliders[i].value(), 0, 100, bounds_low, bounds_high); | |
| } | |
| return obj; | |
| } | |
| let param_sliders = []; | |
| let main_canvas = null; | |
| const canvasWidth = 960; | |
| const canvasHeight = 500; | |
| let debugBox = false; | |
| function setup () { | |
| // create the drawing canvas, save the canvas element | |
| main_canvas = createCanvas(canvasWidth, canvasHeight); | |
| main_canvas.parent('canvasContainer'); | |
| // rotation in degrees (more slider friendly) | |
| angleMode(DEGREES); | |
| for(let i=0; i<numSliders; i++) { | |
| let cur_row = select("#row" + (i+1)) | |
| cur_row.show(); | |
| let cur_slider = createSlider(0, 100, 50) | |
| let containerString = "slider" + (i+1) + "Container" | |
| cur_slider.parent(containerString); | |
| param_sliders.push(cur_slider); | |
| } | |
| button = createButton('show data'); | |
| button.mousePressed(buttonPressedEvent); | |
| button.parent(buttonContainer); | |
| } | |
| function buttonPressedEvent() { | |
| let obj = sliderToDataObject(); | |
| json = JSON.stringify(obj, null, 2); | |
| alert(json); | |
| } | |
| function draw () { | |
| // clear screen | |
| background(systemBackgroundColor); | |
| // 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 | |
| push(); | |
| scale(2); | |
| translate(width/4 - 50, 25); | |
| if (debugBox) { | |
| noFill() | |
| strokeWeight(4); | |
| stroke(0, 200, 0); | |
| rect(0, 0, 100, 200); | |
| } | |
| let obj = sliderToDataObject(); | |
| drawLetter(obj); | |
| pop(); | |
| } | |
| function keyTyped() { | |
| if (key == '!') { | |
| saveBlocksImages(); | |
| } | |
| else if (key == '@') { | |
| saveBlocksImages(true); | |
| } | |
| else if (key == 'd') { | |
| debugBox = !debugBox; | |
| // console.log("debugBox is now: " + debugBox); | |
| redraw(); | |
| } | |
| else if (key == ' ') { | |
| let obj = sliderToDataObject(); | |
| json = JSON.stringify(obj, null, 2); | |
| console.log(json); | |
| } | |
| } |
| <!-- This HTML file displays the exhibition page --> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script> | |
| <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script> | |
| <script language="javascript" type="text/javascript" src="letters.js"></script> | |
| <script language="javascript" type="text/javascript" src="draw_letters.js"></script> | |
| <script language="javascript" type="text/javascript" src="exhibition.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="editor.html">editor</a> | |
| <li><a href="interaction.html">interaction</a> | |
| <li><a href="exhibition.html">exhibition</a> | |
| <ul> | |
| </body> |
| /* | |
| * do not edit this file, instead edit the letter | |
| * drawing code in draw_letters.js | |
| */ | |
| if (typeof systemBackgroundColor === 'undefined') { | |
| var systemBackgroundColor = "#e3eded"; | |
| } | |
| const canvasWidth = 960; | |
| const canvasHeight = 500; | |
| // these variables are used for animation | |
| let soloCurLetter = "B"; | |
| let soloLastLetter = "A" | |
| let soloPrevObj = alphabet["default"]; | |
| let soloIsAnimating = false; | |
| let soloNumAnimationFrames = 30; | |
| let soloCurAnimationFrame = 0; | |
| // Handy string of all letters available | |
| const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?"; | |
| let chosenLetters = []; | |
| let chosenPrevObjs = [null, null, null, null, null, null, null, null]; | |
| let chosenIsAnimating = [false, false, false, false, false, false, false, false]; | |
| let chosenNumAnimationFrames = 30; | |
| let chosenCurAnimationFrame = [0, 0, 0, 0, 0, 0, 0, 0]; | |
| let curChosenLetter = 0; | |
| let lastKeyPressedTime; | |
| let secondsUntilSwapMode = 15; | |
| let lastWordSwappedTime; | |
| let isSwappingWords = true; | |
| let secondsPerWord = 8; | |
| let curSwapWord = 0; | |
| var defaultSwapWords = [ | |
| "ACTUALLY", | |
| "1234567?", | |
| "EXPECTED", | |
| "PROPERTY", | |
| "ADDITION", | |
| "FOLLOWED", | |
| "PROVIDED", | |
| "ALTHOUGH", | |
| "HAPPENED", | |
| "QUESTION", | |
| "AMERICAN", | |
| "INCREASE", | |
| "RECEIVED", | |
| "ANYTHING", | |
| "INDUSTRY", | |
| "RELIGION", | |
| "BUILDING", | |
| "INTEREST", | |
| "REMEMBER", | |
| "BUSINESS", | |
| "INVOLVED", | |
| "REQUIRED", | |
| "CHILDREN", | |
| "NATIONAL", | |
| "SERVICES", | |
| "COMPLETE", | |
| "ORGANIZE", | |
| "SOUTHERN", | |
| "CONSIDER", | |
| "PERSONAL", | |
| "STANDARD", | |
| "CONTINUE", | |
| "PLANNING", | |
| "STRENGTH", | |
| "ALPHABET", | |
| "POSITION", | |
| "STUDENTS", | |
| "DECISION", | |
| "POSSIBLE", | |
| "SUDDENLY", | |
| "DIRECTLY", | |
| "PRESSURE", | |
| "THINKING", | |
| "DISTRICT", | |
| "PROBABLY", | |
| "TOGETHER", | |
| "ECONOMIC", | |
| "PROBLEMS", | |
| "TRAINING", | |
| "EVIDENCE", | |
| "PROGRAMS" | |
| ] | |
| const interpolation_is_on = (typeof interpolate_letter === "function") | |
| function setup () { | |
| // create the drawing canvas, save the canvas element | |
| main_canvas = createCanvas(canvasWidth, canvasHeight); | |
| main_canvas.parent('canvasContainer'); | |
| let now = millis(); | |
| lastKeyPressedTime = now; | |
| lastWordSwappedTime = now; | |
| if (typeof swapWords === 'undefined') { | |
| // the variable is defined | |
| swapWords = []; | |
| } | |
| swapWords = swapWords.concat(defaultSwapWords); | |
| chosenLetters = []; | |
| let first_word = swapWords[0]; | |
| for(let i=0; i<first_word.length; i++) { | |
| chosenLetters.push(first_word[i]); | |
| } | |
| } | |
| function getCharacterInterpolationObj(percent, oldObj, newObj) { | |
| if (interpolation_is_on) { | |
| // safe to use the function | |
| obj = interpolate_letter(percent, oldObj, newObj) | |
| } | |
| else { | |
| if(percent == 0) { | |
| obj = oldObj; | |
| } | |
| else { | |
| obj = newObj; | |
| } | |
| } | |
| return obj; | |
| } | |
| function getObjFromChar(c) { | |
| if (c in alphabet) { | |
| return alphabet[c]; | |
| } | |
| else { | |
| return alphabet["default"]; | |
| } | |
| } | |
| function getCharacterInterpolation(percent, oldChar, newChar) { | |
| let oldObj = getObjFromChar(oldChar); | |
| let newObj = getObjFromChar(newChar); | |
| return getCharacterInterpolationObj(percent, oldObj, newObj); | |
| } | |
| function computeCurrentSoloChar() { | |
| // now figure out what object to draw | |
| let obj; | |
| if (soloIsAnimating) { | |
| nextObj = getObjFromChar(soloCurLetter); | |
| progress = map(soloCurAnimationFrame, 0, soloNumAnimationFrames, 0, 100); | |
| obj = getCharacterInterpolationObj(progress, soloPrevObj, nextObj) | |
| } | |
| else { | |
| obj = getObjFromChar(soloCurLetter); | |
| } | |
| return obj; | |
| } | |
| // draws a single character given an object, position, and scale | |
| function drawFromDataObject(x, y, s, obj) { | |
| push(); | |
| translate(x, y); | |
| scale(s, s); | |
| drawLetter(obj); | |
| pop(); | |
| } | |
| function computeCurrentChosenChar(n) { | |
| // now figure out what object to draw | |
| var obj; | |
| if (chosenIsAnimating[n]) { | |
| if(chosenCurAnimationFrame[n] < 0) { | |
| obj = chosenPrevObjs[n]; | |
| } | |
| else { | |
| nextObj = getObjFromChar(chosenLetters[n]); | |
| if (interpolation_is_on) { | |
| // safe to use the function | |
| let percent = map(chosenCurAnimationFrame[n], 0, chosenNumAnimationFrames, 0, 100) | |
| // obj["box1"]["position"] = map(chosenCurAnimationFrame[n], 0, chosenNumAnimationFrames, chosenPrevObjs[n]["box1"]["position"], nextObj["box1"]["position"]) | |
| obj = interpolate_letter(percent, chosenPrevObjs[n], nextObj) | |
| } | |
| else { | |
| obj = nextObj; | |
| } | |
| } | |
| } | |
| else { | |
| obj = getObjFromChar(chosenLetters[n]); | |
| } | |
| return obj; | |
| } | |
| function draw () { | |
| now = millis(); | |
| // check to see if we should go into swapping mode | |
| if(!isSwappingWords && lastKeyPressedTime + 1000 * secondsUntilSwapMode < now) { | |
| isSwappingWords = true; | |
| } | |
| if(isSwappingWords) { | |
| if(lastWordSwappedTime + 1000 * secondsPerWord < now) { | |
| lastWordSwappedTime = now; | |
| curSwapWord = (curSwapWord + 1) % swapWords.length; | |
| for(var i=0; i<8; i++) { | |
| var c = swapWords[curSwapWord][i]; | |
| swapExhibitLetter(i, c, 6*i); | |
| } | |
| } | |
| } | |
| background(systemBackgroundColor); | |
| // shorthand variables to allow margin | |
| var o = 20 | |
| var w2 = width - 2 * o | |
| var h2 = height - 2 * o | |
| for(var i=0; i<8; i++) { | |
| // see if animation should be turned off | |
| if(chosenIsAnimating[i] && chosenCurAnimationFrame[i] >= chosenNumAnimationFrames) { | |
| chosenIsAnimating[i] = false; | |
| } | |
| // if we are animating, increment the number of animation frames | |
| if(chosenIsAnimating[i]) { | |
| chosenCurAnimationFrame[i] = chosenCurAnimationFrame[i] + 1; | |
| } | |
| var obj = computeCurrentChosenChar(i); | |
| drawFromDataObject(o + i*w2/8.0, o + h2/2.0 - 120, 1.0, obj) | |
| } | |
| } | |
| function swapExhibitLetter(n, c, frameDelay) { | |
| chosenPrevObjs[n] = computeCurrentChosenChar(n); | |
| chosenLetters[n] = c; | |
| chosenIsAnimating[n] = true; | |
| chosenCurAnimationFrame[n] = 0 - frameDelay; | |
| } | |
| function keyTyped() { | |
| if (key == '!') { | |
| saveBlocksImages(); | |
| } | |
| else if (key == '@') { | |
| saveBlocksImages(true); | |
| } | |
| else { | |
| lastKeyPressedTime = millis(); | |
| if(isSwappingWords) { | |
| isSwappingWords = false; | |
| } | |
| upper_key = key.toUpperCase(); | |
| swapExhibitLetter(curChosenLetter, upper_key, 0); | |
| curChosenLetter = (curChosenLetter + 1) % 8; | |
| } | |
| } |
| File descriptions | |
| -sketch.js | |
| This is where you do your first experiment! A simple drawing of ABC using a single drawLetter() function. This file is only connected to sketch.html | |
| -draw_letters.js | |
| This is where you will do most of your coding for this project. This is where you will use the data from letters.js to inform how your letters will look. | |
| -letters.js | |
| This is the file that will hold the data that draws your letters. This is a javascript file that just holds information in a way that is similar to .json files. This file does not have any functions that you can call, it only holds information. | |
| -editor.js | |
| OPTIONAL | |
| We will go over this in class. If you set up this file correctly you can use it to help generate data for your letters.js file. | |
| - alphabet.js | |
| You should not need to touch it. | |
| - exhibition.js | |
| You should not need to touch it. | |
| - interaction.js | |
| You should not need to touch it. | |
| -html's | |
| Generally, the html pages will display their corresponding .js file. Their purpose within the brief will be discussed in class |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.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="editor.html">editor</a> | |
| <li><a href="interaction.html">interaction</a> | |
| <li><a href="exhibition.html">exhibition</a> | |
| <ul> | |
| </body> |
| <!-- This HTML file displays the "interaction" page --> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script> | |
| <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script> | |
| <script language="javascript" type="text/javascript" src="letters.js"></script> | |
| <script language="javascript" type="text/javascript" src="draw_letters.js"></script> | |
| <script language="javascript" type="text/javascript" src="interaction.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="editor.html">editor</a> | |
| <li><a href="interaction.html">interaction</a> | |
| <li><a href="exhibition.html">exhibition</a> | |
| <ul> | |
| </body> |
| /* | |
| * do not edit this file, instead edit the letter | |
| * drawing code in draw_letters.js | |
| */ | |
| if (typeof systemBackgroundColor === 'undefined') { | |
| var systemBackgroundColor = "#e3eded"; | |
| } | |
| if (typeof systemLineColor === 'undefined') { | |
| var systemLineColor = "#000090"; | |
| } | |
| if (typeof systemBoxColor === 'undefined') { | |
| var systemBoxColor = "#00c800"; | |
| } | |
| const canvasWidth = 960; | |
| const canvasHeight = 500; | |
| // these variables are used for animation | |
| let soloCurLetter = "B"; | |
| let soloLastLetter = "A" | |
| let soloPrevObj = alphabet["default"]; | |
| let soloIsAnimating = false; | |
| let soloNumAnimationFrames = 30; | |
| let soloCurAnimationFrame = 0; | |
| let debugBox = false; | |
| // Handy string of all letters available | |
| const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?"; | |
| function setup () { | |
| // create the drawing canvas, save the canvas element | |
| main_canvas = createCanvas(canvasWidth, canvasHeight); | |
| main_canvas.parent('canvasContainer'); | |
| // with no animation, redrawing the screen is not necessary | |
| // noLoop(); | |
| } | |
| function mouseClicked() { | |
| debugBox = !debugBox; | |
| // console.log("debugBox is now: " + debugBox); | |
| redraw(); | |
| } | |
| const interpolation_is_on = (typeof interpolate_letter === "function") | |
| function getCharacterInterpolationObj(percent, oldObj, newObj) { | |
| if (interpolation_is_on) { | |
| // safe to use the function | |
| obj = interpolate_letter(percent, oldObj, newObj) | |
| } | |
| else { | |
| if(percent == 0) { | |
| obj = oldObj; | |
| } | |
| else { | |
| obj = newObj; | |
| } | |
| } | |
| return obj; | |
| } | |
| function getObjFromChar(c) { | |
| if (c in alphabet) { | |
| return alphabet[c]; | |
| } | |
| else { | |
| return alphabet["default"]; | |
| } | |
| } | |
| function getCharacterInterpolation(percent, oldChar, newChar) { | |
| let oldObj = getObjFromChar(oldChar); | |
| let newObj = getObjFromChar(newChar); | |
| return getCharacterInterpolationObj(percent, oldObj, newObj); | |
| } | |
| function computeCurrentSoloChar() { | |
| // now figure out what object to draw | |
| var obj; | |
| if (soloIsAnimating) { | |
| nextObj = getObjFromChar(soloCurLetter); | |
| progress = map(soloCurAnimationFrame, 0, soloNumAnimationFrames, 0, 100); | |
| obj = getCharacterInterpolationObj(progress, soloPrevObj, nextObj) | |
| } | |
| else { | |
| obj = getObjFromChar(soloCurLetter); | |
| } | |
| return obj; | |
| } | |
| let hot_key_press = false; | |
| function draw () { | |
| // clear screen | |
| background(systemBackgroundColor); | |
| // draw the interpolation on the guidelines | |
| push(); | |
| scale(0.5); | |
| // constants | |
| const left_margin = 40; | |
| const right_margin = 2*width - 40; | |
| const top_margin = 80; | |
| const bottom_margin = 2*height - 60; | |
| const numSteps = 11; | |
| const x_step = (right_margin - left_margin + 100) / (numSteps + 1) | |
| const first_letter_offset_x = 20; | |
| translate(0, top_margin); | |
| // draw lines | |
| stroke(systemLineColor); | |
| line(left_margin, 0, right_margin, 0); | |
| for(let i=left_margin; i<right_margin-8; i+=30) { | |
| line(i, 100, i+12, 100); | |
| } | |
| line(left_margin, 200, right_margin, 200); | |
| translate(left_margin+first_letter_offset_x, 0); | |
| for(let i=0; i<numSteps; i = i+1) { | |
| let percent = map(i, 0, numSteps, 0, 100); | |
| let curLetterObj = getCharacterInterpolation(percent, soloLastLetter, soloCurLetter); | |
| // print(curLetterObj, soloLastLetter, soloCurLetter); | |
| if (debugBox) { | |
| noFill() | |
| strokeWeight(4); | |
| stroke(systemBoxColor); | |
| rect(0, 0, 100, 200); | |
| } | |
| if (interpolation_is_on || (i==0 || i==numSteps-1)) { | |
| drawLetter(curLetterObj); | |
| } | |
| stroke(systemLineColor); | |
| fill(systemLineColor); | |
| textSize(50); | |
| textAlign(CENTER) | |
| if (i == 0) { | |
| text(soloLastLetter, 50, 280); | |
| } | |
| else if (i == (numSteps -1)) { | |
| if (hot_key_press) { | |
| rect(50-40, 280-40, 80, 80); | |
| hot_key_press = false; | |
| } | |
| text(soloCurLetter, 50, 280); | |
| } | |
| else if (interpolation_is_on) { | |
| text("" + i*10 + "%", 50, 280); | |
| } | |
| translate(x_step, 0); | |
| } | |
| pop(); | |
| // now draw the letter full size below | |
| // compute the center of the canvas | |
| let center_x = canvasWidth / 2; | |
| let center_y = canvasHeight / 2; | |
| // see if animation should be turned off | |
| if(soloIsAnimating && soloCurAnimationFrame >= soloNumAnimationFrames) { | |
| soloIsAnimating = false; | |
| } | |
| // if we are animating, increment the number of animation frames | |
| if(soloIsAnimating) { | |
| soloCurAnimationFrame = soloCurAnimationFrame + 1; | |
| } | |
| push(); | |
| translate(center_x, center_y); | |
| let cur_obj = computeCurrentSoloChar(); | |
| drawLetter(cur_obj); | |
| pop(); | |
| } | |
| function keyTyped() { | |
| if (key == '!') { | |
| saveBlocksImages(); | |
| } | |
| else if (key == '@') { | |
| saveBlocksImages(true); | |
| } | |
| else { | |
| lastKeyPressedTime = millis(); | |
| let upper_key = key.toUpperCase(); | |
| hot_key_press = true; | |
| soloPrevObj = computeCurrentSoloChar(); | |
| soloLastLetter = soloCurLetter; | |
| soloCurLetter = upper_key; | |
| soloIsAnimating = true; | |
| soloCurAnimationFrame = 0; | |
| } | |
| } |
| const alphabet = { | |
| "default": { | |
| "size": 40, | |
| "offsetx": 0, | |
| "offsety": 0 | |
| }, | |
| "A": { | |
| "size": 40, | |
| "offsetx": 0, | |
| "offsety": 17 | |
| }, | |
| "B": { | |
| "size": 75, | |
| "offsetx": 0, | |
| "offsety": -70 | |
| }, | |
| "C": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "D": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "E": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "F": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "G": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "H": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "I": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "J": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "K": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "L": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "M": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "N": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "O": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "P": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "Q": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "R": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "S": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "T": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "U": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "V": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "W": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "X": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "Y": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "Z": { | |
| "size": 50, | |
| "offsetx": 15, | |
| "offsety": 0 | |
| }, | |
| "0": { | |
| "size": 40, | |
| "offsetx": 0, | |
| "offsety": 17 | |
| }, | |
| "1": { | |
| "size": 40, | |
| "offsetx": 0, | |
| "offsety": 17 | |
| }, | |
| "2": { | |
| "size": 40, | |
| "offsetx": 0, | |
| "offsety": 17 | |
| }, | |
| "3": { | |
| "size": 40, | |
| "offsetx": 0, | |
| "offsety": 17 | |
| }, | |
| "4": { | |
| "size": 40, | |
| "offsetx": 0, | |
| "offsety": 17 | |
| }, | |
| "5": { | |
| "size": 40, | |
| "offsetx": 0, | |
| "offsety": 17 | |
| }, | |
| "6": { | |
| "size": 40, | |
| "offsetx": 0, | |
| "offsety": 17 | |
| }, | |
| "7": { | |
| "size": 40, | |
| "offsetx": 0, | |
| "offsety": 17 | |
| }, | |
| "8": { | |
| "size": 40, | |
| "offsetx": 0, | |
| "offsety": 17 | |
| }, | |
| "9": { | |
| "size": 40, | |
| "offsetx": 0, | |
| "offsety": 17 | |
| } | |
| } |
| <!-- This HTML file displays the ABC sketch page --> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.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="editor.html">editor</a> | |
| <li><a href="interaction.html">interaction</a> | |
| <li><a href="exhibition.html">exhibition</a> | |
| <ul> | |
| </body> |
| 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 backgroundColor = "#caf0f8"; | |
| const strokeColor = "#03045e"; | |
| const darkBlue = "#0077b6"; | |
| const lightBlue = "#90e0ef"; | |
| function setup () { | |
| // create the drawing canvas, save the canvas element | |
| main_canvas = createCanvas(canvasWidth, canvasHeight); | |
| main_canvas.parent('canvasContainer'); | |
| // color/stroke setup | |
| stroke(strokeColor); | |
| strokeWeight(4); | |
| // with no animation, redrawing the screen is not necessary | |
| noLoop(); | |
| } | |
| function draw () { | |
| // clear screen | |
| background(backgroundColor); | |
| // 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, letterA); | |
| drawLetter(center_x , center_y, letterB); | |
| drawLetter(center_x + 250, center_y, letterC); | |
| } | |
| function drawLetter(posx, posy, letterData) { | |
| // determine parameters for second circle | |
| let size2 = letterData["size"]; | |
| let pos2x = posx + letterData["offsetx"]; | |
| let pos2y = posy + letterData["offsety"]; | |
| // draw two circles | |
| fill(darkBlue); | |
| ellipse(posx, posy, 150, 150); | |
| fill(lightBlue); | |
| ellipse(pos2x, pos2y, size2, size2); | |
| } | |
| 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); | |
| } |
