erraticgenerator/p5-textToPoints-opentypejs.html

## p5-textToPoints-opentypejs.html
<!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>
	<!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>