Code-gezeichnete Filme
Dieses Skill erstellt eine einzige HTML-Seite, die Bild f aus (f, seed) zeichnet, einen auf die gleiche Weise berechneten Soundtrack und ein MP4. Worum es im Film geht, wie er aussieht und wie er sich bewegt, liegt bei Ihnen. Das Skill enthält drei Komponenten: die Absicht, die Sie zuerst aufschreiben, den Geschmack, nach dem Sie urteilen, und die Prüfungen, die sagen, ob der fertige Film die Absicht erfüllt hat.
Einrichtung
Führen Sie bash assets/doctor.sh einmal auf einem neuen Rechner aus. Es prüft auf Chrome (oder einen CHROME-Pfad), Node 22 oder neuer, ffmpeg und Python 3 mit numpy und Pillow und gibt Hinweise, wie Fehlendes nachinstalliert wird.
1. Die Absicht schreiben
Kopieren Sie assets/intent.md neben die Seite als piece.intent.md. Füllen Sie zuerst den Kern und das Gefühl aus: was ein Neuling nach einmaligem Ansehen sagen kann und was er fühlt, wenn der Film endet. Lassen Sie den Rest, bis eine Skizze ausgewählt ist, denn eine zuerst geschriebene Karte fixiert die Idee, und die Skizzen können nur noch ihr Aussehen ändern. So wurden aus den drei Skizzen des Hauptbuch-Films eine Idee in drei Häuten.
Sobald eine Skizze ausgewählt ist, vervollständigen Sie die Karte. Ihre bewerteten Zeilen sagen, was wir verfolgen, den Punkt, den nur dieses Thema liefern konnte, das Aussehen und warum, ob und wie Text erscheint, die Galeriefilme, von denen es lernt, und wie das Ende auf den Anfang antwortet. Ihre gemessenen Zeilen geben Länge, Tempo, Klang und Takt an. Jede spätere Entscheidung dient dieser Karte. Wenn die Arbeit zeigt, dass die Karte falsch war, ändern Sie die Karte und sagen es.
2. Nach der Galerie urteilen
reference/gallery.md enthält 29 Filme, bei denen Claude jedes Bild in Code gezeichnet hat, darunter Musik, Erklärungen, Geschichten und Experimente, und was die geliebten gemein haben:
- Es gibt eine Sache, die durch jede Szene verfolgt wird.
- Jedes Bild sagt etwas. Keins ist nur zur Abwechslung da.
- Es endet dort, wo es begann, verändert.
- Etwas zeigt, wo wir sind: ein Messgerät, ein Zähler, eine Uhr.
- Der Look ist ein echtes Material, mit seinen Fehlern verwendet, für diese Geschichte gewählt.
- Ton und Bild sind eins.
- Text ist selten, groß und Teil der Welt.
- Es hat einen Standpunkt und etwas Wärme.
- Es ist so kurz wie die Idee.
Dies sind Urteile, keine Regeln. Brechen Sie eine, wenn die Karte sagt, warum.
reference/taste.md enthält die Korrekturen, die Kartik, der Autor des Skills, während der Entwicklung vorgenommen hat: ein Ausgangsgeschmack, nicht Ihrer. Wenn sie und die Galerie uneins sind, sagen Sie es und fragen die Person, für die der Film ist.
3. Das Ergebnis prüfen
Melden Sie alle drei Ebenen im Lieferhinweis.
- Mängel blockieren den Build. Die Seite parst, läuft und zeichnet jedes Bild jedes Mal gleich. Kein Bild blinkt oder springt von einem Schnitt ab. Der Mix liegt zwischen -28 und -8 dBFS und clippt nicht.
check.py,seamcheck.py,verify.pyundbuild.sherzwingen dies. - Die Absicht wird gemessen.
python3 assets/verify.py piece.mp4prüft die gemessenen Zeilen der Karte. Ein Fehlschlag bedeutet, dass der Film oder die Karte falsch ist. Beheben Sie eins und sagen Sie, welches. - Der Anschauungstest ist Ihrer. Jede-Zeile-zweimal bestand jede Zahl und war trotzdem schlecht. Beantworten Sie die fünf Fragen, die
verify.pyausgibt: als Neuling nacherzählen, jede Kachel benennen, ohne Ton ansehen, neben seinem Galeriefilm ansehen, das letzte Bild beurteilen.
lookcheck.py und soundcheck.py blockieren nie. Sie beschreiben Tempo, Farbe, Synchronisation und Takt, und Sie lesen sie gegen die Karte.
Arbeitsablauf
Jeder Schritt hat eine Berichtszeile, sodass er nicht abgehakt werden kann, ohne zu sagen, wie.
- Wenn sie eine Referenz geteilt haben, zerlegen Sie sie zuerst. Ein Clip, ein Standbild oder eine HTML-Seite zählen. Lesen Sie
reference/references.md. Berichten Sie, um welche Form es sich handelt, was sie tut, welche Lücken schließbar sind und was Sie übernehmen und weglassen. - Schreiben Sie Kern und Gefühl. Nur diese zwei Zeilen. Berichten Sie sie.
- Sehen Sie sich die zwei oder drei nächsten Galeriefilme ganz an. Berichten Sie, was Sie von jedem mitnehmen und was Sie nicht kopieren werden.
- Skizzieren Sie drei verschiedene Geschichten als Standbilder. Jede ist eine andere Sache, die passiert, in einer Zeile erzählt, nicht dieselbe Idee in drei Looks. Mindestens eine sollte eine Welt sein, in der der Zuschauer leben könnte, kein Diagramm. Zeichnen Sie jede im fertigen Look mit der Engine und der Druckoberfläche, niemals als Drahtgittermodell. Eine Skizze überspringt die Mängelprüfungen, nicht die Handwerkskunst.
assets/sketchcheck.pyweist eine flache Skizze zurück und eine kopierte, wenn Sie die genehmigten Bilder mit--refsübergeben. Zeigen Sie es der Person, für die es ist, und lassen Sie sie wählen oder mischen. Berichten Sie die Zeile jeder Geschichte. Vervollständigen Sie dann die Karte. - Schreiben Sie die Worte, falls es welche gibt. Ein Absatz in einer Stimme, bevor Code geschrieben wird, gespeichert als
piece.chain.txt. Lesen Sie „Worte, die wie eine Stimme klingen" inreference/story.md. Berichten Sie den Absatz und sein Bindungsverhältnis. - Planen Sie es. Die Beats in Reihenfolge, was jedes Bild in einer Zeile bedeutet, was zeigt, wo wir sind, und das Ende. Berichten Sie den Plan. Es ist ein Plan, kein Vertrag.
- Bauen Sie die Seite. Beginnen Sie mit
assets/engine.htmloder schreiben Sie Ihre eigene Seite gemäß dem unten stehenden Vertrag. Überprüfen Sie jede Szene einzeln, bevor Sie sie verbinden. Berichten Sie, was Sie nach dem Ansehen neu gezeichnet haben. - Machen Sie den Ton. Schreiben Sie zuerst die Melodie, in
TUNEundSECTIONS, dann die vier bis acht Akzente für die Wendungen der Geschichte. Oder bringen Sie Ihr eigenespiece.score.py, einepiece.wav, die die Seite erzeugt, oder Stille. Berichten Sie das Melodieblatt, dasscore.pyausgibt, und warum der Ton zur Karte passt. - Bauen.
assets/build.sh piece.html out.mp4.ROUGH=1davor macht einen Entwurf, der früh gezeigt werden kann. Berichten Sie die Zahlen. - Prüfen. Alle drei Ebenen. Berichten Sie jede.
- Als neue Datei liefern. Überschreiben Sie niemals den letzten Build.
Zwei Looks in einem Film
Ein Film kann zwischen zwei Renderern wechseln, z. B. Riso-Szenen und einem Tinten-Hauptbuch. Geben Sie dem zweiten einen eigenen Gültigkeitsbereich, zeichnen Sie seine Akte mit der Plattenoption { raw: (ctx, u, f, size) => {} } und setzen Sie seine Schnitte in EXTRA_CUTS.
assets/examples/parcel42-day/ tut genau dies. Es ist auch das kanonische Arbeitsbeispiel des gesamten Arbeitsablaufs. Lesen Sie daher seine README, und lesen Sie es für die Methode, niemals für den Look.
Der Seitenvertrag
Jede Seite, die dies erfüllt, baut und prüft. Sie setzt const FPS = n. In ?capture=1 setzt sie window.__frames auf die Bildanzahl und window.__render(f), um Bild f jedes Mal gleich zu zeichnen, und setzt dann ihren Titel auf capture ready N. Ihre erste Skriptzeile schreibt jeden Fehler in document.title, sodass ein Absturz nicht wie eine leere Seite aussehen kann.
Seiten, die auf der Engine basieren, erhalten auch ?play=1, ?f=N, ?grid=1, ?scene=id und ?cuts=1, und score.py liest ihre Akte aus plate().
Die Dateien
| Datei | Was es ist |
|---|---|
assets/intent.md | die Absichtskarten-Vorlage |
assets/engine.html | ein optionaler Start: Bildraster, Akte und Einstellungen, Szenenbibliothek, Bewegungen, eine Riso-Presse, der Handschriftstift, drei Demowelten |
assets/score.py | die berechnete Partitur auf dem Taktgitter der Seite, mit Stück-spezifischer Tonart, Harmonie, Klangfarbe, Swing und Ende |
assets/build.sh | Gate, Aufnahme, Nähte, Partitur, Kodierung, Messung, Prüfung, in einem Befehl |
assets/verify.py | der Film gegen seine Absichtskarte, plus Lautstärke und Clipping, dann die Anschauungstest-Fragen |
assets/check.py | das Seiten-Gate: Parsen, Fehlerbehandlung, Modi, Raster, Rendern |
assets/seamcheck.py | Blitze, Abspringen von einem Schnitt, Ruckeln innerhalb einer Bewegung, ein verankerter Punkt, der driftet |
assets/sketchcheck.py | die Geschichtsskizzen: nicht flach, keine Kopie genehmigter Bilder (--refs), keine verbotene Welt (--world), kein übrig gebliebener Stummel |
assets/lookcheck.py, assets/soundcheck.py | Messungen des Bildes und des Tons, gelesen gegen die Karte und die Galerie |
assets/printcheck.py | ob ein Bild gedruckt oder berechnet aussieht, gegen ein Referenzbild. Zentriert ein breites Bild auf ein Quadrat |
assets/refpage.mjs | zerlegt eine Referenz, die eine HTML-Seite ist: ihre Palette, Markierungen, Ebenen und Audiokit, während sie zeichnet, plus ein MP4, damit die Clip-Prüfungen darauf funktionieren |
assets/capture.mjs | Bildaufnahme über CDP. build.sh ruft es auf |
assets/capture-range.mjs, assets/capture-par.sh | Aufnahme in beliebiger Breite und Höhe, in mehreren Chromes gleichzeitig. Für 16:9 und alles über eine Minute |
assets/doctor.sh | ist dieser Rechner bereit: Chrome, Node 22+, ffmpeg, numpy, Pillow |
assets/examples/parcel42-day/ | die Quelle des genehmigten Films, mit einer README, wie er gebaut wurde |
assets/example-print-still.html | das Riso-Oberflächenmodell |
Wann was lesen
Lesen Sie jede Datei ganz, mit einem Aufruf pro Datei. Ein Codex-Durchlauf las drei oder vier Skill-Dateien pro Aufruf unter einem Ausgabelimit. Es verlor etwa 13k Tokens aus der Mitte dieser Lesevorgänge, ohne es zu bemerken, einschließlich der Hälfte von gallery.md. Wenn ein Lesevorgang sagt, dass Tokens abgeschnitten wurden, lesen Sie diese Datei erneut für sich.
- Vor der Absichtskarte und bevor Sie etwas zeigen, lesen Sie
reference/gallery.md. Dannreference/taste.md. - Wenn sie einen Referenzclip, ein Standbild oder eine HTML-Seite teilen, lesen Sie
reference/references.md. - Wenn Sie die Geschichte planen oder Bildunterschriften schreiben, lesen Sie
reference/story.md. - Wenn Bild und Ton ein gemeinsames Taktgitter haben, lesen Sie
reference/time.md. - Wenn Sie Übergänge oder die Kamera planen, lesen Sie
reference/moves.md. - Wenn der Look Riso oder ein anderer Druck ist, lesen Sie
reference/press.md, dannreference/surface.mdvor dem Anpassen der Textur. - Wenn Sie Handschrift hinzufügen, lesen Sie
reference/hand.md. - Wenn Sie den Ton machen, lesen Sie
reference/sound.md. - Wenn Sie bauen, lesen Sie
reference/export.md. - Wenn der Film über eine Minute läuft, lesen Sie das Ende von
reference/export.md. - Wenn der Film eine vertonte Lektion für YouTube ist, verwenden Sie das
lesson-film-Skill, das auf diesem aufbaut. - Die Fallen, jede Art, wie dies bisher gebrochen ist, als Checklisten nach Phase.
Vor der Karte und den Skizzen und bevor Sie etwas zeigen,
reference/traps-story.md. Vor dem Bau der Seite,reference/traps-page.md. Wenn Sie Bewegungen, die Kamera oder das Taktgitter planen,reference/traps-motion.md. Wenn der Look Druck ist,reference/traps-print.md. Wenn Sie den Ton machen,reference/traps-sound.md. Vor dem ersten vollständigen Build,reference/traps-build.md.
Dieses Skill ändern
Zustand der Absicht und des Urteils, und prüfen Sie das Ergebnis gegen die Absicht. Machen Sie niemals den Stil eines Films zur Regel: so wurde jedes Stück zur Kopie einer Referenz. Eine Lektion geht in die eine Datei, die sie besitzt, und jede andere Datei verweist in einer Zeile darauf. Ein neuer Film, den jemand genehmigt, kommt in den „Unsere"-Abschnitt der Galerie, mit einer Begründung, warum er funktioniert.
Entliehen, mit Dank
Das Modell der flachen Füllung mit beschnittener Oberfläche und die Form von wob, crayon, hatch, grain, dotScreen und scribble stammen aus dem hand-drawn-canvas-animation-Skill von alesha-pro (MIT, github.com/alesha-pro/tools). Seine Regel, dass Textur eine Oberfläche und kein Farbverlauf ist und dass die Füllung einer Form und ihre Kontur niemals zusammenfallen dürfen, ist das, was den Druck-Look dieses Skills ermöglicht hat.
Wie gut aussieht
Ein Neuling sieht es einmal an und erzählt es nach, und die Nacherzählung stimmt mit der Kernzeile überein. Jede Kachel des Kontaktabzugs ist ein Bild von etwas, das etwas bedeutet. Es könnte neben den Galeriefilmen stehen, ohne eine Kopie von einem zu sein. Das letzte Bild beendet es. Die Mängel sind null, die Karte stimmt, und Sie haben es trotzdem angesehen.