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