Die Technik, meine Handschrift zu codieren

• Ausgehend von einem JavaScript-Generator für Blockbuchstaben wurde innerhalb von zwei Monaten sogar kursiv geschriebene Handschrift in Code umgesetzt
• Die Buchstaben werden mit dem Tool p5js über Schlüsselkoordinaten gesetzt, mit Chaikin-Kurven geglättet und dann in Pfade mit variabler Strichstärke umgewandelt
• Bei Schreibschrift unterscheidet sich die Verbindung je nach Buchstabenpaar, daher werden an Anfang und Ende der Pfade Tags von 0 bis 3 gesetzt, um nicht verbindbar, Grundlinie, über der Grundlinie und in der Nähe der x-Höhe zu unterscheiden
• Beim Bilden von Wörtern wird pro Buchstabe einer von 2 bis 3 Pfaden gewählt, dann werden je nach Verbindungshöhe der Nachbarbuchstaben Punkte hinzugefügt, entfernt oder ersetzt und anschließend mit Perlin noise leichtes Zittern ergänzt
• Nach der Minifizierung ist die Schreibschrift-Buchstabenklasse 26.1kb groß und damit größer als die 9.7kb der Blockbuchstaben; Ursache sind mehrere Pfade und Korrekturfunktionen für benachbarte Buchstaben

---

Von der Erzeugung von Blockbuchstaben zur Erweiterung auf Schreibschrift

• Der frühere Generator für Blockbuchstaben definierte die Schlüsselpunkte jedes Buchstabenpfads direkt im Code
  • Pro Buchstabe wurden etwa 10 Punkte platziert
  • Der Chaikin-Kurvenalgorithmus glättete den Pfad
  • Der Pfad wurde in eine Form mit entlang der Länge variierender Strichstärke umgewandelt
  • p5js zeichnete die endgültige Form
• Bei Blockbuchstaben mussten die Koordinaten direkt in den Code geschrieben und die Punkte manuell angepasst werden, bis der Buchstabe natürlich wirkte
• Um diese Wiederholungsarbeit bei der Umsetzung von Schreibschrift zu verringern, wurde ein eigenes Werkzeug zum Entwerfen von Buchstaben gebaut

Ein Tool zum Entwerfen von Buchstabenpfaden in p5js

• Im p5js-Editor wurde ein Tool zum Definieren und Ausgeben von Schlüsselpunkten erstellt und verwendet
• Das Tool zeigt Beispielbuchstaben für Maßstab und Kontext sowie einen Bereich zum Entwerfen neuer Buchstaben
  • Werden per Klick Schlüsselpunkte des Pfads gesetzt, wird das mit Chaikin-Kurven bearbeitete Ergebnis angezeigt
  • Mit der Taste p wird in den Bearbeitungsmodus gewechselt
  • Nach Auswahl eines Punkts kann seine Position per Drag-and-drop angepasst werden
  • Mit der enter-Taste wird der Pfad in der Konsole ausgegeben
• Für jeden Buchstaben wurden 2 bis 3 Optionen erstellt; die resultierenden Pfade liegen als Arrays von {x, y}-Koordinaten vor
• Um die eigene Handschrift als Grundlage zu nehmen, wurden Beispiele für Klein- und Großbuchstaben von Hand geschrieben, das Bild in das Buchstaben-Tool geladen und nachgezeichnet
  • Mit w/a/s/d wird das Bild verschoben
  • Mit r/e wird das Bild vergrößert oder verkleinert
  • Die auf das Papier geschriebenen Zahlen sind x/y-Koordinaten, um den Bereich passend im Buchstabenfenster auszurichten

Das Verbindungsproblem bei Schreibschrift und die Tags 0 bis 3

• Bei manchen Buchstabenpaaren reicht es aus, den Schlüsselpunktepfad eines Buchstabens mit dem des nächsten zu verbinden und Chaikin-Kurven einmal auf das Ganze anzuwenden, damit der Übergang natürlich aussieht
• Bei einigen Kombinationen zerstört die Verbindungslinie jedoch die Buchstabenform
  • Bei na liegt der letzte Punkt von n tief und der erste Punkt von a hoch, sodass die Verbindungslinie diagonal durch das a läuft und es wie ein e wirken lassen kann
  • Bei ti endet t knapp über der Grundlinie und i beginnt auf der Grundlinie, wodurch ein unnatürlicher Grat entsteht
