ouerf-man/hand-drawn-video

Handgezeichnetes Video

Alles auf dem Bildschirm wird von p5.brush gemalt (echte Stift-, Bleistift- und Aquarelltexturen, auf der GPU gezeichnet) innerhalb eines HyperFrames-Projekts, und jeder Frame ist eine reine Funktion der Zeit, sodass die Wiedergabe exakt ist. Die unten aufgeführten Anwendungsfälle sind Ausgangspunkte, keine Grenzen: Jede handgezeichnete Idee funktioniert. Pfade in dieser Datei sind relativ zum Ordner dieses Skills.

1. Einrichtung (einmalig)

• Node.js 18+ (HyperFrames läuft über npx).
• Das Skill-Python: ~/.cache/hand-drawn-video/venv/bin/python (Windows %USERPROFILE%\.cache\hand-drawn-video\venv\Scripts\python.exe), erstellt durch Schritt 5 von INSTALL.md mit Python 3.10-3.12. Verwenden Sie es für jeden Befehl unten. Wenn es fehlt, führen Sie die Schritte 4-7 von INSTALL.md aus. Führen Sie niemals pip install in das systemweite Python aus (Homebrew-Python lehnt dies ab), und auf dem Mac lautet der Befehl python3, nicht python.
• Internet: Beim ersten Mal lädt scripts/brushlib.py p5.brush (festgelegte Version, SHA-256 geprüft) in kit/.cache/ herunter; jedes Projekt erhält eine Kopie. Renderings laden auch GSAP von cdn.jsdelivr.net, daher wird für das Rendern Internet benötigt.
• Der Anwendungsfall redraw-video benötigt mehr (MediaPipe, ffmpeg): siehe seine USECASE.md. Erledigt, wenn: npx --yes hyperframes --version eine Version ausgibt und <Skill-Python> scripts/brushlib.py p5.brush ... ok ausgibt.

2. Wählen Sie den Anwendungsfall

Anwendungsfall	Was erstellt wird	Starten mit
explainer	Eine Sketchnote, die Schritte erklärt: Stiftzeichnungen, Pfeile, Lavierungen, handschriftliche Beschriftungen, roter Marker-Höhepunkt	usecases/explainer/
story	Eine kurze animierte Geschichte: eine Doodle-Figur, die agiert (Quetschen, Antizipation, Augen, Brauen), eine in Aquarell gemalte Welt	usecases/story/
redraw-video	Ein echter Clip einer Person, der 12 Mal pro Sekunde neu gezeichnet wird (Siebdruck oder Aquarell), mit einem Real-zu-Gezeichnet-Überblender	usecases/redraw-video/
blank	Alles andere oder ein neuer Stil: eine Stiftlinie, eine Lavierung, eine Schraffur, Handschrift und das Zeichenset	usecases/blank/

Lesen Sie die USECASE.md des gewählten usecases/<name>/, bevor Sie etwas schreiben. Nicht in der Tabelle: Starten Sie mit blank und lesen Sie references/p5brush-notes.md. Erledigt, wenn: der Anwendungsfall gewählt und der Inhalt vereinbart ist (die Worte, die Schläge, die Länge, 9:16 oder 16:9).

3. Projekt starten

<Skill-Python> scripts/new_project.py <Anwendungsfall> "<Dokumente>/<neuer Ordner>"

Legen Sie das Projekt im Benutzerordner "Dokumente" ab (ein absoluter Pfad; unter Windows kann er sich in OneDrive befinden), niemals im Skill-Ordner: Ein Update des Skills ersetzt diesen Ordner. (--list zeigt die Anwendungsfälle.) redraw-video ist die Ausnahme: Es führt sein eigenes Werkzeug aus (USECASE.md). Erledigt, wenn: der Ordner index.html, assets/vendor/brush.js (p5.brush, für den HyperFrames-Lint gepatcht) und assets/fonts/ enthält.

4. Machen Sie es zu Ihrem: Regeln für gute handgezeichnete Arbeit

Diese gelten für jeden Anwendungsfall und jeden neuen Stil.

