xiaojinyu0426/doodle-music-reel

Reel musical dessiné (doodle music reel)

Le format : une feuille de papier quadrillé et un trait noir qui balaie l'image. Quelqu'un dessine une vague et le trait la joue. Il ajoute une colline, et un second instrument apparaît. Une tige pousse et on l'entend monter. À la fin, il y a une image complète et une chanson complète, et les deux viennent des mêmes traits. Personne ne parle et il n'y a rien à lire. Le reel de référence a fait 12,5 millions de vues.

Pourquoi ça marche : deux questions se posent en même temps : "qu'est-ce que ça va être ?" et "à quoi ça va ressembler ?". Chaque nouveau trait répond un peu aux deux, donc personne ne passe à autre chose avant que l'image soit terminée, et les 10 dernières secondes sont la récompense.

Le dossier template/ contient le moteur et 5 dessins terminés. Copiez-le, écrivez un nouveau dessin, exécutez une commande.

Fonctionnement du format

Mesuré image par image d'après le reel de référence. Le moteur suit ces nombres.

Partie	Comportement
Tête de lecture	Balaye de gauche à droite, puis revient. Un balayage dure 2 mesures : 4,8 s à 100 BPM
Hauteur de la ligne	Hauteur tonale. 3 octaves de bas en haut dans une gamme pentatonique, 15 notes
Accrochage	La ligne s'accroche à la note la plus proche et glisse en environ 60 ms, sans nouvelle attaque
Chaque croisement	Une voix, avec un point noir dessus. Un cercle traversé par la tête de lecture produit 2 notes à la fois
Quand un trait commence à sonner	Seulement lorsque le stylo a dépassé la tête de lecture. Dessiner seul ne produit aucun son
Couleur	Chaque couleur est un instrument. Tous sont des sons doux, proches d'une sinusoïde pure
Niveau	Reste stable à mesure que les voix s'accumulent, environ -16 dB
Ordre	Une vague à travers la page, puis la grande forme, puis les détails, avec 1 ou 2 balayages d'écoute entre les couches, et environ 2 balayages à la fin sans rien de nouveau

Étapes

1. Trouvez le sujet. Si l'utilisateur n'a pas précisé quoi dessiner, proposez 3 sujets depuis drawings.md, en commençant par quelque chose qui pousse. Une poignée dans le coin est optionnelle et la plupart des reels n'en ont pas, donc n'en ajoutez que si demandé.
2. Copiez le modèle : cp -r ~/.claude/skills/doodle-music-reel/template ~/doodle-reel && cd ~/doodle-reel && npm i puppeteer
3. Écrivez le dessin dans drawings/<nom>.js. Lisez d'abord drawings/sunflower.js, c'est le modèle. Les règles sont ci-dessous.
4. Lisez la chanson : node make.cjs drawings/<nom>.js --check. Vous ne pouvez pas l'entendre, donc ce tableau de notes est la façon de la lire. Corrigez tout avertissement. Voir "Lecture du tableau de notes".
5. Regardez-le : node make.cjs drawings/<nom>.js --stills 4,12,20,30,40 écrit des images dans out/<nom>-stills/. Choisissez des moments répartis sur la durée de la vidéo indiquée sur la première ligne du tableau de notes, la dernière après le dernier trait. Ouvrez chaque image. Vérifiez que le dessin représente bien ce qu'il est censé être, que rien ne sort de la page et que les traits n'entrent pas accidentellement en collision.
6. Rendu : node make.cjs drawings/<nom>.js écrit out/<nom>.mp4 (environ 1 minute).
7. Faites une planche contact du final et regardez-la avant de le remettre : ffmpeg -i out/<nom>.mp4 -vf "fps=1/3,scale=216:-1,tile=7x2" -frames:v 1 out/sheet.jpg
8. Dites à l'utilisateur d'écouter avec le son activé. Vous pouvez lire les notes mais vous ne pouvez pas entendre le mix, donc ce sont leurs oreilles qui ont le dernier mot.

Écrire un dessin

DRAW((E) => ({
  name: 'snail',       // le nom du fichier de sortie
  key: 'D',            // n'importe quelle tonalité : C, C#, D, Eb, E, F, F#, G, Ab, A, Bb, B
  scale: 'pentatonic', // pentatonic (ensoleillé), minor (mélancolique), major (7 notes, peut dissoner)
  bpm: 100,            // un balayage dure 8 temps
  hold: 2,             // balayages à la fin sans rien de nouveau
  // handle: '@votreapp',
  steps: [
    E.stroke('blue', E.wave(0, 1000, 1012, 34, 4), { speed: 430 }),
    E.wait(1.2),       // secondes, ou E.wait('wrap') pour attendre le prochain balayage
    E.stroke('green', [[500, 1000], [490, 800], [510, 600]], { speed: 200, width: 12 }),
  ],
}))

La page fait 1000 de large et 1320 de haut, avec y = 0 en haut. x correspond au moment où une note est jouée, y à la note.

Points et formes. Donnez à un trait 4 à 8 points et il deviendra une courbe lisse dessinée à la main.

• E.wave(x0, x1, y, amp, bumps, seed) une ligne ondulée
• E.circle(cx, cy, r, startDeg, seed) et E.oval(cx, cy, rx, ry, startDeg, seed) dessinés à la main, avec l'extrémité dépassant du début. startDeg est l'endroit où le stylo atterrit : -90 est le haut, 0 est la droite. La valeur par défaut est -100
• E.leaf(x0, y0, x1, y1, fat) une boucle de la base à la pointe et retour
• E.line(x0, y0, x1, y1) et E.arc(cx, cy, r, deg0, deg1)
• E.path(svgPathString, { fit: [x0, y0, x1, y1] }) n'importe quel contour SVG, dessiné avec { sharp: true }
• Tout le reste est une liste de points que vous écrivez vous-même. Pour un nuage, copiez les 10 points de sunflower.js et déplacez-les

Options de trait. speed en unités par seconde (par défaut 520). gap est la pause après (par défaut 0,22). width en pixels (par défaut 10). sharp: true conserve les coins. closed: true relie la fin au début. wobble est le tremblement de la main (par défaut 2,2, 0 est parfaitement droit).

Couleurs (chacune est un instrument). ink, red, orange, yellow, leaf, green, sky, blue, purple, pink, brown.

Hauteurs dans la gamme pentatonique. Voici les 15 marches, espacées de 88 unités, pour la tonalité D. Les autres tonalités déplacent les noms et conservent les hauteurs.

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

La ligne entre deux notes est à mi-chemin : 1012 est entre A3 et B3, et 1100 est entre F#3 et A3. major a 21 marches au lieu de 15, lisez donc ses hauteurs dans le tableau de notes.

Les règles pour que ce soit bon

Le premier trait traverse toute la page, sur la ligne entre deux notes. E.wave(0, 1000, 1012, 34, 4) oscille entre A3 et B3 pendant toute la vidéo. C'est le socle de la chanson. S'il reste sur une seule note, il bourdonne, et s'il s'arrête à mi-chemin, la chanson a un trou.

Construisez par couches, du grave à l'aigu. Socle, puis la grande forme au milieu de la page, puis les détails en haut. Chaque couche est une nouvelle couleur. Attendez 1 ou 2 balayages après une couche pour que les gens entendent ce qu'elle a apporté.

Dessinez ce qui pousse lentement. Vitesse 170-250 sur une tige ou un tronc, pour que les gens regardent ça monter. Vitesse 400-500 sur les contours. Vitesse 250-350 sur les petits traits.

Les formes sont des sons.

• Une longue ligne douce est une mélodie tenue.
• Une ligne presque verticale est une série rapide de notes, le « whoop » quand la tête de lecture frappe une tige.
• Un cercle est deux notes qui s'ouvrent et se ferment. Les petits sont des coups rapides de deux notes, les grands sont une phrase entière.
• Un petit trait est une seule note. Les traits sur les lignes de battement (tous les 125 en x) créent une pulsation. Le bas de la page est la basse, le haut est le scintillement.

Restez à 10 voix tenues simultanément ou moins. La vérification (--check) affiche le nombre et, lorsqu'il est dépassé, nomme les traits qui le causent. Le nombre de voix augmente avec chaque trait situé au même x, donc empiler des formes dans une même colonne provoque cela, de même qu'un contour avec des bosses profondes, car chaque bosse qui revient en arrière en x ajoute des voix. Au-delà de 10, ça devient confus. Déplacez une forme sur le côté, réduisez les bosses ou coupez un trait.

Gardez une durée de 30 à 50 secondes. En dessous de 30, la chanson n'a pas le temps de se construire, et au-dessus de 50, les gens partent avant la fin. La longueur est calculée pour vous : le dernier trait, arrondi à la fin de ce balayage, plus les balayages de hold. Elle change donc quand le dessin change, et elle se termine toujours juste à la fin d'un balayage.

Ça doit ressembler à un dessin d'enfant. Simple, reconnaissable, quelques couleurs. Si ça a besoin d'une étiquette, dessinez autre chose.

Lecture du tableau de notes

--check affiche une ligne par trait : couleur, quand il est dessiné, jusqu'où il s'étend en x, combien de voix il produit et quelles notes il joue. Recherchez :

• Le trait n°1 a 2 notes ou plus et s'étend de x 0 à 1000.
• Les traits sont répartis entre les notes graves, médiums et aiguës. Si tout se situe dans une seule octave, déplacez certaines formes vers le haut ou le bas de la page.
• Une forme que vous vouliez comme mélodie a 3 notes ou plus. Une longue ligne avec une seule note est un bourdon. Donnez-lui plus de hauteur, ou déplacez-la pour qu'elle croise une ligne de note.
• "Partie silencieuse du balayage" est à 0 ou proche de 0.
• Le dernier trait se termine environ 2 balayages avant la fin de la vidéo.

Résolution des problèmes

• Un dessin a l'air faux : modifiez les points et relancez --stills. Cela prend quelques secondes, alors faites plusieurs itérations.
• Une section sonne creux : ajoutez une couche de petits traits, ou une ligne grave traversant la page dans une nouvelle couleur.
• Puppeteer est manquant : npm i puppeteer dans le dossier contenant make.cjs.
• ffmpeg est manquant : installez-le (brew install ffmpeg sur un Mac). --check et --sound fonctionnent sans, la vidéo en a besoin.

Gardez-le pour vous

Copiez le format et créez vos propres dessins. N'utilisez pas le pseudo d'un autre créateur, ses dessins ni l'écran de son application, et n'ajoutez pas de compteur de vues à la vidéo qu'elle n'a pas mérité.