Difference between revisions of "P5js and opentype.js"

From Digipool-Wiki
Jump to: navigation, search
(Weitere Beispiele und Tutorials)
Line 36: Line 36:
  
  
* Notes toward fonts as data (with opentype.js and p5.js) by Allison Parrish — [http://comptypo.decontextualize.com/fonts-as-data/ LINK]
+
* '''Notes toward fonts as data''' with opentype.js and p5.js by Allison Parrish — [http://comptypo.decontextualize.com/fonts-as-data/ LINK]
* p5.js textToPoints() function Get the outlines of your fonts with p5.js and opentype.js by erraticGenerator — [https://erraticgenerator.com/blog/p5js-texttopoints-function/ LINK]
+
* '''p5.js textToPoints() function''' Get the outlines of your fonts with p5.js and opentype.js by erraticGenerator — [https://erraticgenerator.com/blog/p5js-texttopoints-function/ LINK]
  
 
<br>
 
<br>

Revision as of 19:21, 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



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