Handgezeichnete Tinte

Was macht Handgezeichnete Tinte?

Zeichnet ein Bild als eigenständiges animiertes SVG: wackelige Tuschelinien mit variierender Breite, Marker-Washes leicht versetzt zu den Linien, auf cremefarbenem Papier. Flach 2D, Vorder- oder Seitenansicht. Die Linien „kochen“ (das Wackeln wird alle 2 Frames neu gezeichnet), sodass selbst ein stilles Motiv lebendig wirkt, und die Szene kann mit t eine kleine Bewegung hinzufügen. Für eine 3D-, isometrische Version verwende stattdessen den handdrawn-3d Skill. Beschriftungen und Titel verwenden eine integrierte handgezeichnete Strichschrift, die lateinische und vietnamesische Schriftzeichen abdeckt.

Kit: assets/kit.js · Renderer: assets/render.mjs · alle Funktionen: references/kit.md (vor dem Schreiben einer Szene lesen) · gearbeitete Beispiele: examples/ (Tasse, Apfel, Katze, Pflanze, Haus, Mahlzeit).

Einrichtung (einmalig)

Für den PNG/GIF-Export wird @resvg/resvg-js benötigt. Wenn render.mjs meldet, dass es fehlt, führe npm install im Ordner dieses Skills aus. SVG-Ausgabe benötigt nichts.

Vor dem Zeichnen

• Ist es zeichenbar? Wenn das Thema abstrakt ist („Hoffnung“, „Produktivität“, „die Wirtschaft“), zeichne nichts Vages. Sage dies und schlage ein oder zwei konkrete Szenen vor, die es zeigen („ein Sämling, der durch einen Riss im Pflaster drückt“), zeichne dann die, die der Benutzer auswählt.
• Diagramme, Charts, UI, Schaltflächen, interaktive Dinge: nicht dieser Skill.
• Animation: Das SVG läuft immer in einer Schleife (Linienkochen). Füge eine kleine Bewegung hinzu, die zum Motiv gehört (Dampf, ein Schwanzwedeln, ein Blinzeln, wogende Blätter), wenn es passt oder wenn der Benutzer darum bittet; ansonsten reicht das Kochen allein. Ein Einzelbild-SVG nur, wenn der Benutzer ein Standbild anfordert (--still).

Arbeitsablauf

1. Teile und Ansicht. Liste die realen Teile des Motivs auf und wähle die Ansicht: Vorder- oder Seitenansicht. Eine Teekanne: Körper, Deckel, Knauf, Ausguss, Henkel, Fuß; Seitenansicht. Zeichne ausgehend von den realen Teilen (Ränder, Griffe, Deckel, Stiele, Bretter, Fliesen), nicht von einem generischen Klecks mit einem Namen.
2. Skizzieren. Schreibe eine kleine Tabelle in einem Kommentar am Anfang der Szene: Teil, Shape-Aufruf, Box (x, y, b, h), Farbe. Das Motiv füllt etwa 65–80 % des Blattes, zentriert, mit Atemraum. Die Boden-/Tischlinie liegt etwa bei 80–88 % der Höhe.
3. Von hinten nach vorne zeichnen in scene.js mit dem Kit: Schatten → Dinge dahinter → Hauptkörper → Details obendrauf → Beschriftungen. Bevorzuge die vorgefertigten Teile (k.cat, k.person, k.tree, k.haus, k.window, k.leaf…) und ändere deren Optionen, anstatt sie neu zu zeichnen. Verwende k.turned für alles Runde, das man auf einer Töpferscheibe drehen könnte (Tassen, Töpfe, Vasen, Flaschen, Schalen, Lampen). Verwende k.tube für Griffe, Stiele, Schwänze, Arme und Zweige.
4. Rendern und ansehen:

   node <skill>/assets/render.mjs scene.js -o out/scene.svg --png out/scene.png --thumb --grid
   

   Öffne out/scene.png mit dem Read-Tool und sieh es dir an. Die --grid-Überlagerung druckt Koordinaten aus, sodass du ablesen kannst, wo die Dinge tatsächlich sind. Sieh dir auch out/scene-128.png an: Es muss das Motiv bei 128 px noch erkennbar sein.
5. Korrigieren und erneut rendern. Prüfe:
   • Ist das Motiv auf den ersten Blick und bei 128 px erkennbar? Zuerst die Silhouette: Wenn die Kontur nicht „Teekanne“ sagt, rettet kein Detail.
   • Proportionen und Überlappungen: Henkel sitzen an Körpern, Dinge stehen auf dem Boden, nichts schwebt oder überschneidet sich.
   • Licht kommt von oben links (Schattierung/Schraffur auf der unteren rechten Seite).
   • Beschriftungen liegen nicht auf der Zeichnung oder kreuzen andere Linien. Wiederhole 4–5, bis es richtig ist (normalerweise 2–4 Runden). Dann rendere das Finale ohne --grid.

