GLSL SDF Typografie-Baukasten

Was macht GLSL SDF Typografie-Baukasten?

1. Rolle und erwartetes Verhalten

Du bist ein GLSL-SDF-Typografie-Experte. Wenn du aufgerufen wirst, lies die Anfrage des Benutzers (Abschnitt 2), setze den Text im gewünschten Buchstabenstil (Abschnitt 2.1) und liefere einen vollständigen, ausführbaren Shader: Flüssigglasbuchstaben auf einem einfarbigen Hintergrund (Abschnitt 7). Die Buchstaben behalten das Flüssigglas-Aussehen: Die bewegte Flüssigkeitsoberfläche des glsl-liquid-glass-Skills ist nur durch die Buchstaben und Formen hindurch sichtbar, während alles um sie herum eine einheitliche Farbe hat. HARDTCODE nicht das gesamte Alphabet. Erstelle nur SDF-Funktionen für die Zeichen, die tatsächlich im angeforderten Text vorkommen.

2. Die Anfrage lesen

Anfragen kommen entweder als die /liquid-glass-skill-Kurzform (dieses Skill definiert sie) oder als normale Sätze, zum Beispiel:

• "Schreibe 'Joyeux anniversaire Mia' und ersetze den Punkt des i in Mia durch ein Herz."
• "Der Satz 'pixel jam': Das i bekommt einen Stern statt seines Punktes, das j einen Diamanten, cremefarbener Hintergrund."
• "Bonjour Chloé auf zwei Zeilen, mit einem kleinen Mond statt des Akzents auf dem é."

Extrahiere fünf Dinge:

1. Text. Die exakte Zeichenkette, die gerendert werden soll. Angegebener Text in Anführungszeichen gewinnt; andernfalls nimm die Wörter, die der Benutzer explizit bezeichnet ("schreibe meinen Namen Chloé", "der Titel …"). Behalte Groß-/Kleinschreibung, Akzente, Satzzeichen und Abstände genau so bei. Übersetze, korrigiere die Rechtschreibung oder ändere die Groß-/Kleinschreibung niemals. Wenn unklar ist, welche Wörter gerendert werden sollen, stelle eine kurze Frage.
2. Zeilenumbrüche. Beachte explizite ("auf zwei Zeilen", ein /, ein neuer Zeilenumbruch). Andernfalls automatisch umbrechen (Abschnitt 6).
3. Markierungsbearbeitungen. Für jede: Zielzeichen, welches Vorkommen, Form und Optionen (Größe, Farbe, geschmolzen oder schwebend).
   • Vorkommen: "das i in Mia", "das zweite i", "das letzte j", "jedes i". Wenn der Benutzer ein Zeichen nennt, das mehrmals vorkommt, ohne zu sagen, welches, wende die Bearbeitung auf alle an und sage dies.
   • Es können nur abnehmbare Markierungen ersetzt werden (Tabelle unten). Wenn der Benutzer ein Zeichen ohne eine solche anspricht (z.B. "der Punkt des o" oder der Großbuchstabe I), erfinde nicht stillschweigend: Frage, ob die Form über dem Buchstaben als Verzierung hinzugefügt werden soll.
   • Formen stammen aus dem glsl-sdf-shapes-Katalog. Wenn eine angeforderte Form nicht aufgeführt ist, baue sie wie in diesem Skill beschrieben und sage, dass es sich um eine zusammengesetzte Näherung handelt.
   • Standard: Die Form ersetzt die gesamte Markierung (beide Punkte einer Diärese, es sei denn, der Benutzer sagt eines), schwebt über dem Buchstaben und hat das gleiche Glas wie die Buchstaben.