• Statt Regeln für jedes einzelne Buchstabenpaar zu schreiben, wird an Anfang und Ende jedes Pfads eine numerische Information zur Verbindungshöhe angehängt
  • 0: Kann nicht mit einem anderen Buchstaben verbunden werden
  • 1: Verbindung mit anderen Buchstaben nahe der Grundlinie
  • 2: Verbindung mit anderen Buchstaben direkt über der Grundlinie
  • 3: Verbindung mit anderen Buchstaben in der Nähe der x-Höhe
• Selbst beim gleichen Buchstaben unterscheidet sich das Hinzufügen oder Entfernen von Punkten je nach Wortanfang und benachbarten Buchstaben
  • Wenn a am Wortanfang steht, wirkt ein zusätzlicher Punkt unnatürlich
  • Bei a nach w kann die Linie auf andere Weise quer durch das a laufen
  • Wenn t an k anschließt, kann sich die Form verändern
• Alle Buchstabenpaare wurden getestet; mit mehreren Pfadoptionen und buchstabenspezifischen Bearbeitungen je nach Nachbarbuchstaben wurde Variabilität erzeugt
• Ideal wären 5 bis 6 Pfadoptionen pro Buchstabe, doch das muss gegen die Dateigröße abgewogen werden

Ablauf der Worterzeugung

• Beim Erzeugen eines Worts wird zunächst für jedes Zeichen einer von 2 bis 3 Grundpfaden gewählt
• Die Verbindungsinformationen von Anfang und Ende des gewählten Pfads werden an benachbarte Buchstaben weitergegeben
  • Selbst beim gleichen Buchstaben kann sich die Endpunktinformation je nach gewählter Pfadoption unterscheiden, daher müssen zuerst alle Buchstabenpfade ausgewählt werden
• Danach werden die Grundpfade an die Nachbarbuchstaben angepasst
  • Wenn die Endhöhe des vorherigen Buchstabens 2 ist, kann ein Startpunkt des aktuellen Pfads entfernt werden
  • Wenn die Starthöhe des nächsten Buchstabens 1 ist, kann an einer bestimmten Stelle ein Punkt hinzugefügt werden
• Die Anpassungsfunktionen arbeiten je nach Buchstabe unterschiedlich
  • Die Anpassungsfunktion von q fügt mit 70% Wahrscheinlichkeit am Ende einen Bruch ein und ersetzt oder ergänzt Punkte abhängig von der Endinformation des vorherigen Buchstabens oder der Startinformation des nächsten
  • Die Anpassungsfunktion von n erzeugt mit 30% Wahrscheinlichkeit einen Bruch oder verschiebt den letzten Punkt, wenn der nächste Buchstabe bei 3 beginnt
• Beim Zusammenfügen aller Grundpfade der Buchstaben werden 1, 2 und 3 ignoriert; tritt 0 auf, beginnt ein neuer Pfad und es entsteht ein Bruch
• Auf den zusammengefügten Pfad werden Chaikin-Kurven angewendet, er wird in eine Form mit variabler Strichstärke umgewandelt und mit Perlin noise leichtes Zittern ergänzt

Größe und Einsatzweise

• Die Buchstabenklasse für Blockbuchstaben war 9.7kb groß, die minifizierte Schreibschrift-Buchstabenklasse derzeit 26.1kb
• Dass die Schreibschrift größer ist, liegt an mehreren Pfaden pro Buchstabe und an Funktionen, die Punkte an benachbarte Buchstaben anpassen
• Es gibt noch weitere Ideen zur Reduzierung
  • Derzeit werden die Buchstaben auf Basis einer Standardschriftgröße von 20 entworfen und dann skaliert
  • Deshalb gibt es viele Koordinaten wie x: 14.5
  • Würde die Grundgröße auf 200 geändert, ließen sich Dezimalstellen wie bei 145 vermeiden und pro Buchstabe Platz sparen
  • Diese Änderung muss sorgfältig erfolgen und steht deshalb auf der Liste für später
• Der Hauptzweck dieser Handschrift sind Titel, Labels und gekritzelte Notizen in einem in Arbeit befindlichen Diagramm
• Durch die Verwendung codierter Pfade statt einer Schriftart lassen sich Pfade manipulieren, etwa indem die Position der Buchstaben oder die Strichstärke innerhalb einzelner Buchstaben direkt verändert wird
• Es gibt auch einen Meaningful Nonsense-Print, der eine weiterentwickelte Version dieses Handschrift-Codes nutzt; jeder Print ist ein individuelles Ergebnis, das bei der Bestellung erzeugt wird

