| license: mit |
(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| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.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="interaction.html">interaction</a> | |
| <li><a href="exhibition.html">exhibition</a> | |
| <ul> | |
| </body> |
| /* | |
| * Here are some things you can edit | |
| */ | |
| const colorBack = "#e3eded"; | |
| const colorLines = "#000090"; | |
| /* | |
| * do not edit this rest of this file, instead edit the letter | |
| * drawing code in draw_letters.js | |
| */ | |
| 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(colorBack); | |
| // 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(colorLines); | |
| 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(0, 200, 0); | |
| 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); | |
| } | |
| } |
| const colorFront1 = "#199cff"; | |
| const colorFront2 = "#59ccff"; | |
| const colorStroke = "#233f11"; | |
| /* | |
| * 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(colorStroke); | |
| 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(colorFront1); | |
| ellipse(50, 150, 75, 75); | |
| fill(colorFront2); | |
| 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" | |
| ] |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.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="interaction.html">interaction</a> | |
| <li><a href="exhibition.html">exhibition</a> | |
| <ul> | |
| </body> |
| /* | |
| * Here are some things you can edit | |
| */ | |
| const colorBack = "#e3eded"; | |
| const colorFront = "#199cff"; | |
| const colorLines = "#000090"; | |
| /* | |
| * do not edit this rest of this file, instead edit the letter | |
| * drawing code in draw_letters.js | |
| */ | |
| 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(colorBack); | |
| fill(colorFront); | |
| stroke(95, 52, 8); | |
| // 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; | |
| } | |
| } |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.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="interaction.html">interaction</a> | |
| <li><a href="exhibition.html">exhibition</a> | |
| <ul> | |
| </body> |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.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="interaction.html">interaction</a> | |
| <li><a href="exhibition.html">exhibition</a> | |
| <ul> | |
| </body> |
| /* | |
| * Here are some things you can edit | |
| */ | |
| const colorBack = "#e3eded"; | |
| const colorLines = "#000090"; | |
| /* | |
| * do not edit this rest of this file, instead edit the letter | |
| * drawing code in draw_letters.js | |
| */ | |
| 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(colorBack); | |
| // 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(colorLines); | |
| 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(0, 200, 0); | |
| rect(0, 0, 100, 200); | |
| } | |
| if (interpolation_is_on || (i==0 || i==numSteps-1)) { | |
| drawLetter(curLetterObj); | |
| } | |
| stroke(colorLines); | |
| fill(colorLines); | |
| 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 | |
| } | |
| } |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.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="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 colorFront1 = "#199cff"; | |
| const colorFront2 = "#59ccff"; | |
| const colorBack = "#e3eded"; | |
| const colorStroke = "#233f11"; | |
| function setup () { | |
| // create the drawing canvas, save the canvas element | |
| main_canvas = createCanvas(canvasWidth, canvasHeight); | |
| main_canvas.parent('canvasContainer'); | |
| // color/stroke setup | |
| stroke(colorStroke); | |
| strokeWeight(4); | |
| // with no animation, redrawing the screen is not necessary | |
| noLoop(); | |
| } | |
| 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(colorFront1); | |
| ellipse(posx, posy, 150, 150); | |
| fill(colorFront2); | |
| ellipse(pos2x, pos2y, size2, size2); | |
| } | |
| function draw () { | |
| // clear screen | |
| background(colorBack); | |
| // 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 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); | |
| } |
