Skip to content

Instantly share code, notes, and snippets.

@erraticgenerator
Created December 6, 2020 19:59
Show Gist options
  • Save erraticgenerator/e20cc8c8806ae89d077ceaf962d913af to your computer and use it in GitHub Desktop.
Save erraticgenerator/e20cc8c8806ae89d077ceaf962d913af to your computer and use it in GitHub Desktop.
<!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