¿Qué hace anidoodle?
Imágenes, películas y piezas interactivas dibujadas enteramente en código. Una función pura pinta cada fotograma; otra compone y sintetiza cada muestra de audio. La misma fuente reconstruye los mismos píxeles y el mismo sonido en cualquier máquina, a cualquier tamaño, en cualquier duración.
El motor es la mitad fácil. El trabajo se desecha porque no tenía sentido, porque el tema era un icono de sí mismo, porque un estilo era solo un cambio de paleta, porque la música no tenía forma, o porque la persona gastó su paciencia aprobando fragmentos. Este skill lleva la artesanía que previene cada uno de esos.
Empieza preguntando, luego construye
Lee references/workflows/start-here.md y ejecuta su proceso de ingesta: una pregunta a la vez, solo
lo que la solicitud deja abierto, tu recomendación primero. Qué están haciendo, en qué
estilo (muestra la hoja de galería, https://github.com/alexgreensh/anidoodle/blob/main/skills/anidoodle/assets/styles.jpg; la lista es references/styles/INDEX.md), qué
forma (1x1, 9x16, 16x9, 4x5 o cualquier W x H), cuánto
tiempo duración (cualquier duración; nunca la limites), qué sonido (silencio o un estilo musical y estado de ánimo), qué personajes.
"Tú eliges" significa elegir y explicar por qué en una línea. Escribe las respuestas en un breve resumen antes de dibujar.
¿Qué estás haciendo?
| Haciendo | Lee |
|---|---|
| Una imagen fija: hero, spot, portada, tarjeta, póster, una serie | Flujo de trabajo de imagen fija abajo, references/formats.md |
| Una imagen que se dibuja a sí misma (timelapse, making-of) | references/workflows/drawing-process.md |
| Un bucle, sticker, logo animado, encabezado ambiental | Flujo de trabajo de bucle abajo, references/formats.md |
| Una película narrativa, cualquier duración | Flujo de trabajo de película abajo, references/workflows/long-film.md |
| Un explicador o una infografía | references/workflows/explainer.md |
| Un video de lanzamiento o producto (sus capturas de pantalla son bienvenidas) | references/workflows/launch-video.md; construye sobre references/workflows/launch-video-kit.md |
| Una animación web interactiva que reacciona a la interfaz de usuario | references/workflows/interactive.md |
| Una lección de dibujo, o "¿cómo dibujo esto?" | references/workflows/teach-drawing.md |
| Un personaje mantenido idéntico en cualquier estilo (xilografía a ladrillo de juguete) | references/workflows/character-consistency.md, references/anatomy.md |
| Un estilo coincidente con su imagen | references/workflows/adapt-a-style.md |
| Una banda sonora o pista musical | references/music/README.md |
- Música: escribe tu propia partitura para la película (
references/music/README.md);node tools/music.mjs check <score.ts#export>debe PASAR antes de que un humano escuche. - Efectos de sonido:
references/music/sound-design.md. 14 efectos en capas y con semilla, sincronizados por fotograma de película (filmSfx); la partitura se atenúa, y cada señal debe estar dentro de 6 dB de ella. Efectos solo en cambios de dirección reales, un ascenso + un impacto por película. - Películas de lanzamiento:
launchTemplate.tsrenderiza el lanzamiento de un producto a partir de datos: indicaciones, placas dibujadas para él, una partitura escrita para él, palabras, líneas de instalación; los hábitos que ahorran tokens están enreferences/working-method.md.
Las siete leyes
- Cada pieza tiene un punto. Una imagen fija: una idea, un sujeto focal, una luz. Una película: una
transformación, una recompensa, un token que regresa. →
references/storytelling.md - Declara el realismo. Nombra la anatomía, la vista y la referencia que abriste, tanto para animales,
objetos como personas. →
references/realism-and-craft.md,references/anatomy.md - Un estilo es una forma de hacer marcas. Cambia el medio, el borde y el orden de las marcas,
más allá de la paleta. →
references/styles.md - Prueba el aspecto en UNA imagen fija, luego construye de principio a fin. Después de eso, los puntos de control cuestan más de lo que ahorran.
→
references/working-method.md - El contrato es absoluto. Puro en
(frame, env)(y el registro de entrada, para piezas interactivas), solorng(seed), sin reloj, sinctx.filter. Nada generado o descargado; las imágenes que la persona trae pueden estar incrustadas, fijadas por hash. →references/determinism-and-contract.md - La música obtiene un plan, nunca un adjetivo. Un estilo, un estado de ánimo por sección, las notas como datos, luego
mediciones. No puedes oírlo, así que un humano escucha antes de que se envíe. →
references/music/ - Uno dirige, uno construye, ambos escriben todo. Cuando una sesión se degrada, reinicia; los
archivos son la memoria. →
references/working-method.md
Flujos de trabajo
Imagen fija. (1) Di la idea en una oración; nombra el sujeto focal y la luz. (2) Abre referencia
real para cualquier cosa que exista, y anota cuál. (3) Elige el estilo y lee primero el encabezado de su placa.
(4) Dibuja en el orden de ese medio. (5) Renderiza con still.mjs a tamaño completo, ejecuta
el pase de detalle en recortes (caras, manos, pies, uniones; references/craft-bar.md), critica por escrito. ✋ Una aprobación. (6) Entrega cada
tamaño y forma solicitados desde la misma fuente, y di que se imprimió reproducible.
Bucle. Como una imagen fija, más: cada movimiento es periódico sobre el bucle, el sujeto nunca se detiene, algo se mueve cada segundo. Comprueba la costura (último fotograma contra el fotograma 0). ✋ Una aprobación, sobre el archivo en movimiento.
Película. (1) La historia en tres oraciones (planteamiento, transformación, recompensa) y el token; para películas más largas, una columna vertebral más una línea por capítulo. Si no puedes escribirla, detente. (2) La cuadrícula: un tiempo es 60 x fps / bpm fotogramas, el bpm de la partitura del resumen; una tabla de señales contiene cada número de fotograma y un verificador se ejecuta al cargar. (3) Referencia real para cualquier cosa que exista. (4) UNA imagen fija de aspecto, el fotograma más difícil, criticado por escrito. ✋ Aprobación. (5) UNA muestra de música de 8 segundos. ✋ Aprobación. (6) Construye toda la película; las comprobaciones mecánicas se ejecutan continuamente. (7) Revisa una vez desde el archivo renderizado: una hoja de contactos por tiempo, cada corte como un par, los números de silencio. Una lista ordenada de correcciones, una reconstrucción. (8) ✋ Aprobación final. Di lo que verificaste y lo que no puedes.
Como máximo tres puntos de aprobación. La aprobación es un presupuesto; gástalo donde equivocarse es caro.
El nivel de artesanía
La prueba: ¿un ilustrador humano orgulloso enviaría esto, o es un ensamblaje mecánico de formas? La
tabla completa de señales está en references/craft-bar.md. Las que hunden la mayoría del trabajo: sujetos construidos
a partir de elipses, un estilo recoloreado en otro, cosas que aparecen gradualmente en lugar de ser dibujadas,
personas con articulaciones de goma, y un personaje dibujado de manera diferente de toma a toma.
Sin silencio muerto en cualquier cosa que se mueva: algo cambia visiblemente cada segundo. Una película que
se dibuja a sí misma declara kind: "drawing" y se juzga con un estándar más fino; un congelamiento sigue siendo un fallo.
El motor
engine/ es el núcleo artístico portátil más las herramientas. engine/src/canvas-core no sabe
nada sobre el DOM o cualquier backend. W, H, fps y durationFrames provienen del meta de la película.
Los movimientos de cámara (paneos, zooms, paralaje, sacudidas) provienen de engine/src/canvas-core/camera.ts:
references/camera.md. render.mjs --blur N renderiza con desenfoque de movimiento (N subfotogramas promediados en
luz lineal por fotograma); la ruta predeterminada no se modifica.
node <skill>/engine/tools/scaffold.mjs ~/art --film intro --format 9x16 --duration 12 # segundos
cd ~/art && npm install && npx playwright-core install chromium
node tools/still.mjs intro --frame 0 --out out/look.png --scale 2 # una imagen fija, con su hash
node tools/render.mjs intro # MP4; --out x.gif|x.webm|x.apng
node tools/gate.mjs intro # determinismo, contrato, silencio muerto
node tools/emit.mjs intro --out out/intro.html # un reproductor offline autónomo
| Herramienta | Qué hace |
|---|---|
scaffold.mjs | un proyecto con una imagen fija y/o película; --duration, --format o --size, --fps, --bpm |
still.mjs / render.mjs | fotogramas dibujados dos veces con hashes (--frames a,b,c --sheet en un navegador) / la pieza en cualquier formato (--from/--to, --poster-frame, --hashes) |
gate.mjs | determinismo, contrato, silencio muerto, artefacto; --self-test prueba que puede fallar |
registry.mjs / gallery.mjs | la lista de estilos desde las propias placas / la hoja de galería |
docs-check.mjs | falla cuando el recuento de estilos, duración o ruta de algún documento no coincide con el código |
verify-export.mjs | QA en el archivo renderizado: fotogramas, duración, partitura; primer fotograma opt-in, costura de bucle, --delivery |
test.mjs (npm test) | suites unitarias en engine/test/, sin navegador |
music.mjs | renderiza y mide una partitura; check la controla (tonalidad, master, guards, stems, novelty) |
sfx.mjs | el kit de efectos de sonido: list, one, kit <dir>, test |
Cuatro backends, un núcleo artístico: playwright, html-player, remotion, hyperframes.
→ references/backends-and-adapters.md
Ejemplos trabajados
- Las placas de estilo en
engine/src/canvas-core/: cada estilo tiene una imagen fija y una película de cómo se dibuja, con la receta en el encabezado yreferences/styles/<id>.md. - MECHANICAL LEPIDOPTERA en
example/: una película con partitura de 47 s.scaffold.mjs ~/study --example.
Estúdialos. No los copies. El nivel de artesanía no se satisface con la herencia.
Límites honestos
No puedes oír la partitura, ver la película en movimiento, ni usar la pieza interactiva. Cada afirmación sobre
ellos proviene de una medición o de un humano; di cuál. Una marca de verificación verde es una afirmación hasta que la
vuelvas a ejecutar. Renderiza un fotograma a --scale 2 antes de confiar en una imagen fija: una capa transferida a través de la
transformación incorrecta se ve bien a 1x y se rompe a 2x.