<!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> | |
<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script> | |
</head> | |
<body> | |
<script> | |
/* | |
3. use opentype.js for more control | |
reference: https://github.com/opentypejs/opentype.js | |
*/ | |
let font // opentype.js font object | |
let fSize // font size | |
let msg // text to write | |
let pts = [] // store path data | |
let path | |
function setup() { | |
createCanvas(800, 500) | |
opentype.load('../ChunkFive-Regular.otf', function (err, f) { | |
if (err) { | |
alert('Font could not be loaded: ' + err); | |
} else { | |
font = f | |
console.log('font ready') | |
fSize = 256 | |
msg = 'point' | |
let x = 60 | |
let y = 300 | |
path = font.getPath(msg, x, y, fSize) | |
console.log(path.commands) | |
} | |
}) | |
} | |
function draw() { | |
if (!font) return | |
background(0) | |
noFill() | |
stroke(255) | |
for (let cmd of path.commands) { | |
if (cmd.type === 'M') { | |
beginShape() | |
vertex(cmd.x, cmd.y) | |
} else if (cmd.type === 'L') { | |
vertex(cmd.x, cmd.y) | |
} else if (cmd.type === 'C') { | |
bezierVertex(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y) | |
} else if (cmd.type === 'Q') { | |
quadraticVertex(cmd.x1, cmd.y1, cmd.x, cmd.y) | |
} else if (cmd.type === 'Z') { | |
endShape(CLOSE) | |
} | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment