Difference between revisions of "P5js and opentype.js"

From Digipool-Wiki
Jump to: navigation, search
(Path Befehle)
Line 18: Line 18:
 
<br>
 
<br>
  
 +
== 3D Jitter Example ==
  
== Path Befehle ==
+
<br>
 +
 
 +
[https://editor.p5js.org/olafval/sketches/pndaX4Csl LINK]
 +
 
 +
== Befehle ==
  
 
* '''opentype.parse(buffer)'''
 
* '''opentype.parse(buffer)'''

Revision as of 20:02, 20 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.


Basic Example

Opentype-js-p5js.png

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


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