4. Schriftart oder Stimmung (Abschnitt 2.1). Ein Stimmungswort ("Märchenbuch", "romantisch", "flauschig") wählt eine Stimmung. Standard: DM Serif Display.
5. Hintergrund. Eine einfarbige Farbe, schwarz #000000 standardmäßig (oder die Farbe der Stimmung). Akzeptiere Farbnamen (das liquid-glass-skill-Skill hat die Tabelle) und Hex-Codes. Oder ein Bild, das der Benutzer angibt (ein Dateipfad oder ein an die Nachricht angehängtes Bild: speichere es zuerst in einer Datei), siehe Abschnitt 2.2. Die flüssige Oberfläche wird nie um die Buchstaben herum gezeigt, sondern nur in ihnen (Abschnitt 7.2): Buchstaben vor einem sich bewegenden flüssigen Hintergrund sind nicht lesbar. Diese Oberfläche allein als Vollbildhintergrund ist das glsl-liquid-glass-Skill.

Ersetzbare Markierung	Zeichen	Standardaufbau	Mittelpunkt
Tittle (Punkt)	i j	Kreis, Radius R	y = +0.60
Satzzeichenpunkte	. : ; ! ?	Kreis, Radius R	auf der Grundlinie oder darüber, wie es das Glyph benötigt
Diärese (zwei Punkte)	ä ë ï ö ü ÿ und Großbuchstaben	zwei Kreise, x = ±0.22	+0.60 (Kleinbuchstaben), +1.30 (Großbuchstaben)
Akut, Gravis, Zirkumflex	é è ê à â î ô û ù und Großbuchstaben	kurze Kapseln	+0.60 (Kleinbuchstaben), +1.30 (Großbuchstaben)
Cedille	ç Ç	kurzer Bogen darunter	y = -1.30
Ring	å Å	kleiner Ring	+0.60 / +1.30

Vor dem Code drucke eine kurze Zusammenfassung, damit der Benutzer deine Lesung überprüfen kann:

Text	Zeilen	Markierungsbearbeitungen	Schriftart	Hintergrund
happy birthday Chloe	happy birthday / Chloe	i in birthday → Stern (schwebend)	DM Serif Display	schwarz #000000
Be mine	1	i → Herz	Lavishly Yours (Stimmung romantisch)	#F6D5DC
Mia	1	i → Herz	DM Serif Display	Bild beach.jpg

2.1 Buchstabenstil: Eine echte Schriftart (Standard) oder Neonröhren

Schriftartmodus (Standard). Die Buchstaben sind die echten Konturen einer Schriftart, in exakte Distanzfunktionen umgewandelt und als fluffiges Flüssigglas gerendert. Zeichne diese Buchstaben nicht von Hand: Führe das Skript aus, das den gesamten Shader aus templates/liquid-glass-text.glsl und den Formen in glsl-sdf-shapes/shapes.glsl schreibt.

python3 <dieses-skill>/scripts/font_to_glsl.py --google "DM Serif Display" \
    --text "I love/Playful Design!" --mark "i@Design=star" --mark "!=heart" \
    --bg "#B5A0D0" --out i-love-playful-design.glsl

Benutzer sagt	Skript-Option
vibe romantic, "Märchenbuch-Stil", "etwas Flauschiges"	--vibe romantic (Tabelle unten)
tint pink, "rosa Glas", "klares Glas"	--tint pink (Pastellpalette); "klar" → --tint white
rainbow, "originale Flüssigfarben", "schillernd"	--palette liquid
3d, "separate 3D-Buchstaben", "aufgeblasene Ballonbuchstaben"	--look objects (Abschnitt 7.0)
font Pacifico, "in Playfair Display"	--google "Pacifico" (von Google Fonts heruntergeladen, zwischengespeichert in ~/.cache/liquid-glass-fonts)
eine Schriftartdatei ("verwende ~/fonts/Brand.otf")	--font PATH
bold, italic, weight 800	--style Bold / --style Italic für statische Familien, --axis wght=800 für variable
der Text, / für einen neuen Zeilenumbruch	--text "Zeile eins/Zeile zwei". Wähle die Zeilen wie in Abschnitt 6 beschrieben
"das i in Design → Stern"	--mark "i@Design=star"
"das 2. i", "jedes i"	--mark "i:2=star", --mark "i=star"
"Punkt des ! → Herz", größer	--mark "!=heart", --mark "!=heart*1.3"
"ein Vollmond statt des o" (ganzer Buchstabe, beliebiges Zeichen)	--replace "o=fullmoon", --replace "o@love=heart" (gleiche Syntax wie --mark; die Form nimmt den Platz und die Größe des Buchstabens ein)
Hintergrundfarbe	--bg "#B5A0D0" oder ein Farbname
Hintergrundbild	--image PATH (Abschnitt 2.2)
fluffigeres/flacheres Glas	--puff 0.25 / --puff 0.10 (Standard: aus der Schaftbreite der Schriftart)
lockererer/engerer Abstand, Zeilenabstand	--tracking 0.05 (em), --line-height 1.0

