xiaojinyu0426/doodle-music-reel

Reel de música doodle

O formato: uma folha de papel quadriculado e uma linha preta varrendo-a. Alguém desenha uma onda e a linha a toca. Eles adicionam uma colina, e um segundo instrumento entra. Um caule cresce e você o ouve subir. No final, há uma imagem completa e uma música completa, e ambas vieram dos mesmos traços. Ninguém fala e não há nada para ler. O reel de referência teve 12,5 milhões de visualizações.

Por que funciona: duas perguntas correm ao mesmo tempo: "o que vai ser?" e "como vai soar?". Cada novo traço responde um pouco de ambas, então ninguém desliza até a imagem terminar, e os últimos 10 segundos são a recompensa.

template/ contém o motor e 5 desenhos prontos. Copie-o, escreva um novo desenho, execute um comando.

Como o formato funciona

Medido quadro a quadro a partir do reel de referência. O motor segue estes números.

Parte	Como se comporta
Cabeçote de reprodução	Varre da esquerda para a direita, depois volta. Uma varredura são 2 compassos: 4,8s a 100 bpm
Altura da linha	Tom. 3 oitavas de baixo para cima em uma escala pentatônica, 15 notas
Snap	A linha se encaixa na nota mais próxima e desliza até lá em cerca de 60 ms, sem novo ataque
Cada cruzamento	Uma voz, com um ponto preto nele. Um círculo cruzado pelo cabeçote produz 2 notas ao mesmo tempo
Quando um traço começa a soar	Somente depois que a caneta passou o cabeçote. Desenhar sozinho não produz som
Cor	Cada cor é um instrumento. Todos são tons suaves, próximos de uma senoide pura
Nível	Permanece estável conforme as vozes se acumulam, cerca de -16 dB
Ordem	Uma onda pela página, depois a forma grande, depois os detalhes, com 1 ou 2 varreduras de escuta entre as camadas, e cerca de 2 varreduras no final sem nada novo

Passos

1. Obter o assunto. Se o usuário não disse o que desenhar, ofereça 3 de drawings.md, começando com algo que cresce. Uma alça no canto é opcional e a maioria dos reels não tem nenhuma, então só adicione se pedirem.
2. Copiar o template: cp -r ~/.claude/skills/doodle-music-reel/template ~/doodle-reel && cd ~/doodle-reel && npm i puppeteer
3. Escrever o desenho em drawings/<nome>.js. Leia drawings/sunflower.js primeiro, é o modelo. As regras estão abaixo.
4. Ler a música: node make.cjs drawings/<nome>.js --check. Você não pode ouvi-la, então esta tabela de notas é como você a lê. Corrija qualquer aviso. Veja "Lendo a tabela de notas".
5. Olhar para ele: node make.cjs drawings/<nome>.js --stills 4,12,20,30,40 escreve imagens em out/<nome>-stills/. Escolha tempos ao longo do comprimento do vídeo mostrado na primeira linha da tabela de notas, com o último após o traço final. Abra cada um. Verifique se o desenho se lê como a coisa que deveria ser, nada sai da página e os traços não colidem acidentalmente.
6. Renderizar: node make.cjs drawings/<nome>.js escreve out/<nome>.mp4 (cerca de 1 minuto).
7. Folha de contato do final e olhe para ele antes de entregar: ffmpeg -i out/<nome>.mp4 -vf "fps=1/3,scale=216:-1,tile=7x2" -frames:v 1 out/sheet.jpg
8. Diga ao usuário para ouvir com som ligado. Você pode ler as notas e não consegue ouvir a mixagem, então os ouvidos deles têm a última palavra.

Escrevendo um desenho

DRAW((E) => ({
  name: 'caracol',       // o nome do arquivo de saída
  key: 'D',            // qualquer tom: C, C#, D, Eb, E, F, F#, G, Ab, A, Bb, B
  scale: 'pentatonic', // pentatonic (ensolarado), minor (sombrio), major (7 notas, pode chocar)
  bpm: 100,            // uma varredura são 8 batidas
  hold: 2,             // varreduras no final sem nada novo
  // handle: '@seuapp',
  steps: [
    E.stroke('blue', E.wave(0, 1000, 1012, 34, 4), { speed: 430 }),
    E.wait(1.2),       // segundos, ou E.wait('wrap') para esperar a próxima varredura
    E.stroke('green', [[500, 1000], [490, 800], [510, 600]], { speed: 200, width: 12 }),
  ],
}))

A página tem 1000 de largura e 1320 de altura, com y = 0 no topo. x é quando uma nota toca, y é qual nota.

Pontos e formas. Dê a um traço 4-8 pontos e ele resulta em uma curva suave desenhada à mão.

• E.wave(x0, x1, y, amp, bumps, seed) uma linha ondulada
• E.circle(cx, cy, r, startDeg, seed) e E.oval(cx, cy, rx, ry, startDeg, seed) desenhados à mão, com o final passando do início. startDeg é onde a caneta pousa: -90 é o topo, 0 é a direita. O padrão é -100
• E.leaf(x0, y0, x1, y1, fat) um laço da base à ponta e de volta
• E.line(x0, y0, x1, y1) e E.arc(cx, cy, r, deg0, deg1)
• E.path(caminhoSVG, { fit: [x0, y0, x1, y1] }) qualquer contorno SVG, desenhado com { sharp: true }
• Qualquer outra coisa é uma lista de pontos que você escreve. Para uma nuvem, copie os 10 pontos em sunflower.js e mova-os

Opções de traço. speed em unidades por segundo (padrão 520). gap é a pausa após ele (padrão 0.22). width em pixels (padrão 10). sharp: true mantém cantos. closed: true une o final ao início. wobble é o tremor da mão (padrão 2.2, 0 é reto como régua).

Cores (cada uma é um instrumento). ink, red, orange, yellow, leaf, green, sky, blue, purple, pink, brown.

Alturas na escala pentatônica. Estes são os 15 passos, 88 unidades de distância, para tom D. Outros tons deslocam os nomes e mantêm as 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

A linha entre duas notas está no meio: 1012 está entre A3 e B3, e 1100 está entre F#3 e A3. major tem 21 passos em vez de 15, então leia suas alturas da tabela de notas.

As regras que o tornam bom

O primeiro traço cruza a página inteira, na linha entre duas notas. `E.wave(0, 1000, 1012, 34, 4)`` oscila entre A3 e B3 por todo o vídeo. É o piso da música. Se ele se sentar em uma nota, ele droneja, e se parar no meio, a música tem um buraco.

Construa em camadas, grave antes do agudo. Piso, depois a forma grande no meio da página, depois detalhes no alto. Cada camada é uma nova cor. Espere 1 ou 2 varreduras após uma camada para que as pessoas ouçam o que foi adicionado.

Desenhe o que cresce lentamente. Velocidade 170-250 em um caule ou tronco, para que as pessoas o vejam subir. Velocidade 400-500 em contornos. Velocidade 250-350 em traços curtos.

Formas são sons.

• Uma longa linha suave é uma melodia sustentada.
• Uma linha quase vertical é uma corrida rápida de notas, o "whoop" quando o cabeçote atinge um caule.
• Um círculo são duas notas abrindo e fechando. Pequenos são acertos rápidos de duas notas, grandes são uma frase inteira.
• Um traço curto é uma nota. Traços nas linhas rítmicas (a cada 125) criam um pulso. A parte inferior da página é o baixo, o topo é o brilho.

Mantenha-se em 10 vozes mantidas ao mesmo tempo ou menos. A verificação imprime o número e, quando ultrapassa, nomeia os traços que o causam. A contagem de vozes aumenta com cada traço sobre o mesmo x, então empilhar formas em uma coluna é o que faz isso, assim como um contorno com ondulações profundas, porque cada ondulação que dobra para trás em x adiciona vozes. Acima de 10, vira mingau. Deslize uma forma para o lado, torne as ondulações rasas ou corte um traço.

Mantenha entre 30-50 segundos. Abaixo de 30 a música não consegue se construir, e acima de 50 as pessoas saem antes do fim. O comprimento é calculado para você: o último traço, arredondado para cima até o final daquela varredura, mais hold varreduras. Então muda quando o desenho muda, e sempre termina exatamente quando uma varredura termina.

Tem que parecer um desenho de criança. Simples, reconhecível, poucas cores. Se precisar de uma legenda, desenhe outra coisa.

Lendo a tabela de notas

--check imprime uma linha por traço: cor, quando é desenhado, até onde se estende, quantas vozes produz e quais notas toca. Procure:

• Traço #1 tem 2 ou mais notas e se estende x 0-1000.
• Os traços se espalham pelas notas graves, médias e agudas. Se tudo se sentar em uma oitava, mova algumas formas para cima ou para baixo na página.
• Uma forma que você pretendia como melodia tem 3 ou mais notas. Uma longa linha com uma nota é um drone. Dê a ela mais altura, ou desloque-a para cruzar uma linha de nota.
• "Parte silenciosa da varredura" é 0 ou próximo disso.
• O último traço termina cerca de 2 varreduras antes do vídeo acabar.

Corrigindo coisas

• Um desenho parece errado: mude os pontos e execute --stills novamente. Leva segundos, então repita algumas vezes.
• Uma seção soa fina: adicione uma camada de traços, ou uma linha grave pela página em uma nova cor.
• Puppeteer está faltando: npm i puppeteer na pasta com make.cjs.
• ffmpeg está faltando: instale-o (brew install ffmpeg em um Mac). --check e `--sound`` funcionam sem ele, o vídeo precisa dele.

Mantenha-o seu

Copie o formato e faça seus próprios desenhos. Não use o identificador de outro criador, seus desenhos ou a tela do aplicativo deles, e não coloque contagens de visualizações no vídeo que ele não ganhou.