Difference between revisions of "P5js and opentype.js"

Latest revision as of 13:48, 21 June 2021

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.

OpenType*js by Frederik De Bleser

• OpenType*js-Homepage
• GitHub

Basic Example

Dieses Beispiel zeigt, wie die Opentype.js Library in P5*JS verwendet werden kann. Die einzelnen Schritte sind mit Kommentaren im Code erklärt.

LINK

Achtung das Beipiel benögit folgende Dateien:

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

3D Jitter Example

LINK

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