[GN⁺]

Hacker-News-Kommentare

• Wenn man meine Handschrift kodiert, könnte man das wohl als Einweg-Hash betrachten
  Wenn ich es später wieder lese, gibt es keinerlei Möglichkeit zu entschlüsseln, was ich überhaupt schreiben wollte

  • Klingt nach einer Herausforderung! https://www.handwritingocr.com :)
  • Deshalb musste ich an der Uni meine Schreibschrift absichtlich aufgeben
  • Bei mir genauso, und schon nach ein paar Stunden ist selbst für mich keine Entschlüsselung mehr möglich

• Das YouTube-Video von Stuff Made Here zu einem ähnlichen Thema ist ziemlich cool: https://www.youtube.com/watch?v=cQO2XTP7QDw
  Es erklärt auch den Trial-and-Error-Prozess, was beim Zuschauen Spaß macht, und das Repository zur Handschrift-Synthese ist ebenfalls interessant: https://github.com/sjvasquez/handwriting-synthesis

• Das Artwork am Ende ist ziemlich schön
  Ich frage mich, ob der nächste Schritt wäre, daraus eine echte Schriftart zu machen, sodass man sie in jedem Programm eingeben kann

  • Schriftarten für Plotter gibt es auch schon
    Anders als bei Schriftarten, an die wir normalerweise denken, müssen sie kein Umriss zum Ausfüllen sein, sondern ein Pfad zum Nachzeichnen
  • Wenn die Kurven bereits vorhanden sind, dürfte das ziemlich einfach sein
    Wenn man es allerdings von Hand machen muss oder machen will, kann es langweilig werden
  • Ich mag wirklich, wie hier Technik und Kunst gemischt werden

• Ich verstehe den Teil nicht ganz, in dem es heißt, die Buchstabenverbindungen würden nicht stimmen
  Für mich ist der Kern von Schreibschrift, dass man den Stift nicht vom Papier absetzt, und deshalb ist die Art, wie die Buchstaben verbunden werden, von vornherein Teil des Schreibens
  Es wirkt, als sei das Problem entstanden, weil der Autor tatsächlich nicht so schreibt
  Trotzdem ist der Rest des Artikels, der das als einfachste Methode umsetzt, mehrere Buchstaben auf dem Bildschirm zu zeichnen, ohne die Schriftart anzufassen, sehr interessant

  • Die Formulierung „Der Kern von Schreibschrift ist, den Stift nicht vom Papier abzuheben“ stimmt zwar, aber die Auslegung ist anders
    In Schreibschrift sind Verbindungen zwischen Buchstaben kontextabhängig
    Zum Beispiel kann sich zur besseren Lesbarkeit die Form ändern, je nachdem, ob auf b ein a oder ein o folgt, und selbst innerhalb eines Wortes möchte man in manchen Fällen den Stift zwischen Buchstaben absetzen
    Das bedeutet trotzdem nicht, dass man gegen die „Regeln“ der Schreibschrift verstößt
    Vielleicht hast du es anders gelernt, und diese Lehre mag richtig sein, aber ich kenne keinen Schreibschriftstil, bei dem Verbindungen nicht kontextabhängig sein sollten
  • Der Kernpunkt scheint zu sein, dass jedes Buchstabenpaar anders ineinandergreift und dass man das behandeln muss
  • Jedes Buchstabenpaar wird auf eine andere Weise verbunden
    Ähnlich wie Kerning in nicht verbundenen Schriftarten muss man kodieren, wie verschiedene Buchstabensequenzen aussehen

• Wunderschön! Ich wünschte, es gäbe mehr handschriftliche Schreibschrift-Schriftarten
  Meine Arbeit von vor zwei Jahren ist hier: https://certik.github.io/slabikar-otf/

• Cool, aber ich wünschte, meine Handschrift wäre gut genug, dass ich daraus meine eigene Schriftart machen möchte :)
  Wenn man statt < 14.5 die Standardgröße auf 200 setzt, kann man den Punkt als 145 definieren und so ein Dezimalzeichen sparen
  Ich sehe eine Funktion namens adjust; ich kenne die Schriftart-Spezifikation nicht gut, aber vielleicht könnte man 0,{x:12.2,y:13.2} anders serialisieren, etwa als 0,[12.2,13.2], und dann in der Funktion adjust umwandeln

  • Wie bei anderen Fähigkeiten auch kann man Handschrift mit etwas Mühe verbessern