Croquis à l'encre

Doodle

Un système d'illustration dessinée par code. Les sujets sont décrits comme de la géométrie, projetés à travers une caméra et rendus par une "main" aléatoire qui donne un aspect dessiné au trait. HTML + JS simples, sans construction, sans dépendances : ouvrez une page dans un navigateur.

Configuration : où vous travaillez

Le moteur est livré avec cette compétence dans engine/ (à côté de ce fichier). Ne le modifiez jamais ici ; une mise à jour de la compétence le remplace.

1. Si LOCAL.md existe à côté de ce fichier, lisez-le d'abord : il nomme l'espace de travail et les outils de cette machine, et il remplace les valeurs par défaut ci-dessous.
2. Sinon, l'espace de travail est ./.doodle (caché) dans le projet en cours. S'il n'existe pas, créez-le : cp -R "<dossier de cette compétence>/engine" ./.doodle.
3. Chaque chemin ci-dessous (src/…, bin/…) est relatif à l'espace de travail. Le rendu nécessite Chrome ou Chromium (CHROME=/path pour remplacer) et python3 ; rien d'autre.

Un dessin = bin/new.sh <nom>, qui crée drawings/<nom>.js (dessinez à l'intérieur de draw(S), panoplie complète, cadrage automatique) et la page qui le rend. Plusieurs choses dans une même image sont un dessin ; plusieurs images séparées sont plusieurs noms.

Les exemples sont du code, pas des pages. Les modules dans src/ (things.js, people.js, trials.js, scapes.js …) contiennent des sujets travaillés : lisez-les et copiez leur construction dans votre dessin ; ne les ajoutez jamais et ne les modifiez jamais. La table de routage ci-dessous indique le module par lequel commencer.

Fournissez des IMAGES, pas des pages. Lorsqu'un dessin est lu, exécutez bin/render.sh <nom> : il écrit doodles/<nom>/<nom>.png (couleur) et <nom>-line.png (trait uniquement) dans le projet et ouvre ce dossier pour l'utilisateur. Dites-lui le chemin du dossier. Ne construisez pas, n'ouvrez pas et ne dirigez pas l'utilisateur vers une page HTML, un canevas ou un panneau de réglage, sauf s'il le demande.

Ce fichier est l'intégralité du contrat, et il est intentionnellement court pour être chargé entièrement. Les détails se trouvent dans references/ (déplacés textuellement, rien n'a été supprimé). La table de ROUTAGE ci-dessous indique quelle référence lire pour le travail. La lire fait partie du travail, ce n'est pas optionnel : chaque règle dans ces fichiers a été payée par un dessin rejeté.

La procédure, à chaque fois

1. Nommez la FORME et la CLASSE (tableaux ci-dessous). La forme détermine la page, le cadrage et le budget de détail ; la classe détermine le stylo, la plume, le remplissage et le ton.
2. Routez. Lisez les fichiers de référence nommés par la table de routage pour votre sujet, et ouvrez le module qu'elle nomme comme point de départ. Ne commencez jamais un sujet à partir d'un fichier vierge lorsqu'un kit existe déjà pour lui.
3. Mesurez avant de dessiner. À partir d'une image de référence : proportions et palette, sondées, jamais rappelées. Sans une : écrivez les proportions du sujet sous forme de nombres dans l'en-tête du module (la chaussure avait besoin de huit nombres ; trois rendus sans eux ont échoué). references/hand-and-craft.md § Mesure.
4. Construisez le TRAIT D'ABORD. Jugez ?outline=1 avant la couleur. Chaque valeur est portée deux fois, comme remplissage et en trait. Le détail diminue du premier plan au second plan jusqu'au fond. references/line-first.md.
5. Rendez et REGARDEZ, en trait ET en couleur, à la taille du cadre. Planche contact pour la composition, la grande image unique pour la qualité du trait. Les deux, à chaque itération.
6. Corrigez dans le KIT, pas le sujet, lorsque la panne est celle d'un assistant. Bouclez jusqu'à ce que chaque sujet soit lisible.
7. bin/check.sh drawings/<nom>.html (aucun argument = chaque dessin) : il rend, pas de NaN, pas d'erreurs de console, pas de dérive de classe.
8. Livrez : bin/render.sh <nom> — PNG dans doodles/<nom>/, dossier ouvert.
9. Intégrez ce que vous avez appris dans cette compétence DANS LE MÊME TOUR (§ Évolution).

