xiaojinyu0426/doodle-music-reel

Doodle-Musik-Reel

Das Format: ein Blatt Rasterpapier und eine schwarze Linie, die darüber gleitet. Jemand zeichnet eine Welle und die Linie spielt sie ab. Sie fügen einen Hügel hinzu, und ein zweites Instrument setzt ein. Ein Stiel wächst und man hört ihn klettern. Am Ende gibt es ein vollständiges Bild und ein vollständiges Lied, und beide stammen von denselben Strichen. Niemand spricht und es gibt nichts zu lesen. Das Referenz-Reel erzielte 12,5 Millionen Aufrufe.

Warum es funktioniert: Zwei Fragen laufen gleichzeitig ab: „Was wird es sein?“ und „Wie wird es klingen?“. Jeder neue Strich beantwortet einen Teil beider Fragen, sodass niemand wegwischt, bis das Bild fertig ist, und die letzten 10 Sekunden sind der Höhepunkt.

template/ enthält die Engine und 5 fertige Zeichnungen. Kopiere es, schreibe eine neue Zeichnung, führe einen Befehl aus.

Wie das Format funktioniert

Bild für Bild vom Referenz-Reel gemessen. Die Engine folgt diesen Zahlen.

Teil	Wie es sich verhält
Abspielkopf	Gleitet von links nach rechts, springt dann zurück. Ein Durchlauf entspricht 2 Takten: 4,8 s bei 100 bpm
Höhe der Linie	Tonhöhe. 3 Oktaven von unten nach oben in einer pentatonischen Tonleiter, 15 Noten
Einrasten	Die Linie rastet auf die nächstgelegene Note ein und gleitet dort in etwa 60 ms hin, ohne neuen Angriff
Jede Überschneidung	Eine Stimme, mit einem schwarzen Punkt darauf. Ein Kreis, der vom Abspielkopf gekreuzt wird, sind 2 Noten gleichzeitig
Wann ein Strich beginnt zu klingen	Erst wenn der Stift den Abspielkopf passiert hat. Zeichnen allein erzeugt keinen Ton
Farbe	Jede Farbe ist ein Instrument. Alle sind weiche Töne, nahe an einer reinen Sinuswelle
Lautstärke	Bleibt flach, während sich Stimmen aufstapeln, etwa -16 dB
Reihenfolge	Eine Welle über die Seite, dann die große Form, dann Details, mit 1 oder 2 Durchläufen des Abspielkopfs zwischen den Schichten und etwa 2 Durchläufen am Ende ohne Neues

Schritte

1. Das Thema ermitteln. Wenn der Benutzer nicht gesagt hat, was gezeichnet werden soll, biete 3 aus drawings.md an, beginnend mit etwas, das wächst. Ein Benutzername in der Ecke ist optional und die meisten Reels haben keinen – füge ihn also nur hinzu, wenn danach gefragt wird.
2. Die Vorlage kopieren: cp -r ~/.claude/skills/doodle-music-reel/template ~/doodle-reel && cd ~/doodle-reel && npm i puppeteer
3. Die Zeichnung schreiben unter drawings/<name>.js. Lies zuerst drawings/sunflower.js, es ist das Vorbild. Regeln stehen unten.
4. Das Lied lesen: node make.cjs drawings/<name>.js --check. Du kannst es nicht hören, daher ist diese Notentabelle, wie du es liest. Behebe alle Warnungen. Siehe „Die Notentabelle lesen“.
5. Es ansehen: node make.cjs drawings/<name>.js --stills 4,12,20,30,40 schreibt Bilder nach out/<name>-stills/. Wähle Zeiten über die gesamte Videolänge, die in der ersten Zeile der Notentabelle angezeigt wird, wobei die letzte nach dem finalen Strich liegt. Öffne alle. Prüfe, dass die Zeichnung als das erkennbar ist, was sie sein soll, nichts vom Rand läuft und sich Striche nicht versehentlich überschneiden.
6. Rendern: node make.cjs drawings/<name>.js schreibt out/<name>.mp4 (etwa 1 Minute).
7. Ein Kontaktblatt des Endergebnisses erstellen und es ansehen, bevor du es übergibst: ffmpeg -i out/<name>.mp4 -vf "fps=1/3,scale=216:-1,tile=7x2" -frames:v 1 out/sheet.jpg
8. Den Benutzer auffordern, mit eingeschaltetem Ton zu hören. Du kannst die Noten lesen, aber du hörst nicht den Mix, also haben ihre Ohren das letzte Wort.

Eine Zeichnung schreiben

DRAW((E) => ({
  name: 'Schnecke',       // der Ausgabedateiname
  key: 'D',            // eine beliebige Tonart: C, C#, D, Eb, E, F, F#, G, Ab, A, Bb, B
  scale: 'pentatonic', // pentatonic (sonnig), minor (melancholisch), major (7 Töne, kann kollidieren)
  bpm: 100,            // ein Durchlauf ist 8 Schläge
  hold: 2,             // Durchläufe am Ende ohne Neues
  // handle: '@yourapp',
  steps: [
    E.stroke('blue', E.wave(0, 1000, 1012, 34, 4), { speed: 430 }),
    E.wait(1.2),       // Sekunden, oder E.wait('wrap'), um auf den nächsten Durchlauf zu warten
    E.stroke('green', [[500, 1000], [490, 800], [510, 600]], { speed: 200, width: 12 }),
  ],
}))

Die Seite ist 1000 breit und 1320 hoch, wobei y = 0 oben ist. x ist, wann eine Note spielt, y ist welche Note.

Punkte und Formen. Gib einem Strich 4-8 Punkte, und er wird zu einer glatten handgezeichneten Kurve.

• E.wave(x0, x1, y, amp, bumps, seed) eine wellige Linie quer
• E.circle(cx, cy, r, startDeg, seed) und E.oval(cx, cy, rx, ry, startDeg, seed) handgezeichnet, wobei das Ende über den Anfang hinausläuft. startDeg gibt an, wo der Stift aufsetzt: -90 ist oben, 0 ist rechts. Der Standardwert ist -100
• E.leaf(x0, y0, x1, y1, fat) eine Schleife von der Basis zur Spitze und zurück
• E.line(x0, y0, x1, y1) und E.arc(cx, cy, r, deg0, deg1)
• E.path(svgPathString, { fit: [x0, y0, x1, y1] }) ein beliebiger SVG-Umriss, gezeichnet mit { sharp: true }
• Alles andere ist eine Liste von Punkten, die du selbst schreibst. Für eine Wolke kopiere die 10 Punkte aus sunflower.js und verschiebe sie

Strich-Optionen. speed in Einheiten pro Sekunde (Standard 520). gap ist die Pause danach (Standard 0,22). width in Pixeln (Standard 10). sharp: true behält Ecken bei. closed: true verbindet das Ende mit dem Anfang. wobble ist das Zittern der Hand (Standard 2,2, 0 ist lineallinealgerade).

Farben (jede ist ein Instrument). ink, red, orange, yellow, leaf, green, sky, blue, purple, pink, brown.

Höhen in der pentatonischen Tonleiter. Dies sind die 15 Schritte, 88 Einheiten voneinander entfernt, für die Tonart D. Andere Tonarten verschieben die Namen und behalten die Höhen bei.

y	Note	y	Note	y	Note
0	D6	440	D5	880	D4
88	B5	528	B4	968	B3
176	A5	616	A4	1056	A3
264	F#5	704	F#4	1144	F#3
352	E5	792	E4	1232	E3
				1320	D3

Die Linie zwischen zwei Noten ist die Hälfte: 1012 ist zwischen A3 und B3, und 1100 ist zwischen F#3 und A3. major hat 21 Schritte statt 15, also lies seine Höhen aus der Notentabelle ab.

Die Regeln, die es gut machen

Der erste Strich kreuzt die ganze Seite auf der Linie zwischen zwei Noten. E.wave(0, 1000, 1012, 34, 4) pendelt zwischen A3 und B3 für das gesamte Video. Es ist der Grundton des Liedes. Wenn es auf einer Note sitzt, dröhnt es, und wenn es auf halbem Weg stoppt, hat das Lied ein Loch.

In Schichten aufbauen, tief vor hoch. Grundton, dann die große Form in der Mitte der Seite, dann Details oben. Jede Schicht ist eine neue Farbe. Warte 1 oder 2 Durchläufe nach einer Schicht, damit die Leute hören, was sie hinzugefügt hat.

Zeichne, was langsam wächst. Geschwindigkeit 170-250 bei einem Stiel oder Stamm, damit die Leute zusehen, wie er klettert. Geschwindigkeit 400-500 bei Umrissen. Geschwindigkeit 250-350 bei kurzen Strichen.

Formen sind Klänge.

• Eine lange sanfte Linie ist eine gehaltene Melodie.
• Eine fast senkrechte Linie ist eine schnelle Notenfolge, das „Whoop“, wenn der Abspielkopf auf einen Stiel trifft.
• Ein Kreis sind zwei Noten, die sich öffnen und schließen. Kleine sind schnelle Zwei-Noten-Treffer, große sind eine ganze Phrase.
• Ein kurzer Strich ist eine Note. Striche auf den Schlaglinien (alle 125 quer) erzeugen einen Puls. Der untere Rand der Seite ist Bass, der obere ist Funkeln.

Bleibe bei 10 gleichzeitig gehaltenen Stimmen oder weniger. Die Überprüfung gibt die Anzahl aus, und wenn sie überschritten ist, benennt sie die Striche, die sie verursachen. Die Stimmenanzahl steigt mit jedem Strich, der über demselben x liegt – das Stapeln von Formen in einer Spalte verursacht dies ebenso wie ein Umriss mit tiefen Wellen, da jede Welle, die im x zurückläuft, Stimmen hinzufügt. Ab 10 wird es zu Matsch. Verschiebe eine Form seitlich, mache die Wellen flacher oder unterteile einen Strich.

Halte es bei 30-50 Sekunden. Unter 30 kann das Lied nicht aufgebaut werden, und über 50 gehen die Leute vor dem Ende. Die Länge wird für dich berechnet: der letzte Strich, aufgerundet auf das Ende dieses Durchlaufs, plus hold Durchläufe. Sie ändert sich also mit der Zeichnung und endet immer genau, wenn ein Durchlauf endet.

Es muss wie eine Kinderzeichnung aussehen. Einfach, erkennbar, ein paar Farben. Wenn es eine Beschriftung braucht, zeichne etwas anderes.

Die Notentabelle lesen

--check gibt eine Zeile pro Strich aus: Farbe, wann er gezeichnet wird, wie weit er läuft, wie viele Stimmen er erzeugt und welche Noten er spielt. Achte auf:

• Strich #1 hat 2 oder mehr Noten und läuft über x 0-1000.
• Die Striche verteilen sich über die tiefen, mittleren und hohen Noten. Wenn alles in einer Oktave sitzt, verschiebe einige Formen nach oben oder unten auf der Seite.
• Eine Form, die du als Melodie gemeint hast, hat 3 oder mehr Noten. Eine lange Linie mit einer Note ist ein Drohnen. Gib ihr mehr Höhe oder verschiebe sie, sodass sie eine Notenlinie kreuzt.
• „Stiller Teil des Durchlaufs“ ist 0 oder nahe 0.
• Der letzte Strich endet etwa 2 Durchläufe bevor das Video endet.

Fehler beheben

• Eine Zeichnung sieht falsch aus: Ändere die Punkte und führe --stills erneut aus. Es dauert Sekunden, also mach ein paar Durchläufe.
• Ein Abschnitt klingt dünn: Füge eine Schicht Striche oder eine tiefe Linie quer über die Seite in einer neuen Farbe hinzu.
• Puppeteer fehlt: npm i puppeteer im Ordner mit make.cjs.
• ffmpeg fehlt: Installiere es (brew install ffmpeg auf einem Mac). --check und --sound funktionieren ohne es, das Video benötigt es.

Behalte es für dich

Kopiere das Format und erstelle deine eigenen Zeichnungen. Verwende nicht den Benutzernamen eines anderen Creators, ihre Zeichnungen oder den Bildschirm ihrer App, und platziere keine Aufrufzahlen auf dem Video, die es nicht verdient hat.