xiaojinyu0426/doodle-music-reel

Doodle music reel

El formato: una hoja de papel cuadriculado y una línea negra que la recorre. Alguien dibuja una onda y la línea la reproduce. Añade una colina, y un segundo instrumento entra. Un tallo crece y se escucha cómo asciende. Al final hay una imagen completa y una canción completa, y ambas nacieron de los mismos trazos. Nadie habla y no hay nada que leer. El reel de referencia obtuvo 12.5M de visualizaciones.

Por qué funciona: dos preguntas se activan a la vez, "¿qué va a ser?" y "¿cómo va a sonar?". Cada nuevo trazo responde un poco de ambas, así que nadie se desplaza hasta que la imagen está terminada, y los últimos 10 segundos son la recompensa.

template/ contiene el motor y 5 dibujos terminados. Cópialo, escribe un nuevo dibujo, ejecuta un comando.

Cómo funciona el formato

Medido fotograma a fotograma a partir del reel de referencia. El motor sigue estos números.

Parte	Cómo se comporta
Cabezal reproductor	Barre de izquierda a derecha, luego salta hacia atrás. Un barrido son 2 compases: 4.8s a 100 bpm
Altura de la línea	Tono. 3 octavas de abajo arriba en una escala pentatónica, 15 notas
Ajuste	La línea se ajusta a la nota más cercana y se desliza allí en unos 60 ms, sin nuevo ataque
Cada cruce	Una voz, con un punto negro encima. Un círculo cruzado por el cabezal son 2 notas a la vez
Cuándo empieza a sonar un trazo	Solo cuando el lápiz ha pasado el cabezal. Dibujar solo no produce sonido
Color	Cada color es un instrumento. Todos son tonos suaves, cercanos a una seno pura
Nivel	Se mantiene plano a medida que se acumulan las voces, alrededor de -16 dB
Orden	Una onda a lo largo de la página, luego la forma grande, luego el detalle, con 1 o 2 barridos de escucha entre capas, y unos 2 barridos al final sin nada nuevo

Pasos

1. Obtén el tema. Si el usuario no ha dicho qué dibujar, ofrece 3 de drawings.md, empezando por algo que crezca. Un identificador en la esquina es opcional y la mayoría de los reels no lo tienen, así que añádelo solo si lo piden.
2. Copia la plantilla: cp -r ~/.claude/skills/doodle-music-reel/template ~/doodle-reel && cd ~/doodle-reel && npm i puppeteer
3. Escribe el dibujo en drawings/<nombre>.js. Lee primero drawings/sunflower.js, es el modelo. Las reglas están abajo.
4. Lee la canción: node make.cjs drawings/<nombre>.js --check. No puedes oírla, así que esta tabla de notas es cómo la lees. Corrige cualquier advertencia. Consulta "Leer la tabla de notas".
5. Míralo: node make.cjs drawings/<nombre>.js --stills 4,12,20,30,40 escribe imágenes en out/<nombre>-stills/. Elige momentos a lo largo de la duración del video que se muestra en la primera línea de la tabla de notas, con la última después del trazo final. Abre cada una. Verifica que el dibujo se lea como lo que se supone que debe ser, que nada se salga de la página y que los trazos no colisionen accidentalmente.
6. Renderiza: node make.cjs drawings/<nombre>.js escribe out/<nombre>.mp4 (aproximadamente 1 minuto).
7. Crea una hoja de contactos del final y revísala antes de entregarlo: ffmpeg -i out/<nombre>.mp4 -vf "fps=1/3,scale=216:-1,tile=7x2" -frames:v 1 out/sheet.jpg
8. Dile al usuario que escuche con el sonido activado. Tú puedes leer las notas pero no oír la mezcla, así que sus oídos tienen la última palabra.

Escribir un dibujo

DRAW((E) => ({
  name: 'snail',       // el nombre del archivo de salida
  key: 'D',            // cualquier tonalidad: C, C#, D, Eb, E, F, F#, G, Ab, A, Bb, B
  scale: 'pentatonic', // pentatonic (soleada), minor (melancólica), major (7 notas, puede chocar)
  bpm: 100,            // un barrido son 8 tiempos
  hold: 2,             // barridos al final sin nada nuevo
  // handle: '@tuapp',
  steps: [
    E.stroke('blue', E.wave(0, 1000, 1012, 34, 4), { speed: 430 }),
    E.wait(1.2),       // segundos, o E.wait('wrap') para esperar al siguiente barrido
    E.stroke('green', [[500, 1000], [490, 800], [510, 600]], { speed: 200, width: 12 }),
  ],
}))

La página tiene 1000 de ancho y 1320 de alto, con y = 0 en la parte superior. x es cuándo suena una nota, y es qué nota.

Puntos y formas. Dale a un trazo 4-8 puntos y se convertirá en una curva suave dibujada a mano.

• E.wave(x0, x1, y, amp, bumps, seed) una línea ondulada
• E.circle(cx, cy, r, startDeg, seed) y E.oval(cx, cy, rx, ry, startDeg, seed) dibujados a mano, con el final sobrepasando el inicio. startDeg es donde aterriza el lápiz: -90 es la parte superior, 0 es la derecha. El valor predeterminado es -100
• E.leaf(x0, y0, x1, y1, fat) un bucle desde la base hasta la punta y de vuelta
• E.line(x0, y0, x1, y1) y E.arc(cx, cy, r, deg0, deg1)
• E.path(cadenaSvgPath, { fit: [x0, y0, x1, y1] }) cualquier contorno SVG, dibujado con { sharp: true }
• Cualquier otra cosa es una lista de puntos que escribes tú mismo. Para una nube, copia los 10 puntos de sunflower.js y muévelos

Opciones de trazo. speed en unidades por segundo (predeterminado 520). gap es la pausa después (predeterminado 0.22). width en píxeles (predeterminado 10). sharp: true conserva las esquinas. closed: true une el final con el inicio. wobble es el temblor de la mano (predeterminado 2.2, 0 es recto como una regla).

Colores (cada uno es un instrumento). ink, red, orange, yellow, leaf, green, sky, blue, purple, pink, brown.

Alturas en la escala pentatónica. Estos son los 15 pasos, separados 88 unidades, para la tonalidad D. Otras tonalidades desplazan los nombres y mantienen las alturas.

y	nota	y	nota	y	nota
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 línea entre dos notas está a la mitad: 1012 está entre A3 y B3, y 1100 está entre F#3 y A3. major tiene 21 pasos en lugar de 15, así que lee sus alturas de la tabla de notas.

Las reglas que lo hacen bueno

El primer trazo cruza toda la página, sobre la línea entre dos notas. E.wave(0, 1000, 1012, 34, 4) oscila entre A3 y B3 durante todo el video. Es el piso de la canción. Si se asienta sobre una nota, suena monótono, y si se detiene a la mitad, la canción tiene un agujero.

Construye en capas, graves antes que agudos. Piso, luego la forma grande en el medio de la página, luego detalles arriba. Cada capa es un nuevo color. Espera 1 o 2 barridos después de una capa para que la gente escuche lo que añadió.

Dibuja lo que crece lentamente. Velocidad 170-250 en un tallo o un tronco, para que la gente lo vea escalar. Velocidad 400-500 en contornos. Velocidad 250-350 en trazos cortos.

Las formas son sonidos.

• Una línea larga y suave es una melodía sostenida.
• Una línea casi vertical es una carrera rápida de notas, el "whoop" cuando el cabezal golpea un tallo.
• Un círculo son dos notas que se abren y cierran. Los pequeños son golpes rápidos de dos notas, los grandes son una frase completa.
• Un trazo corto es una nota. Los trazos en las líneas de ritmo (cada 125) crean un pulso. La parte inferior de la página es grave, la parte superior es brillo.

Mantente en 10 voces o menos simultáneas. La verificación imprime el número, y cuando está por encima, nombra los trazos que lo causan. El recuento de voces aumenta con cada trazo que se sitúa sobre la misma x, así que apilar formas en una columna es lo que lo causa, y también un contorno con protuberancias profundas, porque cada protuberancia que retrocede en x añade voces. Más de 10 se convierte en una mezcla confusa. Desliza una forma hacia los lados, haz las protuberancias poco profundas o corta un trazo.

Mantenlo entre 30 y 50 segundos. Por debajo de 30 la canción no logra construirse, y por encima de 50 la gente se va antes del final. La duración se calcula por ti: el último trazo, redondeado al final de ese barrido, más hold barridos. Así que cambia cuando lo hace el dibujo, y siempre termina justo cuando un barrido finaliza.

Debe parecer un dibujo de niño. Simple, reconocible, pocos colores. Si necesita una etiqueta, dibuja otra cosa.

Leer la tabla de notas

--check imprime una línea por trazo: color, cuándo se dibuja, hasta dónde se extiende, cuántas voces genera y qué notas reproduce. Busca:

• El trazo #1 tiene 2 o más notas y recorre x 0-1000.
• Los trazos se distribuyen entre las notas graves, medias y agudas. Si todo se sitúa en una octava, mueve algunas formas hacia arriba o abajo en la página.
• Una forma que pretendías como melodía tiene 3 o más notas. Una línea larga con una nota es un zumbido monótono. Dale más altura, o desplázala para que cruce una línea de nota.
• "Parte silenciosa del barrido" es 0 o cercano a 0.
• El último trazo termina aproximadamente 2 barridos antes de que termine el video.

Solucionar problemas

• Un dibujo se ve mal: cambia los puntos y vuelve a ejecutar --stills. Toma segundos, así que repite varias veces.
• Una sección suena débil: añade una capa de trazos cortos, o una línea grave a lo largo de la página en un nuevo color.
• Falta Puppeteer: npm i puppeteer en la carpeta con make.cjs.
• Falta ffmpeg: instálalo (brew install ffmpeg en un Mac). --check y --sound funcionan sin él, el video lo necesita.

Mantenlo tuyo

Copia el formato y crea tus propios dibujos. No uses el identificador de otro creador, sus dibujos ni la pantalla de su aplicación, y no pongas recuentos de visualizaciones en el video que no haya ganado.