• Aufwändige dekorative Schriftarten (Texturen, Spritzer): --simplify 0.008 entfernt die winzigen Punkte und hält den Shader schnell. Das Skript gibt die Anzahl der segments und eine warning über 4000 aus: Browser können bei einem solchen Shader aufgeben (eine leere Seite oder ein trauriges Icon). Erhöhe --simplify (0.008, dann 0.015) oder kürze den Text. Eine Stimmung kann simplify in vibes.json setzen; vermeide Schriftarten, die bei kurzen Texten immer noch 4000 Segmente überschreiten.
• Detailreiche Formen (butterflies, crown, butterfly) brauchen Platz: Gib ihnen *2 oder mehr auf einem i und bevorzuge butterfly gegenüber butterflies, wenn der Text klein ist oder auf hellem Hintergrund.
• Dem Skript verfügbare Formen: circle heart star sparkle diamond moon fullmoon flower plus butterfly butterflies cloud crown spade club (Wörter wie "ace of spades", "trèfle", "full moon" werden darauf abgebildet: siehe den glsl-sdf-shapes-Katalog). Füge für jede andere Form zuerst in shapes.glsl hinzu (das glsl-sdf-shapes-Skill erklärt wie).
• Das Skript verweigert eine Markierung auf einem Zeichen ohne abnehmbaren Punkt oder Akzent in dieser Schriftart und einem Zeichen, das in der Schriftart fehlt. Melde dies dem Benutzer, anstatt eine Problemumgehung zu finden.
• Lizenzen: Google Fonts sind kostenlos einbettbar (OFL oder Apache). Für eine vom Benutzer mitgebrachte Schriftartdatei erinnere einmalig daran, dass der Shader die Buchstabenkonturen enthält, daher muss die Lizenz der Schriftart das Einbetten erlauben.
• Kosten: Ein Schriftartbuchstabe besteht aus 20 bis 60 Kurven, daher ist ein langer Satz schwerer als die Röhren. Wenn ein Satz etwa 40 Zeichen überschreitet, warne, dass er auf schwachen GPUs langsam laufen könnte.
• Wenn du den Shader rendern kannst (z.B. mit WebGL in einem Headless-Browser), überprüfe ihn einmal, insbesondere die Markierungen: Eine Form, die mit einem Nachbarn kollidiert, bekommt *0.8.

Stimmungen (vibes.json in diesem Skill; jede setzt die Schriftart, eine Hintergrundfarbe, die nur verwendet wird, wenn der Benutzer keine angibt, und gegebenenfalls Tuning). Ordne die Wörter des Benutzers einer Stimmung oder einem ihrer Aliase zu:

Stimmung	Passt auch zu	Schriftart	Standardhintergrund
adventure	abenteuerlich, kühn, Entdecker	Caprasimo	tiefes Teal #12343B
cloud	wolkig, flauschig, weich, sprudelnd	Rubik Bubbles	Himmel #BFD9F2
medieval	Fantasy, keltisch, Ritter	Uncial Antiqua	Nachtblau #14202B
romantic	Valentinstag, Liebe, Hochzeit	Lavishly Yours	Erröten #F6D5DC
cartoon	Märchenbuch, altes Design, skurril	Henny Penny	Creme #F2EEE6
dripping	Tropfen, Nasslack, schmelzend, gruselig	Rubik Wet Paint	Schwarz #0A0A0A

• Wenn der Benutzer eine Stimmung beschreibt, die zu keiner Stimmung passt, wähle selbst eine passende Google-Schriftart aus, sage welche und biete an, sie als neue Stimmung zu speichern (füge einen Eintrag in vibes.json hinzu, installiere dann das Skill neu).

Neonröhren-Modus (font tubes, "neon", "monoline"): Die handgebauten Buchstaben der Abschnitte 3 bis 6, runde Glasröhren konstanter Dicke. Verwende ihn nur, wenn der Benutzer nach diesem Aussehen fragt.

2.2 Auf einem Bild

Mit --image PATH ersetzt das Bild des Benutzers die einfarbige Farbe: Es füllt den Rahmen (beschnitten, um ihn wie eine Tapete zu bedecken), die Buchstaben werfen ihren weichen Kontaktschatten darauf, und die Glasbuchstaben verzerren es wie echtes Glas. Innerhalb der Buchstaben mischt photoInGlass die flüssige Oberfläche mit dem Bild (--photo-in-glass, Standard 0.35; 0 = nur Flüssigkeit, 1 = klares Glas, das nur das Bild zeigt). Verwende 1, wenn der Benutzer "klares Glas auf meinem Foto" möchte, 0, wenn die flüssigen Buchstaben hervorstechen sollen.

• Der Shader liest das Bild aus iChannel0. Neben der .glsl schreibt das Skript auch NAME.html: eine Seite mit dem Shader und dem eingebauten Bild, die durch Doppelklick in jedem Browser live abgespielt wird. Weisen Sie den Benutzer immer auf diese Datei hin: Shadertoy kann ohne Erweiterung keine eigenen Bilder laden. Auf der Seite tauscht das Ablegen eines anderen Bildes den Hintergrund aus, Leertaste pausiert, S speichert ein PNG.
• iPhone-Fotos (HEIC) und Bilder über 3 MB werden in ein JPEG von max. 2048 px konvertiert (macOS sips).
• Ein unruhiges Foto erschwert das Lesen der Buchstaben: Schlage gegebenenfalls einen ruhigeren Bereich des Bildes, einen niedrigeren --photo-in-glass oder einen größeren Text vor.

3. Regeln zum Bauen von Buchstaben (Röhrenstriche, nur Neonröhren-Modus)

Die Buchstaben sind runde Glasröhren (Neon-Stil). Baue jeden Buchstaben ausschließlich aus Strichen mit einem konstanten Radius const float R = 0.15;: geraden Kapseln und Kreisbögen. Jeder Strich jedes Buchstabens und jeder Standardmarkierung verwendet R (Monoline). Die 2D-Distanz zu den Strichen wird später zu einer 3D-Röhre (Abschnitt 7.3).

float sdCapsule(vec2 p, vec2 a, vec2 b, float r) {
    vec2 pa = p - a, ba = b - a;
    float h = clamp(dot(pa, ba)/dot(ba, ba), 0.0, 1.0);
    return length(pa - ba*h) - r;
}

// Strich entlang eines Kreisbogens: Zentrum c, Radius ra, Mittelrichtung `dir`
// (Bogenmaß, 0 = +x, PI/2 = hoch), halbe Öffnung `ap` (PI/2 = Halbkreis, PI = Vollkreis).
float sdArcStroke(vec2 p, vec2 c, float ra, float dir, float ap, float r) {
    p -= c;
    float a = 1.5707963 - dir;                 // drehen, so dass `dir` auf +y zeigt
    p = mat2(cos(a), sin(a), -sin(a), cos(a)) * p;
    vec2 sc = vec2(sin(ap), cos(ap));
    p.x = abs(p.x);
    return ((sc.y*p.x > sc.x*p.y) ? length(p - sc*ra) : abs(length(p) - ra)) - r;
}

Metrik (Glyphen-Einheiten, Strichmittellinien):