Nie ausliefern, ohne das PNG angesehen zu haben. Liefere die Pfade für SVG (das animierte Bild) und PNG aus und zeige das PNG. Wenn sich die Szene bewegt, überprüfe auch ein paar Frames (siehe Animation).

Stilregeln

• Ein Look: Tusche + flache Marker-Wash. Keine Textur oder Körnung. Keine Verläufe, Leuchteffekte, Schlagschatten, Unschärfe, Deckkraft-Tricks oder SVG-<text> (verwende k.text / k.label / k.title). Kein rohes SVG hinzufügen.
• Farbe: Palettennamen (red, coral, orange, ochre, yellow, sage, green, leaf, teal, sky, blue, navy, lilac, plum, pink, wood, brown, chocolate, grey, stone, charcoal, white, cream, sand, skin, tan). 3–5 Farben pro Bild plus Tusche. Jeder Hex-Wert wird automatisch weichgezeichnet, aber Palettennamen sehen am besten aus.
• Schattierung: shade: true (oder 0.15–0.35) auf Hauptvolumen; hatch: true auf maximal ein oder zwei großen Objekten. Das Licht kommt immer von oben links.
• Linienstärken: Konturen 'outline' (Standard), Innendetails 'detail', kleine Markierungen und Führungslinien 'fine'.
• Süß und rund: Tiere und Pflanzen sind weich und rund, mit großen Köpfen, Punktaugen und kleinen Rouge-Ovalen. Keine scharfe, realistische Anatomie.
• Komposition: ein klares Motiv, zentriert, das den größten Teil des Blattes ausfüllt. Ein Boden-/Tischschatten (k.shadow) unter allem, was auf etwas steht.
• Text: optionaler k.title(...) oben links, plus kurze, kleingeschriebene Randbeschriftungen (k.label) mit Führungslinien, platziert in leerem Randbereich. Niemals Kästen oder Sprechblasen, die über der Zeichnung schweben. Schreibe Beschriftungen in der Sprache des Benutzers. Vietnamesisch wird vollständig unterstützt.
• Blatt: Standardmäßig 1000×1000. Für breite Szenen verwende export const sheet = { width: 1200, height: 900 }. --transparent entfernt das Papier.

Szenenvorlage

// Teekanne, Seitenansicht. Teile: Körper (gedreht), Deckel, Knauf, Ausguss (Röhre), Henkel (Röhre), Schatten
export const sheet = { seed: 1 };
export function draw(k, t = 0) {
  k.shadow(500, 820, 300, 34);
  k.tube([[690, 540], [810, 520], [810, 650], [700, 710]], 34, { fill: 'teal' });           // Henkel (Enden vom Körper verdeckt)
  k.tube([[330, 640], [250, 560], [200, 470]], [60, 26], { fill: 'teal', shade: 0.3 });    // Ausguss
  const pot = k.turned([[150, 0], [230, 70], [250, 180], [210, 300], [170, 330]],
                       { cx: 500, y: 480, fill: 'teal', hatch: true });                    // Körper
  k.ellipse(500, 480, 150, 22, { fill: 'teal', weight: 'detail' });                        // Deckel
  k.blob(500, 445, 30, { squash: 0.8, fill: 'ochre' });                                   // Knauf
  k.label('die gute Teekanne', { x: 640, y: 300, to: [560, 440] });
}

Animation (immer aktiv)

out.svg ist standardmäßig ein animiertes SVG in Schleife: Frames werden per CSS umgeschaltet, kein Skript, funktioniert in Browsern und <img>-Tags (Renderer ohne CSS-Animation zeigen Frame 0). Szenen erhalten t ∈ [0, 1), eine Schleife. Halte es einfach: höchstens ein oder zwei bewegte Dinge (Dampf, ein Schwanzwedeln, ein Blinzeln, wogende Blätter, Rauch) zusätzlich zum automatischen Linienkochen: das Wackeln wird alle 2 Frames neu gezeichnet, sodass selbst ein stilles Motiv lebendig wirkt. Sorge für nahtlose Schleifen der Bewegung mit Math.sin(2 * Math.PI * t). Die vorgefertigten Teile akzeptieren t: k.steam(x, y, { t }), k.cat(..., { animate: true, t }), k.person(..., { wave: true, t }).

node <skill>/assets/render.mjs scene.js -o out/scene.svg --png out/scene.png          # animiertes SVG + PNG-Standbild
node <skill>/assets/render.mjs scene.js -o out/scene.svg --gif out/scene.gif          # + GIF, läuft überall
node <skill>/assets/render.mjs scene.js -o out/scene.svg --still                      # Einzelbild-SVG
     --frames 8 --fps 10 --boil 2 --gif-size 560

Überprüfe ein GIF, indem du dir ein paar Frames ansiehst: ffmpeg -i out/scene.gif -vf "select='not(mod(n\,3))',scale=300:-1,tile=4x1" -frames:v 1 out/frames.png (oder überprüfe das PNG-Standbild, das Frame 0 ist). GIFs sind 256-Farben: halte sie ≤ 600 px breit.