Created
May 24, 2022 20:19
-
-
Save scyclow/4e287a8e7e789a231cb24ee4e98c11b6 to your computer and use it in GitHub Desktop.
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
| // The previous two files should give you an object, `typePoints` | |
| // for this to work, you need to delete the last point of each contour | |
| function drawChar(char, x, y, s, stroke_, fill_) { | |
| push() | |
| translate(x-25*s, y+40*s) | |
| scale(s) | |
| stroke(stroke_) | |
| fill(fill_||stroke_) | |
| let contourOpen = false | |
| beginShape() | |
| typePoints[char].forEach((p, i) => { | |
| if (p[0] === 'M') { | |
| if (contourOpen) endContour() | |
| if (i !== 0) { | |
| beginContour() | |
| contourOpen = true | |
| } | |
| // if (i !== 0) endShape() | |
| // beginShape() | |
| vertex(p[1], p[2]) | |
| } else if (p.length > 2) { | |
| quadraticVertex(p[2], p[3], p[0], p[1]) | |
| } else { | |
| vertex(p[0], p[1]) | |
| } | |
| }) | |
| if (contourOpen) endContour() | |
| endShape() | |
| pop() | |
| } |
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 lang="en"> | |
| <head> | |
| <title>Fake Internet Money</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="HandheldFriendly" content="true"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=Edge"> | |
| <meta id="header-theme" name="theme-color" content="#000000"> | |
| <script src="./min.p5.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script> | |
| <script src="./parseType.js"></script> | |
| </html> |
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
| let fontData, fontString, letterData; | |
| let currentLetterIndex = 0; | |
| // add stuff here to get more geometry in the json output | |
| let letters = "1250$346789IVXLC"; | |
| // change the size to be more/less accurate | |
| // coordinates will be rounded to the nearest int | |
| let boundingBoxSize = 500; | |
| // change or add fonts here | |
| function preload() { | |
| // fontData = loadBytes('RobotoMono.ttf'); | |
| // fontData = loadBytes('Benne.ttf'); | |
| // yay | |
| fontData = loadBytes('ShipporiMinchoB1-Regular.ttf'); | |
| // fontData = loadBytes('EBGaramond-Regular.ttf'); | |
| // fontData = loadBytes('OldStandardTT-Regular.ttf'); | |
| // fontData = loadBytes('STIXTwoMath-Regular.ttf'); | |
| // fontData = loadBytes('Uchen-Regular.ttf'); | |
| // may | |
| // fontData = loadBytes('PlayfairDisplay-Regular.ttf'); | |
| // fontData = loadBytes('NanumMyeongjo-Regular.ttf'); | |
| // fontData = loadBytes('LibreBaskerville-Regular.ttf'); | |
| // nay | |
| // fontData = loadBytes('Tinos-Regular.ttf'); | |
| // fontData = loadBytes('IBMPlexSerif-Regular.ttf'); | |
| } | |
| let font | |
| let points = {} | |
| const mthRnd = n => Math.round(n) | |
| function setup() { | |
| createCanvas(window.innerWidth, window.innerHeight); | |
| // parse the font data with opentype | |
| font = opentype.parse(fontData.bytes.buffer); | |
| const count = {} | |
| for (let letter of letters) { | |
| const path = font.getPath(letter, 0,0, 100); | |
| points[letter] = path.commands.map(cmd => { | |
| count[cmd.type] ? count[cmd.type]++ : count[cmd.type] = 1 | |
| if (cmd.type === 'M') return ['M',mthRnd(cmd.x), mthRnd(cmd.y)] | |
| if (cmd.type === 'Z') return [mthRnd(path.commands[0].x), mthRnd(path.commands[0].y)] | |
| if (cmd.type === 'Q') return [mthRnd(cmd.x), mthRnd(cmd.y), mthRnd(cmd.x1), mthRnd(cmd.y1)] | |
| return [mthRnd(cmd.x), mthRnd(cmd.y)] | |
| }) | |
| } | |
| console.log(JSON.stringify(points)) | |
| } | |
| function draw() { | |
| translate(width/2, height/2) | |
| background(255) | |
| fill(0, 0, 0); | |
| const letter = letters[currentLetterIndex] | |
| const letterPoints = points[letter] | |
| // curveVertex(letterPoints[letterPoints.length-1][0], letterPoints[letterPoints.length-1][1]); | |
| // letterPoints.forEach(p => { | |
| // curveVertex(p[0], p[1]); | |
| // }) | |
| scale(10) | |
| beginShape() | |
| letterPoints.forEach(p => { | |
| p.length > 2 | |
| ? quadraticVertex(p[2], p[3], p[0], p[1]) | |
| : vertex(p[0], p[1]) | |
| }) | |
| endShape() | |
| } | |
| function keyPressed() { | |
| if (keyCode == 39) { // right arrow | |
| currentLetterIndex = (currentLetterIndex + 1) % letters.length; | |
| } else if (keyCode == 37) { // left arrow | |
| currentLetterIndex = (currentLetterIndex + letters.length - 1) % letters.length; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment