P5js and opentype.js

Mit der Opentype.js JavaScript Library ist es möglich einen Font in seine einzelnen Punkte zu zerlegen, was die Grundlage zu kreativen Entfremdungen bietet.

Basic Example

Dieses Beispiel zeigt, wie die Opentype.js Library in P5*JS verwendet werden kann.

LINK

Achtung das Beipiel benögit folgende Dateien:

• opentype.min.js
• p5-patched.min.js
• yourFont.ttf

Path Befehle

• opentype.parse(buffer)
• Glyph.getPath(x, y, fontSize)

• Move To: Erstellt eine neue Kontur. Example: {type: 'M', x: 100, y: 200}
• Line To: Ziehe eine Linie von der letzten Koordinate. Example: {type: 'L', x: 100, y: 200}
• Curve To: Ziehe eine Bézier Kurve von der letzten Koordinate. Example: {type: 'C', x1: 0, y1: 50, x2: 100, y2: 200, x: 100, y: 200}
• Quad To: Ziehe eine quadratic Bézier Kurve von der letzten Koordinate. Example: {type: 'Q', x1: 0, y1: 50, x: 100, y: 200}
• Close: Schließe die Umrisslinie. Example: {type: 'Z'}

Weitere Beispiele und Tutorials

• Notes toward fonts as data (with opentype.js and p5.js) by Allison Parrish — LINK
• p5.js textToPoints() function — Get the outlines of your fonts with p5.js and opentype.js by erraticGenerator — LINK