Created
October 29, 2011 12:37
-
-
Save zeffii/1324398 to your computer and use it in GitHub Desktop.
some typographic approach, reminds me of CNC style G codes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>Stroke Bounds</title> | |
| <link rel="stylesheet" href="../css/style.css"> | |
| <script type="text/javascript" src="../../lib/paper.js"></script> | |
| <script type="text/paperscript" canvas="canvas"> | |
| function setStrokeType(path){ | |
| // takes any given path and applies certain path attributes. | |
| path.strokeWidth = 25; | |
| path.miterLimit = 3; | |
| path.strokeColor = 'black'; | |
| path.strokeCap = 'round'; | |
| path.strokeJoin = 'round'; | |
| return path; | |
| } | |
| function make_letter(letter, left){ | |
| /* | |
| Certain letters require additional strokes, such as t,f and l, thus we | |
| must instantiate a new path. | |
| For example, T has a horizontal stroke in addition to the main stroke. | |
| I has a dot, which also means another path. | |
| Takes input: letter , what letter | |
| Takes input: left, left alignment | |
| */ | |
| letterArray = "IFT"; | |
| var path = new Path(); | |
| if (letter == 'P'){ | |
| path.moveTo(left, 210); | |
| path.lineTo(left, 90); | |
| path.lineTo(left+35, 90); | |
| path.arcTo([left+35,160]); | |
| path.lineTo(left,160); | |
| } | |
| if (letter == 'O'){ | |
| path.moveTo(left, 210); | |
| path.arcTo([left,150]); | |
| path.arcTo([left,210]); | |
| } | |
| if (letter == 'R'){ | |
| path.moveTo(left-30, 210); | |
| path.lineTo(left-30, 180); | |
| var diff = 30 * (( Math.SQRT2) / 2 ); | |
| path.arcTo([left-diff, 180-diff], [left, 150]); | |
| } | |
| if (letter == 'T'){ | |
| path.moveTo(left, 115); | |
| path.lineTo(left, 180); | |
| var diff2 = 30 * (( Math.SQRT2) / 2 ); | |
| path.arcTo([left+(30-diff2), 180+diff2], [left+30, 210]); | |
| } | |
| if (letter == 'F'){ | |
| path.moveTo(left-30, 210); | |
| path.lineTo(left-30, 120); | |
| var diff = 30 * (( Math.SQRT2) / 2 ); | |
| path.arcTo([left-diff, 120-diff], [left, 90]); | |
| path.lineTo(left+20, 90); | |
| } | |
| if (letter == 'L'){ | |
| path.moveTo(left, 210); | |
| path.lineTo(left, 90); | |
| } | |
| if (letter == 'I'){ | |
| path.moveTo(left, 210); | |
| path.lineTo(left, 150); | |
| } | |
| path = setStrokeType(path); | |
| /* | |
| letters with extra stroke/path information. | |
| if I, F, T | |
| */ | |
| if (letterArray.indexOf(letter) != -1){ | |
| var path2 = new Path(); | |
| if (letter == 'I'){ | |
| path2.moveTo(left, 115); | |
| path2.lineTo(left, 116); | |
| } | |
| if (letter == 'F'){ | |
| path2.moveTo(left-45, 150); | |
| path2.lineTo(left, 150); | |
| } | |
| if (letter == 'T'){ | |
| path2.moveTo(left-15, 150); | |
| path2.lineTo(left+30, 150); | |
| } | |
| path2 = setStrokeType(path2); | |
| } | |
| } | |
| tupleArray = new Array(['P',20],['O', 140],['R', 235],['T', 280],['F', 385], | |
| ['O', 438],['L', 502],['I', 538],['O', 602]); | |
| for (i=0; i < tupleArray.length; i++){ | |
| make_letter(tupleArray[i][0],tupleArray[i][1]); | |
| // make_letter(*tupleArray[i]); // not sure how to pack variables in jscript. | |
| } | |
| // with regards to the for loop above, the make_letter function could accept | |
| // objects instead of a predefined number of arguments. | |
| // project.activeLayer.position = view.center; | |
| </script> | |
| </head> | |
| <body> | |
| <canvas id="canvas" resize></canvas> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment