La technique pour coder ma propre écriture manuscrite

 (amygoodchild.com)
1 points par GN⁺ 2024-05-20 | 1 commentaires | Partager sur WhatsApp
  • En partant d’un générateur d’alphabet en lettres bâton en JavaScript, l’autrice a fini par reproduire en code, deux mois plus tard, une écriture cursive manuscrite
  • Les lettres sont construites en plaçant des coordonnées clés avec l’outil p5js, affinées avec les courbes de Chaikin, puis converties en tracés à épaisseur variable
  • Pour la cursive, la manière de relier les lettres varie selon chaque paire ; des tags 0 à 3 sont donc ajoutés au début et à la fin des tracés pour distinguer les états non connectable, ligne de base, au-dessus de la ligne de base, et près de la hauteur d’x
  • Pour former un mot, l’autrice choisit l’un des 2 à 3 tracés de chaque lettre, puis ajoute, supprime ou remplace des points selon la hauteur de connexion des lettres voisines, avant d’ajouter de légères variations avec le Perlin noise
  • Après minification, la classe de lettres cursives pèse 26.1kb, contre 9.7kb pour les lettres bâton, en raison des multiples tracés et des fonctions d’ajustement selon les lettres voisines

De la génération en lettres bâton à l’extension vers la cursive

  • Le précédent générateur d’alphabet en lettres bâton définissait en code les points clés du tracé de chaque lettre
    • Environ 10 points étaient placés par lettre
    • L’algorithme des courbes de Chaikin servait à lisser les tracés
    • Les tracés étaient convertis en formes dont l’épaisseur variait selon la longueur
    • p5js dessinait la forme finale
  • Pour les lettres bâton, les coordonnées étaient écrites directement dans le code, et il fallait ajuster manuellement les points jusqu’à obtenir un rendu naturel
  • Pour l’implémentation de la cursive, un outil de conception de lettres séparé a été créé afin de réduire ce travail répétitif

Un outil pour concevoir les tracés de lettres dans p5js

  • Un outil pour définir et exporter les points clés a été créé dans l’éditeur p5js
  • L’outil affiche à la fois des lettres d’exemple donnant l’échelle et le contexte, ainsi qu’une zone où concevoir une nouvelle lettre
    • Un clic place les points clés du tracé et affiche le résultat après application des courbes de Chaikin
    • La touche p permet de passer en mode édition
    • Après avoir sélectionné un point, on peut ajuster sa position par glisser-déposer
    • La touche enter exporte le tracé dans la console
  • 2 à 3 variantes ont été créées pour chaque lettre, et les tracés obtenus prennent la forme de tableaux de coordonnées {x, y}
  • Pour se baser sur sa propre écriture, l’autrice a écrit elle-même des exemples en minuscules et en majuscules, puis a importé l’image dans l’outil de génération des lettres pour la redessiner par-dessus
    • Les touches w/a/s/d déplacent l’image
    • Les touches r/e agrandissent ou réduisent l’image
    • Les chiffres écrits sur le papier correspondent aux coordonnées x/y permettant d’aligner cette zone avec la fenêtre de génération des lettres

Le problème des liaisons en cursive et les tags 0 à 3

  • Pour certaines paires de lettres, il suffit d’ajouter le tracé de la lettre suivante à la suite des points clés de la première, puis d’appliquer les courbes de Chaikin en une seule fois pour obtenir une liaison naturelle
  • Mais dans certaines combinaisons, la ligne de liaison déforme la lettre
    • Dans na, le dernier point du n est bas et le premier point du a est haut, si bien que la ligne de liaison traverse le a en diagonale et peut le faire ressembler à un e
    • Dans ti, le t se termine juste au-dessus de la ligne de base tandis que le i commence sur la ligne de base, ce qui crée une crête peu naturelle
  • Au lieu d’écrire des règles pour chaque paire spécifique, des informations numériques de hauteur de connexion sont ajoutées au début et à la fin de chaque tracé
    • 0 : ne peut pas être relié à une autre lettre
    • 1 : se relie à une autre lettre près de la ligne de base
    • 2 : se relie à une autre lettre juste au-dessus de la ligne de base
    • 3 : se relie à une autre lettre près de la hauteur d’x
  • Même pour une même lettre, la manière d’ajouter ou de supprimer des points varie selon sa position au début du mot ou selon les lettres avant et après
    • Si a se trouve au début d’un mot, l’ajout d’un point supplémentaire paraît maladroit
    • Avec a après w, la ligne peut traverser le a différemment
    • Si t est collé à k, sa forme peut être modifiée
  • Toutes les paires de lettres ont été testées, et plusieurs options de tracé ainsi que des retouches selon les lettres voisines ont été utilisées pour créer de la variabilité
  • Idéalement, chaque lettre aurait 5 à 6 variantes de tracé, mais il faut trouver un équilibre avec la taille du fichier

Procédure de génération d’un mot

  • Pour créer un mot, on commence par choisir pour chaque caractère l’un des 2 à 3 tracés de base disponibles
  • Les informations de connexion au début et à la fin du tracé choisi sont ensuite transmises aux lettres adjacentes
    • Même pour une même lettre, l’information de point final peut varier selon la variante choisie ; il faut donc d’abord sélectionner tous les tracés de lettres
  • Le tracé de base est ensuite ajusté en fonction des lettres voisines
    • Si la hauteur de fin de la lettre précédente vaut 2, on peut supprimer un point au début du tracé courant
    • Si la hauteur de début de la lettre suivante vaut 1, on peut ajouter un point à un emplacement précis
  • Les fonctions d’ajustement se comportent différemment selon les lettres
    • La fonction d’ajustement de q ajoute une rupture à la fin avec une probabilité de 70 %, puis remplace ou ajoute des points selon l’information de fin de la lettre précédente ou de début de la suivante
    • La fonction d’ajustement de n crée une rupture avec une probabilité de 30 % ou déplace le dernier point lorsque la lettre suivante commence à 3
  • Lors de la fusion de tous les tracés de base, 1, 2 et 3 sont ignorés, tandis que 0 déclenche le démarrage d’un nouveau tracé pour créer une rupture
  • Les tracés fusionnés passent ensuite par les courbes de Chaikin, sont convertis en formes à épaisseur variable, puis reçoivent un léger tremblement via le Perlin noise

Taille et usages

  • La classe de lettres pour les lettres bâton pesait 9.7kb, et la classe actuelle pour les lettres cursives, après minification, pèse 26.1kb
  • La version cursive est plus volumineuse car chaque lettre possède plusieurs tracés et des fonctions qui ajustent les points selon les lettres adjacentes
  • D’autres pistes de réduction existent encore
    • Les lettres sont actuellement conçues sur la base d’une taille de police de 20, puis redimensionnées
    • C’est pourquoi on trouve beaucoup de coordonnées comme x: 14.5
    • En passant la taille de base à 200, on pourrait éliminer les décimales, par exemple obtenir 145, et réduire un peu la taille par lettre
    • Ce changement doit être fait avec prudence et figure donc sur la liste des tâches à venir
  • Cette écriture manuscrite sert principalement aux titres, étiquettes et notes griffonnées du diagramme en cours de création
  • Utiliser des tracés encodés au lieu d’une police permet de manipuler les tracés directement, par exemple en modifiant la position des lettres ou l’épaisseur à l’intérieur d’une lettre individuelle
  • Un print Meaningful Nonsense, réalisé avec une version plus avancée de ce code d’écriture manuscrite, est également proposé, et chaque exemplaire est un résultat unique généré au moment de la commande

À lire aussi

