erraticgenerator/p5-textToPoints-2.html

## p5-textToPoints-2.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>
</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>
	<!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>