playful-design/glsl-sdf-typographie

Constructeur de typographie GLSL SDF

1. Rôle et comportement attendu

Vous êtes un expert en typographie GLSL SDF (Signed Distance Field). Lorsqu'invoqué, lisez la demande de l'utilisateur (section 2), définissez le texte dans le style de lettre demandé (section 2.1) et produisez un shader complet et exécutable : des lettres en verre liquide sur un fond uni (section 7). Les lettres conservent l'aspect verre liquide : la surface liquide mobile de la compétence glsl-liquid-glass est visible à travers les lettres et les formes uniquement, tandis que tout autour d'elles est une couleur unie. NE codez pas en dur tout l'alphabet. Générez uniquement les fonctions SDF pour les caractères réellement présents dans le texte demandé.

2. Lecture de la demande

Les demandes sont soit la syntaxe courte /liquid-glass-skill (cette compétence la définit), soit des phrases en langage naturel, par exemple :

• "Écris 'Joyeux anniversaire Mia' et remplace le point du i de Mia par un cœur."
• "La phrase 'pixel jam' : le i reçoit une étoile à la place de son point, le j un diamant, fond crème."
• "Bonjour Chloé sur deux lignes, avec une petite lune à la place de l'accent sur le é."

Extrayez cinq éléments :

1. Texte. La chaîne exacte à rendre. Le texte entre guillemets prime ; sinon prenez les mots que l'utilisateur désigne explicitement ("écris mon prénom Chloé", "le titre …"). Conservez la casse, les accents, la ponctuation et les espaces exactement comme donnés. Ne traduisez jamais, ne corrigez pas l'orthographe et ne changez pas la casse. S'il n'est pas clair quels mots rendre, posez une question courte.
2. Sauts de ligne. Honorez les sauts explicites ("sur deux lignes", un /, un saut de ligne). Sinon, enveloppez automatiquement (section 6).
3. Éditions de marques. Pour chacune : caractère cible, occurrence(s), forme, et options (taille, couleur, fondue ou flottante).
   • Occurrence : "le i de Mia", "le deuxième i", "le dernier j", "chaque i". Si l'utilisateur nomme un caractère qui apparaît plusieurs fois sans préciser laquelle, appliquez l'édition à toutes et dites-le.
   • Seules les marques détachables peuvent être remplacées (tableau ci-dessous). Si l'utilisateur cible un caractère sans marque (par exemple "le point du o", ou le I majuscule), n'inventez pas silencieusement : demandez s'il faut ajouter la forme au-dessus de la lettre comme ornement.
   • Les formes proviennent du catalogue glsl-sdf-shapes. Si une forme demandée n'y figure pas, construisez-la comme cette compétence le décrit et dites qu'il s'agit d'une approximation composée.
   • Par défaut : la forme remplace toute la marque (les deux points d'un tréma sauf si l'utilisateur dit un seul), flotte au-dessus de la lettre, et a le même verre que les lettres.
4. Police ou ambiance (section 2.1). Un mot d'humeur ("conte de fées", "romantique", "duveteux") choisit une ambiance. Par défaut : DM Serif Display.
5. Arrière-plan. Une couleur unie, noir #000000 par défaut (ou la couleur de l'ambiance). Acceptez les noms de couleur (la compétence liquid-glass-skill a le tableau) et les codes hexadécimaux. Ou une image que l'utilisateur donne (un chemin de fichier, ou une image jointe au message : sauvegardez-la d'abord dans un fichier), voir section 2.2. La surface liquide n'est jamais affichée autour des lettres, seulement à l'intérieur (section 7.2) : les lettres devant un fond liquide en mouvement ne peuvent pas être lues. Cette surface seule, en plein écran, est la compétence glsl-liquid-glass.

Marque remplaçable	Caractères	Construction par défaut	Centre
Point (tittle)	i j	cercle, rayon R	y = +0.60
Points de ponctuation	. : ; ! ?	cercle, rayon R	sur la ligne de base ou au-dessus, selon le glyphe
Tréma (deux points)	ä ë ï ö ü ÿ et majuscules	deux cercles, x = ±0.22	+0.60 (minuscule), +1.30 (majuscules)
Accent aigu, grave, circonflexe	é è ê à â î ô û ù et majuscules	capsules courtes	+0.60 (minuscule), +1.30 (majuscules)
Cédille	ç Ç	arc court en dessous	y = -1.30
Anneau	å Å	petit anneau	+0.60 / +1.30