1. Jeder Frame ist eine reine Funktion der Zeit. renderAt(t) löscht und malt bei jedem hf-seek alles neu. Kein Math.random(), Date, Timer oder Animationsframes.
2. Ein Saatwert pro Element (sd(id) vor jedem Element). Ein Strich, der noch wächst, darf die Textur der Striche danach nicht verändern.
3. Der Stift führt, die Farbe folgt. Die Umrisslinie wird zuerst gezeichnet; die Lavierung blendet kurz danach ein; die Schraffur wird mit brush.clip von links nach rechts aufgedeckt. Farbe geht in der Farb-Reihenfolge unter die Linien.
4. Zeichnen Sie in Handgeschwindigkeit. Ein Strich dauert 0,2–0,8 s mit langsamem Ein- und Auslaufen. Handschrift etwa 0,04 s pro Buchstabe. Nichts erscheint auf einmal.
5. Eine Werkzeugfamilie pro Video. Zum Beispiel Stift + Aquarell + ein roter Marker. Drei oder vier Tinten plus die Papierfarbe. Rot nur für die eine Sache, die man sehen soll.
6. Unvollkommen, aber jede Frame die gleiche Unvollkommenheit. Überschießen Sie Ecken und lassen Sie Linien mit festem Sinusrauschen wackeln, niemals neuer Zufall pro Frame. Ausnahme: Ein absichtliches „Kochen“ (Linien schimmern), mit einem neuen Saatwert pro Zeichnung, gehalten für 2–3 Frames (8–12 Zeichnungen pro Sekunde).
7. Einfache Formen liest man schneller als Details. Eine Figur ist ein Kreis-Kopf, Punkt-Augen und eine Mundlinie; sie agiert mit ihrem Körper (Quetschen, Antizipation, Durchschwung) und ihren Augen und Brauen.
8. Wörter werden handschriftlich geschrieben, kurz und neben der Zeichnung, niemals darauf. Die Kit-Schrift ist Caveat (Latein). Für Arabisch fügen Sie eine OFL-Arabisch-Schrift zu assets/fonts/ hinzu und deklarieren Sie sie mit @font-face.
9. Halten Sie es kurz und sicher. 5–12 s pro Clip. Bei 9:16 halten Sie wichtige Zeichnungen und Wörter zwischen etwa 170 px vom oberen und 400 px vom unteren Rand (Plattform-Buttons und Untertitel). Erledigt, wenn: die Szene das Vereinbarte sagt und die neun Regeln befolgt.

5. Prüfen und rendern

• npx --yes hyperframes lint: 0 Fehler. Eine „Datei zu groß“-Warnung ist für Ein-File-Szenen in Ordnung.
• npx --yes hyperframes preview zum Durchklicken oder rendern und Frames vom Anfang, der Mitte und dem Ende betrachten.
• npx --yes hyperframes render . -o renders/video.mp4.
• Überprüfen Sie die Frames gegen die Regeln in Schritt 4 und die eigenen Prüfungen des Anwendungsfalls; korrigieren und erneut rendern. Erledigt, wenn: renders/video.mp4 existiert und seine Frames die Prüfungen bestehen.

6. Einen Anwendungsfall hinzufügen (Skill erweitern)

Erstellen Sie usecases/<name>/ mit:

• index.html: Eine funktionierende HyperFrames-Komposition, die assets/vendor/brush.js und Schriftarten aus assets/fonts/ lädt (kopieren Sie blank als Start).
• USECASE.md: Wann es zu verwenden ist, was in der Vorlage zu ändern ist und eigene Prüfungen. new_project.py findet es automatisch. Fügen Sie eine Zeile in der Tabelle von Schritt 2 hinzu.

Grenzen

• p5.brush benötigt WebGL2: HyperFrames rendert in Chrome, das WebGL2 hat.
• Aquarellfüllungen können nicht ganz dunkel werden (wie echtes Aquarell): Verwenden Sie eine Lavierung für dunkle Bereiche. Weitere Fallstricke in references/p5brush-notes.md.
• Der Rotoscoping-Anwendungsfall funktioniert am besten mit einer Person, frontal oder im Dreiviertelprofil.