Code-Cartoon

Was macht Code-Cartoon?

Ein Film ist hier eine Webseite. Jede Szene ist eine JavaScript-Datei, die Frame u ihrer eigenen Welt zeichnet; eine kleine Engine spielt die Szenen auf einer aus den aufgenommenen Stimmen erstellten Timeline ab; ein kopfloser Chrome erstellt Screenshots jedes Frames; ffmpeg fügt sie mit einer Mischung aus Stimmen, generierten Soundeffekten und Atmosphäre zusammen. An der Erstellung des Bildes ist kein Bildmodell und kein Videomodell beteiligt.

example/ ist ein auf diese Weise erstellter kompletter Film: DER BALLOON, 2:41, 13 Stile, 16 Szenen. Beginnen Sie einen neuen Film, indem Sie example/ kopieren und seine Szenen ersetzen; die Engine, die Werkzeuge und der Vertrag sind dafür gedacht, unverändert wiederverwendet zu werden.

Die Arbeitsreihenfolge (nicht umstellen)

1. Zuerst das Style-Board (references/styles.md). Ein Standbild pro Kandidatenstil, jedes in einer anderen Technik, alle zeigen denselben Charakter. Stile, die sich eine Palette und eine Schriftart teilen, wirken wie ein Stil; lassen Sie sie sich daher in Palette, Textur, Dimension und Technik gleichzeitig unterscheiden. Lassen Sie das Board genehmigen, bevor Sie mit der Animation beginnen.
2. Geschichte (references/story.md). Ein Trägerobjekt, das in jeder Einstellung vorkommt, und ein Grund für jeden Stilwechsel. Schreiben Sie das Drehbuch mit einem Tag für die Emotion jeder Zeile.
3. Stimmen vor Bildern (references/voices.md). Nehmen Sie jede Zeile auf, dann erstellen Sie die Timeline aus den tatsächlichen Dauern. Szenen werden gegen diese Timeline animiert, niemals umgekehrt.
4. Engine und Vertrag. Verwenden Sie example/balloon.html, example/balloon/film.js, example/tools_balloon.mjs und example/balloon/CONTRACT.md wieder. Lesen Sie den Vertrag, bevor Sie eine Szene schreiben: Er ist kurz, und jede Regel darin existiert, weil ohne sie etwas kaputtging.
5. Szenen (references/styles.md für das Rezept jedes Stils, references/parallel-build.md für den parallelen Bau mehrerer Szenen). Eine Datei pro Szene, draw(u, S) eine reine Funktion von u.
6. Sound (references/sound.md). Jede Szene deklariert ihre eigenen Effekte, Cue-Zeiten und Atmosphäre; das Werkzeug generiert und mischt sie.
7. Szene für Szene rendern, dann zusammenfügen. bash balloon/final.sh rendert ein MP4 pro Szene, sodass bei einer geänderten Szene nur diese neu gerendert wird.
8. Überprüfen der fertigen Datei (references/checking.md). Sie können nicht sehen oder hören, also überprüfen Sie, was messbar ist, und sagen Sie klar, was nicht überprüft wurde.

Regeln, die für jede Szene gelten

• Ein Frame ist eine reine Funktion der Zeit. Frames werden einzeln und manchmal in falscher Reihenfolge gerendert. Kein Zustand vom vorherigen Frame, keine Uhr, kein ungesäter Zufall. Teure, feste Arbeit wird in init erledigt.
• Der Träger öffnet und schließt jede Szene an derselben Bildschirmposition (im Beispiel: der rote Ballon bei (700, 560), Radius 64). Die nächste Szene wird durch einen Kreis enthüllt, der genau aus dieser Stelle herauswächst, was jeden Übergang kostenlos zu einem Match-Cut macht.
• Der Held behält seine Proportionen in jedem Stil. Ändern Sie die Darstellung, niemals die Form.
• Wer spricht, bewegt sich, und niemand sonst. Es gibt keine Lippen-Synchronisation; ein Hüpfer, ein Schnabel oder ein blinkender Cursor reicht aus.
• Zahlen auf dem Bildschirm sind echt. Ein Zähler, der 600 Zeilen oder 512 Strahlen anzeigt, zeigt, was der Frame tatsächlich verwendet hat.
• Bewegung hat eine Ursache: Antizipation vor einem Sprung, Stauchung bei der Landung, die Auswirkung auf den Frame des Aufpralls, eine dritte bis eine halbe Sekunde Stille vor einer Pointe.
• Untertitel gehören zur Engine; Szenen halten Gesichter und Hände aus diesem Bereich fern.

Befehle (aus dem Filmordner ausführen)

npm install                                             # three + puppeteer-core; set CHROME_PATH if Chrome is not in the default place
node tools_styles8.mjs                                  # das Style-Board: ein Standbild pro Stil -> out/styles8/board.jpg
python tools_balloon_vo.py                              # Stimmen + Timeline (benötigt ELEVENLABS_API_KEY); --timeline baut nur die Timeline neu
node tools_balloon.mjs --scene=book --sheet=auto        # 8 Standbilder einer Szene + ein gekacheltes Blatt
node tools_balloon.mjs --glide=book                     # die Endpose einer Szene
node tools_balloon.mjs --film --sheet=13.1,24.8         # Standbilder des gesamten Films zu diesen Sekunden (an Szenengrenzen verwenden)
bash balloon/final.sh                                   # jede Szene rendern, Sound, zusammenfügen, muxen; `final.sh comic pixel` rendert nur diese neu

Benötigt Node 18+, Chrome, ffmpeg, Python 3 mit requests numpy soundfile pyloudnorm. Das Bild benötigt keinen API-Schlüssel; Stimmen und Sound benötigen einen ElevenLabs-Schlüssel.

Referenzdateien

Datei	Lesen, wenn ...
references/styles.md	Sie Stile auswählen oder eine Szene in einem der dreizehn Stile bauen
references/story.md	Sie das Drehbuch schreiben
references/voices.md	Sie besetzen, aufnehmen, timen
references/sound.md	Effekte, Atmosphäre, der Mix
references/checking.md	bevor Sie sagen, eine Szene oder der Film sei fertig
references/parallel-build.md	mehrere Szenen gleichzeitig gebaut werden oder der Rechner eine schwache GPU hat
example/balloon/CONTRACT.md	immer, vor der ersten Szene