1 commentaires

 
GN⁺ 2024-05-20
Avis sur Hacker News

  • Si j’encode mon écriture manuscrite, je crois qu’on peut la considérer comme un hachage à sens unique.
    Quand je la relis plus tard, il n’y a aucun moyen de déchiffrer ce que j’essayais bien d’écrire.

    • On dirait un défi ! https://www.handwritingocr.com :)
    • C’est pour ça qu’à l’université, j’ai dû abandonner volontairement l’écriture cursive.
    • Pareil pour moi : au bout de quelques heures seulement, même moi je deviens incapable de la déchiffrer.

  • Une vidéo YouTube de Stuff Made Here sur un sujet similaire est assez géniale : https://www.youtube.com/watch?v=cQO2XTP7QDw
    Les tâtonnements y sont aussi expliqués, ce qui la rend plaisante à regarder, et le dépôt de synthèse d’écriture manuscrite est intéressant : https://github.com/sjvasquez/handwriting-synthesis

  • L’œuvre finale est plutôt belle.
    Je me demande si l’étape suivante serait d’en faire une vraie police, utilisable pour saisir du texte dans n’importe quel programme.

    • Il existe déjà des polices pour traceurs.
      Contrairement aux polices auxquelles on pense habituellement, il doit s’agir de tracés à suivre, et non de contours à remplir.
    • S’il y a déjà des courbes, c’est assez facile à faire.
      Cela dit, si cela doit être fait à la main, ou si l’on veut le faire ainsi, ça peut être fastidieux.
    • J’aime beaucoup la façon dont cela mêle technologie et art.

  • Je ne comprends pas très bien la partie sur le fait que les lettres ne se relient pas correctement.
    Pour moi, l’essence de l’écriture cursive est de ne pas lever le stylo du papier, donc la manière de relier les lettres fait dès le départ partie de l’écriture.
    On dirait que le problème vient du fait que l’auteur n’écrit pas réellement de cette manière.
    Malgré tout, le reste de l’article, qui résout le problème de la façon la plus simple pour dessiner plusieurs lettres à l’écran sans toucher à la police, est très intéressant.

    • L’expression « l’essence de l’écriture cursive est de ne pas lever le stylo du papier » est juste en soi, mais je ne l’interprète pas de la même façon.
      En écriture cursive, les liaisons entre les lettres sont dépendantes du contexte.
      Par exemple, selon que b est suivi de a ou de o, la forme peut changer pour des raisons de lisibilité, et même à l’intérieur d’un mot, on peut parfois vouloir lever le stylo entre deux lettres.
      Cela ne viole pas pour autant les « règles » de l’écriture cursive.
      Vous avez peut-être appris autrement, et cet enseignement est peut-être correct, mais je ne connais pas vraiment de style cursif où les liaisons ne devraient pas dépendre du contexte.
    • Le point essentiel semble être que chaque paire de lettres a une manière différente de s’emboîter, et qu’il faut gérer cela.
    • Toutes les paires de lettres se relient de manière différente.
      Même dans les polices non liées, comme pour le crénage, il faut encoder l’apparence de différentes séquences de lettres.

  • Magnifique ! J’aimerais voir davantage de polices d’écriture manuscrite cursive.
    Voici mon travail d’il y a deux ans : https://certik.github.io/slabikar-otf/

  • C’est chouette, mais j’aimerais que mon écriture soit assez belle pour avoir envie d’en faire ma propre police :)
    En remplaçant la taille par défaut par 200 au lieu de < 14.5, on pourrait définir le point comme 145 et ainsi économiser un caractère décimal.
    Je vois une fonction appelée adjust ; je ne connais pas bien la spécification des polices, mais je me demande si l’on ne pourrait pas sérialiser 0,{x:12.2,y:13.2} autrement, par exemple sous la forme 0,[12.2,13.2], puis faire la conversion dans la fonction adjust.

    • Comme pour d’autres compétences, l’écriture manuscrite peut s’améliorer avec un peu d’effort.