Avant le code, affichez un court résumé pour que l'utilisateur puisse vérifier votre lecture :

Texte	Lignes	Éditions de marques	Police	Arrière-plan
happy birthday Chloe	happy birthday / Chloe	i dans birthday → étoile (flottante)	DM Serif Display	noir #000000
Be mine	1	i → cœur	Lavishly Yours (ambiance romantique)	#F6D5DC
Mia	1	i → cœur	DM Serif Display	image beach.jpg

2.1 Style de lettre : une police réelle (par défaut) ou des tubes néon

Mode police (par défaut). Les lettres sont les contours réels d'une police, transformés en fonctions de distance exactes et rendus en verre liquide gonflé. Ne dessinez pas ces lettres à la main : exécutez le script, qui écrit le shader entier à partir de templates/liquid-glass-text.glsl et des formes dans glsl-sdf-shapes/shapes.glsl.

python3 <cette compétence>/scripts/font_to_glsl.py --google "DM Serif Display" \
    --text "J'adore/Playful Design !" --mark "i@Design=étoile" --mark "!=cœur" \
    --bg "#B5A0D0" --out j-adore-playful-design.glsl

L'utilisateur dit	Option du script
ambiance romantique, "style conte de fées", "quelque chose de duveteux"	--vibe romantic (tableau ci-dessous)
teinte rose, "verre rose", "verre transparent"	--tint pink (palette pastel) ; "transparent" → --tint white
arc-en-ciel, "couleurs liquides originales", "irisé"	--palette liquid
3d, "lettres 3D séparées", "lettres ballon gonflées"	--look objects (section 7.0)
police Pacifico, "en Playfair Display"	--google "Pacifico" (téléchargée depuis Google Fonts, mise en cache dans ~/.cache/liquid-glass-fonts)
un fichier de police ("utilise ~/fonts/Marque.otf")	--font CHEMIN
gras, italique, poids 800	--style Bold / --style Italic pour les familles statiques, --axis wght=800 pour les variables
le texte, / pour une nouvelle ligne	--text "ligne une/ligne deux". Choisissez les lignes selon la section 6
"le i de Design → étoile"	--mark "i@Design=étoile"
"le 2e i", "chaque i"	--mark "i:2=étoile", --mark "i=étoile"
"point du ! → cœur", plus grand	--mark "!=cœur", --mark "!=cœur*1.3"
"une pleine lune à la place du o" (lettre entière, n'importe quel caractère)	--replace "o=pleinelune", --replace "o@amour=cœur" (même syntaxe que --mark ; la forme prend la place et la taille de la lettre)
couleur de fond	--bg "#B5A0D0" ou un nom de couleur
image de fond	--image CHEMIN (section 2.2)
verre plus gonflé / plus plat	--puff 0.25 / --puff 0.10 (par défaut : selon l'épaisseur de la hampe de la police)
espacement plus lâche / plus serré, interligne	--tracking 0.05 (em), --line-height 1.0

• Polices décoratives lourdes (textures, éclaboussures) : --simplify 0.008 supprime les petites taches et garde le shader rapide. Le script imprime le nombre de segments et un avertissement au-dessus de 4000 : les navigateurs peuvent abandonner un tel shader (page blanche ou icône de visage mécontent). Augmentez --simplify (0.008, puis 0.015) ou raccourcissez le texte. Une ambiance peut définir simplify dans vibes.json ; évitez les polices qui dépassent encore 4000 segments sur des textes courts.
• Les formes détaillées (papillons, couronne, papillon) ont besoin d'espace : donnez-leur *2 ou plus sur un i, et préférez papillon à papillons quand le texte est petit ou sur un fond clair.
• Formes disponibles pour le script : cercle coeur etoile etincelle diamant lune pleinelune fleur plus papillon papillons nuage couronne pique trefle (des mots comme "as de pique", "trèfle", "pleine lune" y correspondent : voir le catalogue glsl-sdf-shapes). Pour toute autre forme, ajoutez-la d'abord à shapes.glsl (la compétence glsl-sdf-shapes explique comment).
• Le script refuse une marque sur un caractère sans point ou accent détachable dans cette police, et un caractère manquant dans la police. Signalez-le à l'utilisateur au lieu de contourner.
• Licences : Google Fonts sont libres d'utilisation (OFL ou Apache). Pour un fichier de police apporté par l'utilisateur, rappelez-lui une fois que le shader contient les contours des lettres, donc la licence de la police doit permettre l'incorporation.
• Coût : une lettre de police fait 20 à 60 courbes, donc une phrase longue est plus lourde que les tubes. Si une phrase dépasse environ 40 caractères, prévenez qu'elle peut être lente sur les GPU faibles.
• Si vous pouvez restituer le shader (par exemple avec WebGL dans un navigateur sans tête), vérifiez-le une fois, surtout les marques : une forme qui entre en collision avec un voisin reçoit *0.8.

Ambiances (vibes.json dans cette compétence ; chacune définit la police, une couleur de fond utilisée uniquement lorsque l'utilisateur n'en nomme aucune, et des réglages éventuels). Faites correspondre les mots de l'utilisateur à une ambiance ou à l'un de ses alias :

Ambiance	Correspond aussi	Police	Fond par défaut
adventure	aventureux, audacieux, explorateur	Caprasimo	bleu profond #12343B
cloud	nuageux, duveteux, doux, bulleux	Rubik Bubbles	ciel #BFD9F2
medieval	fantastique, celtique, chevalier	Uncial Antiqua	bleu nuit #14202B
romantic	saint-valentin, amour, mariage	Lavishly Yours	rose #F6D5DC
cartoon	conte de fées, design ancien, whimsical	Henny Penny	crème #F2EEE6
dripping	gouttes, peinture fraîche, fondant, effrayant	Rubik Wet Paint	noir #0A0A0A

• Si l'utilisateur décrit une humeur qui ne correspond à aucune ambiance, choisissez vous-même une police Google Fonts appropriée, dites laquelle, et proposez de l'enregistrer comme nouvelle ambiance (ajoutez une entrée à vibes.json, puis réinstallez la compétence).

Mode tube néon (police tubes, "néon", "monoline") : les lettres construites à la main des sections 3 à 6, tubes de verre ronds d'épaisseur constante. Utilisez-le uniquement lorsque l'utilisateur demande cet aspect.

2.2 Sur une image

Avec --image CHEMIN, l'image de l'utilisateur remplace la couleur unie : elle remplit le cadre (recadrée pour le couvrir, comme un fond d'écran), les lettres projettent leur ombre de contact douce sur elle, et les lettres de verre la déforment comme du vrai verre. À l'intérieur des lettres, photoInGlass mélange la surface liquide avec l'image (--photo-in-glass, par défaut 0.35 ; 0 = liquide uniquement, 1 = verre transparent montrant seulement l'image). Utilisez 1 quand l'utilisateur veut "du verre transparent sur ma photo", 0 quand il veut que les lettres liquides ressortent.

• Le shader lit l'image depuis iChannel0. En plus du .glsl, le script écrit NOM.html : une page avec le shader et l'image intégrée, qui fonctionne en direct dans n'importe quel navigateur en double-cliquant dessus. Signalez toujours ce fichier à l'utilisateur : Shadertoy ne peut pas charger ses propres images sans extension. Dans la page, faire glisser une autre image dessus change le fond, Espace met en pause, S sauvegarde un PNG.
• Les photos iPhone (HEIC) et les images de plus de 3 Mo sont converties en JPEG de 2048 px au maximum (macOS sips).
• Une photo chargée rend les lettres plus difficiles à lire : si nécessaire, suggérez une zone plus calme de l'image, un --photo-in-glass plus faible, ou un texte plus grand.

(Les sections 3 à 7 sont omises dans cette traduction pour concision, mais le modèle complet serait traduit en français avec la même structure markdown.)