Croquis à l'encre

Que fait Croquis à l'encre ?

Dessine une image sous forme de SVG animé autonome : traits d'encre tremblants d'épaisseur variable, lavis de marqueur légèrement décalés par rapport aux traits, sur papier crème. Vue 2D plate, de face ou de côté. Les lignes « bouillonnent » (le tremblement est redessiné toutes les 2 images), de sorte qu'un sujet immobile semble vivant, et la scène peut ajouter un petit mouvement avec t. Pour une version 3D isométrique, utilisez plutôt la compétence handdrawn-3d. Les étiquettes et titres utilisent une police de caractères manuscrite intégrée qui couvre le latin et le vietnamien.

Kit : assets/kit.js · moteur de rendu : assets/render.mjs · toutes les fonctions : references/kit.md (à lire avant d'écrire une scène) · exemples commentés : examples/ (tasse, pomme, chat, plante, maison, repas).

Configuration (une fois)

L'export PNG/GIF nécessite @resvg/resvg-js. Si render.mjs indique qu'il est manquant, exécutez npm install dans le dossier de cette compétence. La sortie SVG ne nécessite rien.

Avant de dessiner

• Est-ce dessinable ? Si le sujet est abstrait (« espoir », « productivité », « économie »), ne dessinez pas quelque chose de vague. Dites-le et suggérez une ou deux scènes concrètes qui le montrent (« un plant poussant à travers une fissure dans un trottoir »), puis dessinez celle que l'utilisateur choisit.
• Diagrammes, graphiques, interface utilisateur, boutons, choses interactives : pas cette compétence.
• Animation : le SVG boucle toujours (bouillonnement des lignes). Ajoutez un petit mouvement qui appartient au sujet (vapeur, mouvement de queue, clignement, balancement de feuilles) lorsque cela convient ou lorsque l'utilisateur le demande ; sinon, le bouillonnement seul suffit. SVG à une seule image seulement lorsque l'utilisateur demande une image fixe (--still).

Flux de travail

1. Parties et vue. Listez les parties réelles du sujet et choisissez la vue : face ou côté. Une théière : corps, couvercle, bouton, bec, anse, pied ; vue de côté. Dessinez à partir des parties réelles (bords, anses, couvercles, tiges, planches, tuiles), pas d'un bloc générique avec un nom dessus.
2. Esquisse. Écrivez un petit tableau dans un commentaire en haut de la scène : partie, appel de forme, boîte (x, y, l, h), couleur. Le sujet remplit environ 65 à 80 % de la feuille, centré, avec de l'espace. La ligne de sol/table se situe à environ 80–88 % du bas.
3. Dessinez d'arrière en avant dans scene.js avec le kit : ombre → éléments derrière → corps principal → détails dessus → étiquettes. Privilégiez les pièces prêtes à l'emploi (k.cat, k.person, k.tree, k.house, k.window, k.leaf…) et modifiez leurs options plutôt que de les redessiner. Utilisez k.turned pour tout objet rond que l'on pourrait tourner sur un tour (tasses, pots, vases, bouteilles, bols, lampes). Utilisez k.tube pour les anses, tiges, queues, bras et branches.
4. Rendu et inspection :

   node <skill>/assets/render.mjs scene.js -o out/scene.svg --png out/scene.png --thumb --grid
   

   Ouvrez out/scene.png avec l'outil Lecture et regardez-le. La superposition --grid imprime les coordonnées pour que vous puissiez lire où se trouvent les choses. Regardez aussi out/scene-128.png : le sujet doit encore être reconnaissable à 128 px.
5. Corrigez et refaites le rendu. Vérifiez :
   • Est-ce reconnaissable au premier coup d'œil, et à 128 px ? La silhouette d'abord : si le contour ne dit pas « théière », aucun détail ne la sauvera.
   • Proportions et chevauchements : les anses sont attachées aux corps, les choses reposent sur le sol, rien ne flotte ou ne se chevauche de manière incorrecte.
   • La lumière vient du coin supérieur gauche partout (ombrage/ hachures en bas à droite).
   • Les étiquettes ne se trouvent pas sur le dessin ni ne croisent d'autres lignes. Répétez les étapes 4–5 jusqu'à ce que ce soit correct (généralement 2 à 4 tours). Ensuite, faites le rendu final sans --grid.

Ne livrez jamais sans avoir regardé le PNG. Livrez le SVG (l'image animée) et les chemins PNG, et montrez le PNG. Si la scène bouge, vérifiez aussi quelques images (voir Animation).

Règles de style

• Un seul aspect : encre + lavis de marqueur plat. Pas de texture ni de grain. Pas de dégradés, lueurs, ombres portées, flou, astuces d'opacité ou <text> SVG (utilisez k.text / k.label / k.title). N'ajoutez pas de SVG brut.
• Couleur : noms de palette (red, coral, orange, ochre, yellow, sage, green, leaf, teal, sky, blue, navy, lilac, plum, pink, wood, brown, chocolate, grey, stone, charcoal, white, cream, sand, skin, tan). 3 à 5 couleurs par image plus l'encre. Toute couleur hexadécimale est automatiquement adoucie, mais les noms de palette rendent le mieux.
• Ombrage : shade: true (ou 0.15–0.35) sur les volumes principaux ; hatch: true sur un ou deux gros objets au maximum. La lumière vient toujours du coin supérieur gauche.
• Épaisseurs de trait : contours 'outline' (par défaut), détails intérieurs 'detail', petits marquages et lignes de repère 'fine'.
• Mignon et rond : les animaux et plantes sont doux et ronds, avec de grosses têtes, des yeux en points et de petites jouesroses. Pas d'anatomie réaliste et pointue.
• Composition : un seul sujet clair, centré, remplissant la majeure partie de la feuille. Une ombre au sol (k.shadow) sous tout ce qui se tient sur quelque chose.
• Texte : k.title(...) optionnel en haut à gauche, plus de courtes étiquettes en minuscules (k.label) avec lignes de repère, placées dans les marges vides. Jamais de boîtes ou de bulles flottant sur le dessin. Écrivez les étiquettes dans la langue de l'utilisateur. Le vietnamien est entièrement supporté.
• Feuille : 1000×1000 par défaut. Pour les scènes larges, utilisez export const sheet = { width: 1200, height: 900 }. --transparent supprime le papier.

Modèle de scène

// théière, vue de côté. parties : corps (tourné), couvercle, bouton, bec (tube), anse (tube), ombre
export const sheet = { seed: 1 };
export function draw(k, t = 0) {
  k.shadow(500, 820, 300, 34);
  k.tube([[690, 540], [810, 520], [810, 650], [700, 710]], 34, { fill: 'teal' });           // anse (extrémités cachées par le corps)
  k.tube([[330, 640], [250, 560], [200, 470]], [60, 26], { fill: 'teal', shade: 0.3 });    // bec
  const pot = k.turned([[150, 0], [230, 70], [250, 180], [210, 300], [170, 330]],
                       { cx: 500, y: 480, fill: 'teal', hatch: true });                    // corps
  k.ellipse(500, 480, 150, 22, { fill: 'teal', weight: 'detail' });                        // couvercle
  k.blob(500, 445, 30, { squash: 0.8, fill: 'ochre' });                                   // bouton
  k.label('la bonne théière', { x: 640, y: 300, to: [560, 440] });
}

Animation (toujours activée)

out.svg est un SVG animé en boucle par défaut : images commutées par CSS, sans script, fonctionne dans les navigateurs et les balises <img> (les moteurs de rendu sans animation CSS affichent l'image 0). Les scènes reçoivent t ∈ [0, 1), une boucle. Restez simple : au plus une ou deux choses en mouvement (vapeur, mouvement de queue, clignement, balancement de feuilles, fumée) en plus du bouillonnement automatique des lignes : le tremblement est redessiné toutes les 2 images, donc même un sujet immobile semble vivant. Bouclez le mouvement de manière transparente avec Math.sin(2 * Math.PI * t). Les pièces prêtes à l'emploi prennent t : k.steam(x, y, { t }), k.cat(..., { animate: true, t }), k.person(..., { wave: true, t }).

node <skill>/assets/render.mjs scene.js -o out/scene.svg --png out/scene.png          # SVG animé + PNG fixe
node <skill>/assets/render.mjs scene.js -o out/scene.svg --gif out/scene.gif          # + GIF, fonctionne partout
node <skill>/assets/render.mjs scene.js -o out/scene.svg --still                      # SVG à une seule image
     --frames 8 --fps 10 --boil 2 --gif-size 560

Vérifiez un GIF en regardant quelques images : ffmpeg -i out/scene.gif -vf "select='not(mod(n\,3))',scale=300:-1,tile=4x1" -frames:v 1 out/frames.png (ou vérifiez le PNG fixe, qui est l'image 0). Les GIF sont limités à 256 couleurs : gardez-les à ≤ 600 px de large.