Boceto a tinta

Doodle

Un sistema de ilustración dibujada con código. Los temas se crean como geometría, se proyectan a través de una cámara y los renderiza una "mano" con semilla que hace que una marca parezca dibujada. HTML + JS simple, sin compilación, sin dependencias: abre una página en un navegador.

Configuración: dónde trabajas

El motor se incluye dentro de esta skill en engine/ (junto a este archivo). Nunca lo edites allí; una actualización de la skill lo sobrescribe.

1. Si LOCAL.md existe junto a este archivo, léelo primero: nombra el espacio de trabajo y las herramientas de esta máquina, y anula la configuración predeterminada a continuación.
2. De lo contrario, el espacio de trabajo es ./.doodle (oculto) en el proyecto actual. Si no existe, créalo: cp -R "<carpeta de esta skill>/engine" ./.doodle.
3. Cada ruta a continuación (src/…, bin/…) es relativa al espacio de trabajo. El renderizado necesita Chrome o Chromium (CHROME=/ruta para anular) y python3; nada más.

Un dibujo = bin/new.sh <nombre>, que crea drawings/<nombre>.js (dibuja dentro de draw(S), conjunto completo de herramientas, con marco automático) y la página que lo renderiza. Varias cosas en una imagen son un dibujo; varias imágenes separadas son varios nombres.

Los ejemplos son código, no páginas. Los módulos en src/ (things.js, people.js, trials.js, scapes.js …) contienen temas trabajados: léelos y copia su construcción en tu dibujo; nunca los añadas ni edites. La tabla de enrutamiento a continuación nombra desde qué módulo empezar.

ENTREGA IMÁGENES, no páginas. Cuando un dibujo esté listo, ejecuta bin/render.sh <nombre>: escribe doodles/<nombre>/<nombre>.png (color) y <nombre>-line.png (solo línea) en el proyecto y abre esa carpeta para el usuario. Dile la ruta de la carpeta. No construyas, abras ni señales al usuario una página HTML, lienzo o panel de control a menos que lo pidan.

Este archivo es todo el contrato, y es corto a propósito para que se cargue por completo. El detalle está en references/ (movido allí textualmente, sin omitir nada). La tabla de ENRUTAMIENTO a continuación dice qué referencia leer para el trabajo. Leerla es parte del trabajo, no opcional: cada regla en esos archivos se pagó con un dibujo rechazado.

El procedimiento, cada vez

1. Nombra la FORMA y la CLASE (tablas a continuación). La forma decide la página, el encuadre y el presupuesto de detalle; la clase decide la pluma, el plumín, el relleno y el tono.
2. Enruta. Lee los archivos de referencia que la tabla de enrutamiento nombra para tu tema y abre el módulo que nombra como punto de partida. Nunca empieces un tema desde un archivo en blanco cuando ya existe un kit para él.
3. Mide antes de dibujar. A partir de una imagen de referencia: proporciones y paleta, sondeadas, nunca recordadas. Sin una: escribe las proporciones del tema como números en el encabezado del módulo (el zapato necesitó ocho números; tres renderizados sin ellos fallaron). references/hand-and-craft.md § Medición.
4. Construye la LÍNEA PRIMERO. Evalúa ?outline=1 antes del color. Cada valor se transporta dos veces, como relleno y en línea. El detalle disminuye del foco al plano medio al papel. references/line-first.md.
5. Renderiza y MIRA, en línea Y color, al tamaño del marco. Hoja de contactos para la composición, el marco grande individual para la calidad de la línea. Ambos, cada ronda.
6. Arregla en el KIT, no en el tema, cuando la rotura es de un ayudante. Repite hasta que cada tema funcione.
7. bin/check.sh drawings/<name>.html (sin argumento = cada dibujo): renderiza, sin NaN, sin errores de consola, sin desviación de clase.
8. Entrega: bin/render.sh <nombre> — PNG en doodles/<nombre>/, carpeta abierta.
9. Incorpora lo que aprendiste en esta skill EN LA MISMA RONDA (§ Evolucionando).

Enrutamiento: qué leer, dónde empezar

Tema	Empezar desde	Leer
cualquier doodle, primera vez en una sesión	n/a	references/line-first.md, references/forms-and-classes.md
un objeto cotidiano (teléfono, llaves, botella, tela, gafas …)	src/things.js (el más cercano de 20; cam, S.prism, S.on, S.dash)	things.md
un producto, dispositivo, gadget, electrodoméstico	src/retro.js (Retro._kit)	products.md, geometry.md
un objeto redondo (taza, jarrón, fruta, botella)	src/stilllife.js escenario (lathe, ball) o src/still.js	still-life.md, geometry.md (construcción de trayectoria)
un bodegón / arreglo / a partir de una foto	src/stilllife.js	still-life.md
muebles	src/furniture3.js, src/kitchen.js	products.md
un objeto cotidiano (portátil, tijeras, gafas, cepillo de dientes, secador de pelo, camiseta, jabón, cuaderno, candado, osito de peluche, percha, mochila, botella…)	src/things.js def(...)	products.md, geometry.md
una PERSONA, personas, cualquiera en una escena	src/people.js People.figure; nunca Trials._figure (muerto)	people.md
un animal	src/trials.js (cat)	figures-and-trials.md
vidrio, líquido, transparencia	src/trials.js (glass)	figures-and-trials.md
una bicicleta, un cuadro, cualquier cosa de tubos finos	src/trials.js (bicycle), S.limb	figures-and-trials.md
un zapato, una prenda, tela	src/trials.js (sneaker, fruit tela)	figures-and-trials.md
plantas, flores, hojas	src/plants3.js, src/flowers.js; hojas con agujeros: trials.js monstera	plants.md, figures-and-trials.md
un edificio, casa, fachada	src/houses.js, src/arch.js, src/arch2.js	architecture.md, geometry.md
un paisaje, vista exterior	src/scapes.js (el kit de escena)	landscapes.md
noche, oscuridad, clima, lluvia	src/trials.js (night, rain) sobre el kit de escena	figures-and-trials.md, landscapes.md
una calle, un diorama, un café	src/cafe.js, src/scenes.js	landscapes.md, geometry.md
una habitación / interior	src/kitchen.js, src/deskscene.js	geometry.md, landscapes.md (fidelidad)
pluma y tinta, sin color	src/pen.js	line-first.md (tono), forms-and-classes.md (ink)
un storyboard / secuencia	src/board.js	storyboards.md
letras, un letrero	src/letter.js	pages-and-files.md
una pantalla, interfaz de usuario, terminal (texto claro sobre fondo oscuro)	src/letter.js + líneas de color de tono	pages-and-files.md (entrada letter.js)
hacer que se mueva (Rive)	el exportador de Rive (no incluido; ver el archivo)	animation.md
verlo dibujar, subdibujo	?draw=<key>, ?sketch=1	hand-and-craft.md
limpio / vectorial / no garabateado	n/a	la skill clean-illustration si está instalada
un CONJUNTO, una prueba de estrés	una página de conjunto existente como plantilla	checking.md
un doodle que debe ALINEARSE con un renderizado (boceto → limpieza final)	traza la silueta, crea el interior	registration.md
qué página / archivo hace qué	n/a	references/pages-and-files.md

Todas las rutas references/ son relativas a la carpeta de esta skill.

Formas

Dijeron	Forma	Ejemplo para empezar	Presupuesto de detalle
"dibújame una taza / una silla"	tema	src/things.js, src/retro.js	todo, una cosa con total fidelidad
"hazme N de ellos"	conjunto	un dibujo bin/new.sh por elemento, ayudantes compartidos en cada uno	un kit de herramientas, el detalle vive en el kit
"una casa / un escaparate"	alzado	src/houses.js, src/arch.js	tres vanos, 55% de relleno negro sólido
"una calle / una vista / un paisaje"	escena	src/scapes.js, marco + recorte indicado	la escalera de profundidad de tres niveles
"toda la manzana / un pequeño mundo"	diorama	src/cafe.js	los bordes de la manzana permanecen DENTRO de la imagen
"una habitación"	interior	src/kitchen.js, src/deskscene.js	primer plano completo, pared trasera característica
"storyboard de esto"	tablero	src/board.js	establecido por TAMAÑO DE PLANO, no por el tema
"pluma y tinta / sin color"	registrar ink	src/pen.js	tono llevado en línea, sin relleno en absoluto

Un conjunto no es una escena (las cosas en una página no comparten nada más que una hoja), y un tablero no es un conjunto (la fidelidad igual pierde la secuencia). La clave: ¿las cosas deben compartir el MISMO ESPACIO? Entonces es una escena.

Clases (src/spec.js; texto completo en references/forms-and-classes.md)

clase	pluma	plumín	ajuste	relleno	tono
object	0.30	firme	.84/.84	plano, sombreado por normal de cara	la sombra es un RELLENO más oscuro, más su gemelo de línea
ink	0.26	pluma	.90/.88	NINGUNO, el papel es el objeto	solo línea; una pantalla de puntos está prohibida
product	0.30	firme	.84/.84	un material = un color	pliegues > ~35° solamente
elevation	0.30	firme	.86/.84	55% de paneles negros sólidos	sombreado de tejados, el lado de la sombra
plant	0.30	firme	.84/.88	plano; tono claro .96, otros .84	garabateo solo para follaje masivo
flower	0.26	firme	.92/.90	plano	ninguno
scene	0.30	firme	.96/.94	plano; sombra un relleno más oscuro	sombreado solo donde nada se interpone al frente
diorama	0.22	firme	.94/.92	plano	ninguno
panel	0.26	firme	.94/.94	plano, menos que el tema solo	un valor suelo, un cielo
furniture, interior	0.16 / 0.15	pluma	—	PESOS LEGADO; el trabajo nuevo toma object	—

Declara la clase, nunca vuelvas a escribir los números: Spec.wrap(cls, label, build). bin/check.sh audita la desviación en cada página. Una clase posee la mano; una página posee el papel. Agrega una clase solo cuando la política de relleno o tono difiera genuinamente.

Reglas estrictas (cada una es un dibujo rechazado)

Línea primero y fidelidad

• Solo línea (?outline=1) debe ser un dibujo TERMINADO. Cada página honra ?outline=1; verifica las páginas que copiaste (uno codificado outline: false).
• Cada valor se transporta dos veces: material oscuro = sombreado; un giro = costillas que se curvan con la superficie; una sombra proyectada = sombreado sin contorno; una marca que NOMBRA la cosa = una marca delineada, nunca un relleno w: 0. Audita cada w: 0.
• El foco obtiene detalle completo, el plano medio contorno más 2–3 líneas, el fondo es PAPEL (su único tono la sombra que proyecta el tema). Entrecierra los ojos: si la pared está tan ocupada como el tema, corta la pared.
• El sombreado se ENCOLA como líneas (S.hatch), nunca un tono k.T; los rellenos posteriores lo cortan. gap es el valor: 2.4 claro, 1.5 medio, 1.1 oscuro. Sombreado cruzado solo la ÚNICA cosa más oscura en el foco.
• Un lado de sombra es una CRECIENTE delimitada por curvas que se curvan con la forma, nunca un corte de semiplano recto (eso se lee como un objeto partido en dos).

Geometría y construcción de trayectoria

• Una línea recta que no creaste es un error de trayectoria: una cuerda de concatenar dos mitades en la dirección incorrecta, o una forma abierta trazada closed. Imprime los puntos.
• Una banda alrededor de un cuerpo opaco es solo su mitad CERCANA; solo una boca abierta es una elipse completa.
• Los agujeros se CORTAN (keyhole), nunca se pintan en el color de fondo. El agujero se muestra en línea pero no en color = su bobinado.
• Las cosas delgadas (extremidades, tubos, tallos) son UNA tira a través de sus uniones; delinea los lados, deja que los extremos se conecten con lo que se dibuja después.
• Contenedores: interior → borde lejano → contenido → pared frontal. El contenido se hunde por debajo del borde.
• Mide las proporciones como números antes de dibujar un objeto conocido. Estirar una forma incorrecta la mantiene incorrecta (el zapato).
• Dimensiona los muebles a partir del cuerpo que los usa, nunca al revés.
• Un doodle que debe registrarse con una imagen: TRAZA su silueta desde el alfa de la imagen, crea el interior, fija el marco a la imagen y recorta el ajuste de clase en la exportación (registration.md).
• Personas: solo People.figure. Gesto antes que detalle (peso en una pierna, caderas y hombros se inclinan opuestos); las poses son ÁNGULOS para que la proporción esté bloqueada; los muebles y las cosas sostenidas se derivan de las articulaciones devueltas. El cabello trasero se pinta antes que el cuerpo.
• Una línea punteada larga y recta a través de una forma suave = el error de la creciente envolvente (corregido en S.soft); un torno ondulado = pocos nudos + facilitación por segmento: usa un perfil denso con steps: 1.
• { dash: true } no hace nada: usa S.dash. Enmarca los objetos en su cuadro delimitador de contenido, no a ojo.
• "Desordenado" = construcción, no detalle: juzga UN tema a tamaño completo; los contornos deben UNIRSE (sin extremos abiertos en las uniones), el tono es ajustado y regular o está ausente, el peso de la pluma se ajusta al ancho de la forma.

Encuadre

• El marco se DERIVA, nunca se escribe: en los kits de plano de imagen son los límites de la PRIMERA región, así que la primera llamada es S.panel(<el marco>); con una cámara, a partir de la proyección. ¿Algo no visible? Verifica que esté dentro del marco antes de redibujarlo más grande. clip = true recorta al marco indicado.
• Cada capa de suelo se extiende hasta la parte inferior del marco (FOOT), o el cielo se muestra donde una capa más cercana se hunde. Una regla de suelo alcanza ambos bordes de una hoja, no más allá.

Escenas, noche, clima

• La profundidad es un número d (0 cercano, 1 lejano) y la pluma, el espacio de sombreado, el color y el detalle lo leen. Una montaña al peso del banco es EL fallo del paisaje plano.
• La noche invierte el valor: el cielo es el sombreado más denso, cada luz un hueco de ojo de cerradura; un resplandor es MÁS CLARO que el cielo. Una figura contra la luz es una silueta sombreada.
• La lluvia se dibuja al final, ausente debajo de un paraguas; un reflejo es el tema volteado, aplastado, en bandas rotas, sin contorno.

Páginas y paletas

• Una página debe declarar cada clave de paleta que usan sus temas; una clave desconocida se renderizó negra en silencio.
• Las ejecuciones paralelas de Chrome sin cabeza necesitan un --user-data-dir separado cada una, o las capturas vuelven en blanco.

Verificar

cd <espacio de trabajo>                                   # ver Configuración
bin/check.sh drawings/<nombre>.html                  # renderiza, sin NaN, sin errores de consola, sin desviación de clase
bin/shot.sh "drawings/<nombre>.html?outline=1" out.png [1120x700]   # un vistazo de trabajo; quita ?outline=1 para color
bin/render.sh <nombre>                               # la entrega: doodles/<nombre>/*.png, carpeta abierta

Chrome/Chromium se encuentra mediante bin/chrome.sh (anula con CHROME=/ruta); cada captura obtiene su propio --user-data-dir, por lo que las ejecuciones paralelas son seguras. Mira cada PNG (ábrelo, o léelo si puedes ver imágenes). Un check.sh que pase prueba que se renderizó, no que se lea.

Evolucionando esta skill

Cuando arregles una carencia, escríbelo donde una sesión FRESCA lo encontrará (si esta skill está instalada como solo lectura, guarda estas notas en el espacio de trabajo y dilo):

1. El archivo de referencia del tema (references/<tema>.md): la regla, con su síntoma, indicada como instrucción. Cr

… [truncado para traducción]