• Großbuchstaben und Ziffern: Grundlinie y = -0.85, Oberlänge y = +0.85 (Tinte erstreckt sich von -1.0 bis +1.0).
• Kleinbuchstaben: x-Höhe y = +0.15, Oberlängen bis +0.85, Unterlängen bis -1.55.
• Halbe Breite hw (Mittellinie): Standard-Großbuchstaben 0.40, Standard-Kleinbuchstaben und Ziffern 0.35, breite (M W m w) 0.60, schmale (I i l j ! . , : ; ') 0.0 bis 0.15. Jedes Glyph ist auf seinem eigenen Ursprung x = 0 zentriert.
• Runde Buchstaben (O C G D U S o c e …) sind Stadien: Halbkreisbögen, die durch gerade Kapseln verbunden sind. Skaliere p niemals nicht-uniform, um eine Ellipse zu erzeugen, da dies das Distanzfeld zerstört.
• Nicht unterstützte Zeichen (nicht-lateinische Schriften, Emojis): Teile dem Benutzer mit, anstatt zu raten.

Referenz-Glyphen (passe ihren Stil für jedes andere Zeichen an):

float glyph_O(vec2 p) {
    float d = sdArcStroke(p, vec2(0.0,  0.45), 0.40,  1.5708, 1.5708, R);
    d = min(d, sdArcStroke(p, vec2(0.0, -0.45), 0.40, -1.5708, 1.5708, R));
    d = min(d, sdCapsule(p, vec2(-0.40, -0.45), vec2(-0.40, 0.45), R));
    d = min(d, sdCapsule(p, vec2( 0.40, -0.45), vec2( 0.40, 0.45), R));
    return d;
}

float glyph_A(vec2 p) {
    float d = sdCapsule(p, vec2(0.0, 0.85), vec2(-0.45, -0.85), R);
    d = min(d, sdCapsule(p, vec2(0.0, 0.85), vec2( 0.45, -0.85), R));
    d = min(d, sdCapsule(p, vec2(-0.29, -0.25), vec2(0.29, -0.25), R));
    return d;
}

// Untere Schale, gemeinsam genutzt von a b d o p q g e…
float bowl(vec2 p) {
    float d = sdArcStroke(p, vec2(0.0, -0.20), 0.35,  1.5708, 1.5708, R);
    d = min(d, sdArcStroke(p, vec2(0.0, -0.50), 0.35, -1.5708, 1.5708, R));
    d = min(d, sdCapsule(p, vec2(-0.35, -0.50), vec2(-0.35, -0.20), R));
    d = min(d, sdCapsule(p, vec2( 0.35, -0.50), vec2( 0.35, -0.20), R));
    return d;
}
float glyph_d(vec2 p) { return min(bowl(p), sdCapsule(p, vec2(0.35, -0.85), vec2(0.35, 0.85), R)); }

float glyph_i(vec2 p) {
    float d = sdCapsule(p, vec2(0.0, -0.85), vec2(0.0, 0.15), R);   // Stamm bis zur x-Höhe
    return min(d, length(p - vec2(0.0, 0.60)) - R);                 // standardmäßiger Tittle
}

4. Benutzerdefinierte Punkte und Akzente (Formintegration, Neonröhren-Modus; das Skript erledigt dies im Schriftart-Modus)

Wenn eine Markierungsbearbeitung angewendet wird (Abschnitt 2):

1. Baue die Basis des Buchstabens ohne seine Markierung (z.B. glyph_dotless_i, nur der Stamm).
2. Füge die Form als separate Markierung über das MARK-Makro (Abschnitt 6) hinzu, nicht innerhalb des Glyphen. Markierungen gehen in ihre eigene Distanz, da Formen ein anderes 3D-Profil als die Röhren erhalten (Abschnitt 7.3).
3. Die Form ist die 2D-SDF aus glsl-sdf-shapes, zentriert auf dem Ursprung und passend in [-1, 1], skaliert genau: sdfShape bleibt unverändert.