Routage : quoi lire, par où commencer

Sujet	Partir de	Lire
un doodle quelconque, première fois dans une session	n/a	references/line-first.md, references/forms-and-classes.md
un objet du quotidien (téléphone, clés, bouteille, tissu, lunettes …)	src/things.js (le plus proche de 20 ; cam, S.prism, S.on, S.dash)	things.md
un produit, un appareil, un gadget, un électroménager	src/retro.js (Retro._kit)	products.md, geometry.md
un objet rond (tasse, vase, fruit, bouteille)	src/stilllife.js scène (lathe, ball) ou src/still.js	still-life.md, geometry.md (construction de chemin)
une nature morte / une composition / à partir d'une photo	src/stilllife.js	still-life.md
un meuble	src/furniture3.js, src/kitchen.js	products.md
un objet du quotidien (ordinateur portable, ciseaux, lunettes, brosse à dents, sèche-cheveux, t-shirt, savon, carnet, cadenas, nounours, cintre, sac à dos, bouteille…)	src/things.js def(...)	products.md, geometry.md
une PERSONNE, des gens, quelqu'un dans une scène	src/people.js People.figure ; jamais Trials._figure (mort)	people.md
un animal	src/trials.js (chat)	figures-and-trials.md
verre, liquide, transparence	src/trials.js (verre)	figures-and-trials.md
un vélo, un cadre, tout ce qui est en tubes fins	src/trials.js (bicyclette), S.limb	figures-and-trials.md
une chaussure, un vêtement, du tissu	src/trials.js (basket, fruit tissu)	figures-and-trials.md
plantes, fleurs, feuilles	src/plants3.js, src/flowers.js ; feuilles trouées : trials.js monstera	plants.md, figures-and-trials.md
un bâtiment, une maison, une façade	src/houses.js, src/arch.js, src/arch2.js	architecture.md, geometry.md
un paysage, une vue extérieure	src/scapes.js (le kit de scène)	landscapes.md
nuit, sombre, temps, pluie	src/trials.js (nuit, pluie) sur le kit de scène	figures-and-trials.md, landscapes.md
une rue, un diorama, un café	src/cafe.js, src/scenes.js	landscapes.md, geometry.md
une pièce / un intérieur	src/kitchen.js, src/deskscene.js	geometry.md, landscapes.md (fidélité)
plume et encre, pas de couleur	src/pen.js	line-first.md (ton), forms-and-classes.md (ink)
un storyboard / une séquence	src/board.js	storyboards.md
lettrage, un écriteau	src/letter.js	pages-and-files.md
un écran, UI, terminal (texte clair sur fond sombre)	src/letter.js + lignes de couleur tonale	pages-and-files.md (entrée letter.js)
faites-le bouger (Rive)	l'exportateur Rive (non fourni ; voir le fichier)	animation.md
regardez-le dessiner, dessin préparatoire	?draw=<key>, ?sketch=1	hand-and-craft.md
propre / vecteur / pas griffonné	n/a	la compétence clean-illustration si installée
un SET, un test de résistance	une page de set existante comme modèle	checking.md
un doodle qui doit s'ALIGNER avec un rendu (esquisse → effacement final)	tracez la silhouette, décrivez l'intérieur	registration.md
quelle page / fichier fait quoi	n/a	references/pages-and-files.md

Tous les chemins references/ sont relatifs à ce dossier de compétence.

Formes

Ils ont dit	Forme	Exemple pour démarrer	Budget de détail
"dessine-moi une tasse / une chaise"	sujet	src/things.js, src/retro.js	tout, une chose en pleine fidélité
"fais-moi N d'entre eux"	set	un dessin bin/new.sh par article, avec des assistants partagés dans chacun	une boîte à outils, le détail vit dans la boîte à outils
"une maison / une vitrine"	élévation	src/houses.js, src/arch.js	trois travées, 55% de remplissage noir uni
"une rue / une vue / un paysage"	scène	src/scapes.js, cadre + clip déclarés	l'échelle de profondeur à trois niveaux
"tout le pâté de maisons / un petit monde"	diorama	src/cafe.js	les bords du pâté de maisons restent DANS l'image
"une pièce"	intérieur	src/kitchen.js, src/deskscene.js	avant-plan complet, mur du fond caractéristique
"storyboard ceci"	planche	src/board.js	défini par la TAILLE DU PLAN, pas par le sujet
"plume et encre / pas de couleur"	enregistrer ink	src/pen.js	ton porté par le trait, aucun remplissage du tout

Un set n'est pas une scène (les choses sur une page ne partagent qu'une feuille, rien d'autre), et une planche n'est pas un set (une fidélité égale perd la séquence). L'indice : les choses doivent-elles partager le MÊME ESPACE ? Alors c'est une scène.

Classes (src/spec.js ; texte complet dans references/forms-and-classes.md)

classe	stylo	plume	fit	remplissage	ton
object	0.30	ferme	.84/.84	plat, ombré par la normale de la face	l'ombre est un REMPLISSAGE plus foncé, plus son jumeau en trait
ink	0.26	stylo	.90/.88	AUCUN, le papier est l'objet	trait uniquement ; un tramage de points est interdit
product	0.30	ferme	.84/.84	un matériau = une couleur	plis > ~35° seulement
elevation	0.30	ferme	.86/.84	55% de carreaux noirs unis	hachurer les toits, le côté ombragé
plant	0.30	ferme	.84/.88	plat ; teinte pâle .96, autres .84	griffonnage pour la masse du feuillage uniquement
flower	0.26	ferme	.92/.90	plat	aucun
scene	0.30	ferme	.96/.94	plat ; ombre un remplissage plus foncé	hachurer uniquement là où rien ne se tient devant
diorama	0.22	ferme	.94/.92	plat	aucun
panel	0.26	ferme	.94/.94	plat, moins que le sujet seul	une valeur pour le sol, une pour le ciel
furniture, interior	0.16 / 0.15	stylo	—	POIDS ANCIENS ; les nouveaux travaux prennent object	—

Déclarez la classe, ne retapez jamais les nombres : Spec.wrap(cls, label, build). bin/check.sh vérifie la dérive sur chaque page. Une classe possède la main ; une page possède le papier. N'ajoutez une classe que lorsque la politique de remplissage ou de ton diffère véritablement.

Règles strictes (chacune est un dessin rejeté)

Trait d'abord et fidélité

• Le trait uniquement (?outline=1) doit être un dessin FINI. Chaque page honore ?outline=1 ; vérifiez les pages que vous avez copiées (un outline: false codé en dur).
• Chaque valeur est portée deux fois : matériau sombre = hachures ; un tournant = des nervures qui se courbent avec la surface ; une ombre portée = hachures sans contour ; une marque qui NOMME la chose = une marque avec contour, jamais un remplissage w: 0. Auditez chaque w: 0.
• Le foyer reçoit tous les détails, le second plan le contour plus 2-3 lignes, l'arrière-plan est le PAPIER (son seul ton l'ombre que le sujet projette). Plissez les yeux : si le mur est aussi chargé que le sujet, réduisez le mur.
• Les hachures sont MISES EN FILE D'ATTENTE comme des lignes (S.hatch), jamais un ton k.T ; les remplissages ultérieurs les coupent. gap est la valeur : 2.4 clair, 1.5 moyen, 1.1 foncé. Ne croisez les hachures que sur la seule chose la PLUS sombre du foyer.
• Un côté ombré est un CROISSANT délimité par des courbes qui épousent la forme, jamais une coupe en demi-plan droite (cela se lit comme un objet coupé en deux).

Géométrie et construction de chemin

• Une ligne droite que vous n'avez pas créée est un bogue de chemin : une corde provenant de la concaténation de deux moitiés dans la mauvaise direction, ou une forme ouverte tracée closed. Imprimez les points.
• Un anneau autour d'un corps opaque n'est que sa moitié PROCHE ; seule une bouche ouverte est une ellipse complète.
• Les trous sont COUPÉS (keyhole), jamais peints dans la couleur de fond. Le trou apparaît en trait mais pas en couleur = son enroulement.
• Les choses minces (membres, tubes, tiges) sont UNE SEULE bande à travers leurs articulations ; dessinez les contours des côtés, laissez les extrémités se brancher sur ce qui est dessiné plus tard.
• Contenants : intérieur → bord lointain → contenu → paroi avant. Le contenu s'enfonce sous le bord.
• Mesurez les proportions sous forme de nombres avant de dessiner un objet connu. Étirer une forme erronée la maintient erronée (la chaussure).
• Dimensionnez le meuble à partir du corps qui l'utilise, jamais l'inverse.
• Un doodle qui doit se superposer à une image : TRACEZ sa silhouette à partir de l'alpha de l'image, décrivez l'intérieur, fixez le cadre à l'image et rognez le fit de classe à l'exportation (registration.md).
• Personnes : People.figure uniquement. Le geste avant le détail (poids sur une jambe, hanches et épaules inclinées en opposition) ; les poses sont des ANGLES donc la proportion est verrouillée ; les meubles et les choses tenues sont dérivés des articulations renvoyées. Les cheveux de dos se peignent avant le corps.
• Une longue ligne droite pointillée à travers une forme molle = le bogue du croissant-enveloppe (corrigé dans S.soft) ; un tour ondulé = peu de nœuds + assouplissement par segment : utilisez un profil dense avec steps: 1.
• { dash: true } ne fait rien : utilisez S.dash. Cadrez les objets sur leur boîte englobante de contenu, pas à l'œil.
• "Brouillon" = construction, pas de détail : jugez UN sujet en taille réelle ; les contours doivent SE REJOINDRE (pas d'extrémités ouvertes aux articulations), le ton est serré et régulier ou absent, le poids du stylo correspond à la largeur de la forme.

Cadrage

• Le cadre est DÉRIVÉ, jamais tapé : sur les kits de plan image c'est les limites de la PREMIÈRE région, donc le premier appel est S.panel(<le cadre>) ; avec une caméra, à partir de la projection. Quelque chose n'est pas visible ? Vérifiez qu'il est à l'intérieur du cadre avant de le redessiner plus grand. clip = true découpe au cadre déclaré.
• Chaque couche de sol va jusqu'en bas du cadre (FOOT), sinon le ciel apparaît là où une couche plus proche plonge. Une règle de sol atteint les deux bords d'une feuille, pas au-delà.

Scènes, nuit, temps

• La profondeur est un nombre d (0 proche, 1 lointain) et le stylo, l'écart de hachure, la couleur et le détail le lisent tous. Une montagne au poids du banc est L'ÉCHEC du paysage plat.
• La nuit inverse la valeur : le ciel est la hachure la plus dense, chaque lumière un espace en trou de serrure ; une lueur est PLUS CLAIRE que le ciel. Une figure contre la lumière est une silhouette hachurée.
• La pluie est dessinée en dernier, absente sous un parapluie ; un reflet est le sujet inversé, écrasé, en bandes brisées, sans contour.

Pages et palettes

• Une page doit déclarer chaque clé de palette que ses sujets utilisent ; une clé inconnue une fois rendue donne du noir en silence.
• Les exécutions parallèles de Chrome sans tête ont besoin d'un --user-data-dir séparé chacune, sinon les captures reviennent vides.

Vérification

cd <espace de travail>                                     # voir Configuration
bin/check.sh drawings/<nom>.html                  # rend, pas de NaN, pas d'erreurs de console, pas de dérive de classe
bin/shot.sh "drawings/<nom>.html?outline=1" out.png [1120x700]   # un aperçu fonctionnel ; enlevez ?outline=1 pour la couleur
bin/render.sh <nom>                               # la livraison : doodles/<nom>/*.png, dossier ouvert

Chrome/Chromium est trouvé par bin/chrome.sh (remplacez CHROME=/path) ; chaque capture reçoit son propre --user-data-dir, donc les exécutions parallèles sont sans danger. Regardez chaque PNG (ouvrez-le, ou lisez-le si vous pouvez voir des images). Un check.sh réussi prouve qu'il a été rendu, pas qu'il est lisible.

Faire évoluer cette compétence

Lorsque vous corrigez un manque, écrivez-le là où une SESSION FRAÎCHE le trouvera (si cette compétence est installée en lecture seule, conservez ces notes dans l'espace de travail et mentionnez-le) :

1. Le fichier de référence du sujet (references/<sujet>.md) : la règle, avec son symptôme, énoncée comme une instruction. Cr

…

[abrégé pour la traduction]