2. individual letters with 2d array
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| /* | |
| 2. individual letters with 2d array | |
| at least, we can separate letters but still have issue with counter shapes. | |
| */ | |
| let font | |
| let fSize // font size | |
| let msg // text to write | |
| let pts = [] // store path data | |
| function preload() { | |
| // preload OTF font file | |
| font = loadFont('../ChunkFive-Regular.otf') | |
| } | |
| function setup() { | |
| createCanvas(800, 500) | |
| fSize = 256 | |
| textFont(font) | |
| textSize(fSize) | |
| msg = 'point' | |
| let x = 0 | |
| let y = 0 | |
| for (let m of msg) { | |
| const arr = font.textToPoints(m, x, y, fSize) | |
| pts.push(arr) | |
| x += textWidth(m) | |
| } | |
| console.log(pts) | |
| stroke(255) | |
| noFill(); | |
| } | |
| function draw() { | |
| background(0) | |
| push() | |
| translate(60, height * 5 / 8) | |
| for (let pt of pts) { | |
| beginShape() | |
| for (let p of pt) { | |
| vertex(p.x, p.y) | |
| } | |
| endShape(CLOSE) | |
| } | |
| pop() | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment