Tuschezeichnung

Doodle

Ein System für Code-Zeichnungen. Motive werden als Geometrie erstellt, durch eine Kamera projiziert und von einer gesetzten "Hand" gerendert, die eine Markierung wie gezeichnet aussehen lässt. Reines HTML + JS, kein Build, keine Abhängigkeiten: Öffnen Sie eine Seite in einem Browser.

Einrichtung: Wo Sie arbeiten

Die Engine befindet sich in diesem Skill unter engine/ (neben dieser Datei). Bearbeiten Sie sie niemals dort; eine Aktualisierung des Skills überschreibt sie.

1. Wenn LOCAL.md neben dieser Datei existiert, lesen Sie es zuerst: Es benennt den Arbeitsbereich und die Werkzeuge dieser Maschine und überschreibt die folgenden Standardeinstellungen.
2. Andernfalls ist der Arbeitsbereich ./.doodle (versteckt) im aktuellen Projekt. Wenn er nicht existiert, erstellen Sie ihn: cp -R "<Ordner dieses Skills>/engine" ./.doodle.
3. Jeder Pfad unten (src/…, bin/…) ist relativ zum Arbeitsbereich. Zum Rendern werden Chrome oder Chromium (CHROME=/path zum Überschreiben) und python3 benötigt; sonst nichts.

Eine Zeichnung = bin/new.sh <name>, erstellt drawings/<name>.js (zeichnen Sie innerhalb von draw(S), vollständiges Toolkit, automatisch gerahmt) und die Seite, die sie rendert. Mehrere Dinge in einem Bild sind eine Zeichnung; mehrere separate Bilder sind mehrere Namen.

Die Beispiele sind Code, keine Seiten. Die Module in src/ (things.js, people.js, trials.js, scapes.js …) enthalten ausgearbeitete Motive: Lesen Sie sie und kopieren Sie deren Konstruktion in Ihre Zeichnung; fügen Sie niemals etwas hinzu oder bearbeiten Sie sie. Die unten stehende Routingtabelle gibt an, von welchem Modul aus Sie beginnen sollen.

Liefern Sie BILDER, keine Seiten. Wenn eine Zeichnung gelesen wird, führen Sie bin/render.sh <name> aus: Es schreibt doodles/<name>/<name>.png (Farbe) und <name>-line.png (nur Linien) in das Projekt und öffnet diesen Ordner für den Benutzer. Teilen Sie ihm den Ordnerpfad mit. Erstellen, öffnen Sie keine HTML-Seite, Leinwand oder Bedienfeld, es sei denn, der Benutzer fordert dies an.

Diese Datei ist der gesamte Vertrag, und sie ist absichtlich kurz, damit sie vollständig geladen wird. Die Details befinden sich in references/ (wortwörtlich dorthin verschoben, nichts weggelassen). Die folgende ROUTING-Tabelle gibt an, welche Referenz für den Auftrag gelesen werden soll. Das Lesen ist Teil des Auftrags, nicht optional: Jede Regel in diesen Dateien wurde mit einer abgelehnten Zeichnung bezahlt.

Das Verfahren, jedes Mal

1. Benennen Sie die FORM und die KLASSE (Tabellen unten). Die Form bestimmt die Seite, den Rahmen und das Detailbudget; die Klasse bestimmt den Stift, die Spitze, die Füllung und den Ton.
2. Route. Lesen Sie die Referenzdateien, die die Routingtabelle für Ihr Thema benennt, und öffnen Sie das Modul, das es als Ausgangspunkt benennt. Beginnen Sie ein Thema niemals mit einer leeren Datei, wenn bereits ein Baukasten dafür existiert.
3. Messen Sie vor dem Zeichnen. Aus einem Referenzbild: Proportionen und Palette, abgetastet, niemals aus dem Gedächtnis. Ohne eines: Schreiben Sie die Proportionen des Themas als Zahlen im Modulkopf (der Schuh benötigte acht Zahlen; drei Renderings ohne sie schlugen fehl). references/hand-and-craft.md § Messung.
4. Erstellen Sie zuerst die LINIE. Beurteilen Sie ?outline=1 vor der Farbe. Jeder Wert wird doppelt geführt, als Füllung und in der Linie. Details nehmen vom Fokus über den Mittelgrund zum Papier hin ab. references/line-first.md.
5. Rendern und ANSCHAUEN, in Linie UND Farbe, in Rahmengröße. Kontaktabzug für die Komposition, das große Einzelbild für die Linienqualität. Beides, jede Runde.
6. Beheben Sie es im BAUkasten, nicht im Thema, wenn der Bruch auf einen Helfer zurückgeht. Wiederholen, bis jedes Thema gelesen wird.
7. bin/check.sh drawings/<name>.html (kein Argument = jede Zeichnung): Es rendert, kein NaN, keine Konsolenfehler, keine Klassenabweichung.
8. Liefern: bin/render.sh <name> — PNGs in doodles/<name>/, Ordner geöffnet.
9. Integrieren Sie, was Sie gelernt haben, in diesen Skill IN DERSELBEN RUNDE (§ Weiterentwicklung).

Routing: Was lesen, wo beginnen

Thema	Starten von	Lesen
irgendeine Zeichnung, erstes Mal in einer Sitzung	n/v	references/line-first.md, references/forms-and-classes.md
ein Alltagsgegenstand (Telefon, Schlüssel, Flasche, Stoff, Brille …)	src/things.js (nächstgelegenes von 20; cam, S.prism, S.on, S.dash)	things.md
ein Produkt, Gerät, Gadget, Haushaltsgerät	src/retro.js (Retro._kit)	products.md, geometry.md
ein runder Gegenstand (Tasse, Vase, Obst, Flasche)	src/stilllife.js Bühne (lathe, ball) oder src/still.js	still-life.md, geometry.md (Pfadkonstruktion)
ein Stillleben / Arrangement / von einem Foto	src/stilllife.js	still-life.md
Möbel	src/furniture3.js, src/kitchen.js	products.md
ein Alltagsgegenstand (Laptop, Schere, Brille, Zahnbürste, Föhn, T-Shirt, Seife, Notizbuch, Vorhängeschloss, Teddy, Kleiderbügel, Rucksack, Flasche…)	src/things.js def(...)	products.md, geometry.md
eine PERSON, Menschen, jemand in einer Szene	src/people.js People.figure; niemals Trials._figure (tot)	people.md
ein Tier	src/trials.js (cat)	figures-and-trials.md
Glas, Flüssigkeit, Transparenz	src/trials.js (glass)	figures-and-trials.md
ein Fahrrad, ein Rahmen, alles aus dünnen Rohren	src/trials.js (bicycle), S.limb	figures-and-trials.md
ein Schuh, ein Kleidungsstück, Stoff	src/trials.js (sneaker, fruit Stoff)	figures-and-trials.md
Pflanzen, Blumen, Blätter	src/plants3.js, src/flowers.js; gelochte Blätter: trials.js monstera	plants.md, figures-and-trials.md
ein Gebäude, Haus, Fassade	src/houses.js, src/arch.js, src/arch2.js	architecture.md, geometry.md
eine Landschaft, Außenansicht	src/scapes.js (das Szenen-Kit)	landscapes.md
Nacht, Dunkelheit, Wetter, Regen	src/trials.js (night, rain) auf dem Szenen-Kit	figures-and-trials.md, landscapes.md
eine Straße, ein Diorama, ein Café	src/cafe.js, src/scenes.js	landscapes.md, geometry.md
ein Raum / Innenraum	src/kitchen.js, src/deskscene.js	geometry.md, landscapes.md (Treue)
Feder und Tusche, keine Farbe	src/pen.js	line-first.md (Ton), forms-and-classes.md (ink)
ein Storyboard / eine Sequenz	src/board.js	storyboards.md
Beschriftung, ein Schild	src/letter.js	pages-and-files.md
ein Bildschirm, UI, Terminal (heller Text auf dunklem Hintergrund)	src/letter.js + tonfarbene Linien	pages-and-files.md (letter.js Eintrag)
zum Bewegen bringen (Rive)	den Rive-Exporteur (nicht gebündelt; siehe die Datei)	animation.md
beim Zeichnen zusehen, Untermalung	?draw=<key>, ?sketch=1	hand-and-craft.md
sauber / Vektor / nicht doodleartig	n/v	den Skill clean-illustration falls installiert
ein SET, ein Stresstest	eine vorhandene Set-Seite als Vorlage	checking.md
eine Zeichnung, die mit einem Rendering AUSGERICHTET sein muss (Skizze → endgültige Radierung)	die Silhouette nachzeichnen, das Innere gestalten	registration.md
welche Seite / Datei was macht	n/v	references/pages-and-files.md

Alle references/ Pfade sind relativ zu diesem Skill-Ordner.

Formulare

Sie sagten	Form	Beispiel zum Starten	Detailbudget
"zeichne mir einen Becher / einen Stuhl"	Motiv	src/things.js, src/retro.js	alles, ein Ding in voller Treue
"mache mir N davon"	Set	eine bin/new.sh Zeichnung pro Element, gemeinsame Helfer in jeder	ein Toolkit, Details leben im Toolkit
"ein Haus / eine Ladenfront"	Aufriss	src/houses.js, src/arch.js	drei Achsen, 55% vollflächige schwarze Füllung
"eine Straße / eine Ansicht / eine Landschaft"	Szene	src/scapes.js, angegebener Rahmen + Ausschnitt	die dreistufige Tiefenskala
"der ganze Block / eine kleine Welt"	Diorama	src/cafe.js	die Kanten des Blocks bleiben IM Bild
"ein Raum"	Innenraum	src/kitchen.js, src/deskscene.js	Vordergrund voll, Rückwand charakteristisch
"storyboarde das"	Board	src/board.js	festgelegt durch EINSTELLUNGSGRÖSSE, nicht das Thema
"Feder und Tusche / keine Farbe"	registriere ink	src/pen.js	Ton in Linie getragen, überhaupt keine Füllung

Ein Set ist keine Szene (Dinge auf einer Seite teilen nichts außer einem Blatt), und ein Board ist kein Set (gleiche Treue verliert die Sequenz). Das Unterscheidungsmerkmal: Müssen die Dinge den GLEICHEN RAUM teilen? Dann ist es eine Szene.

Klassen (src/spec.js; vollständiger Text in references/forms-and-classes.md)

Klasse	Stift	Spitze	Maßstab	Füllung	Ton
object	0.30	fest	.84/.84	flach, schattiert durch Flächennormale	Schatten ist eine dunklere FÜLLUNG, plus ihr Liniendouble
ink	0.26	Feder	.90/.88	KEINE, das Papier ist das Objekt	nur Linie; ein Punktraster ist verboten
product	0.30	fest	.84/.84	ein Material = eine Farbe	Falten > ~35° nur
elevation	0.30	fest	.86/.84	55% vollflächige schwarze Scheiben	Dächer schraffieren, die Schattenseite
plant	0.30	fest	.84/.88	flach; blasses Schatten .96, andere .84	Gekritzel nur für Massenlaub
flower	0.26	fest	.92/.90	flach	keine
scene	0.30	fest	.96/.94	flach; Schatten eine dunklere Füllung	Schraffur nur, wo nichts davor steht
diorama	0.22	fest	.94/.92	flach	keine
panel	0.26	fest	.94/.94	flach, weniger als das Motiv allein	ein Wert Boden, ein Himmel
furniture, interior	0.16 / 0.15	Feder	—	VERALTETE Gewichte; neue Arbeit verwendet object	—

Deklarieren Sie die Klasse, tippen Sie die Zahlen nie neu: Spec.wrap(cls, label, build). bin/check.sh prüft Abweichungen auf jeder Seite. Eine Klasse besitzt die Hand; eine Seite besitzt das Papier. Fügen Sie eine Klasse nur hinzu, wenn sich die Füll- oder Tonrichtlinie wirklich unterscheidet.

Harte Regeln (jede ist eine abgelehnte Zeichnung)

Linie zuerst und Treue

• Nur Linien (?outline=1) muss eine FERTIGE Zeichnung sein. Jede Seite respektiert ?outline=1; überprüfen Sie kopierte Seiten (eine fest codierte outline: false).
• Jeder Wert wird doppelt geführt: dunkles Material = Schraffur; eine Drehung = Rippen, die sich mit der Oberfläche wölben; ein Schlagschatten = Schraffur ohne Umriss; eine Markierung, die das Ding BENENNT = eine umrandete Markierung, niemals eine w: 0 Füllung. Prüfen Sie jede w: 0.
• Fokus erhält volle Details, der Mittelgrund Kontur plus 2–3 Linien, der Hintergrund ist PAPIER (sein einziger Ton der Schatten, den das Motiv wirft). Zwinkern Sie: Wenn die Wand so belebt ist wie das Motiv, reduzieren Sie die Wand.
• Schraffur wird als Linien in die WARTESCHLANGE gestellt (S.hatch), niemals als ein k.T Ton; spätere Füllungen schneiden sie. gap ist der Wert: 2.4 hell, 1.5 mittel, 1.1 dunkel. Kreuzschraffur nur das EINE dunkelste Ding im Fokus.
• Eine Schattenseite ist ein HALBMOND, begrenzt durch Kurven, die sich mit der Form wölben, niemals ein gerader Halbebenenschnitt (das liest sich wie ein in zwei Hälften geteiltes Objekt).

Geometrie und Pfadkonstruktion

• Eine gerade Linie, die Sie nicht erstellt haben, ist ein Pfadfehler: ein Akkord aus dem Aneinanderfügen zweier Hälften in der falschen Richtung, oder eine offene Form, die closed gezeichnet wurde. Drucken Sie die Punkte.
• Ein Band um einen undurchsichtigen Körper ist nur seine NAHE Hälfte; nur ein offener Mund ist eine vollständige Ellipse.
• Löcher werden AUSGESCHNITTEN (keyhole), niemals in der Hintergrundfarbe gemalt. Loch erscheint in der Linie, aber nicht in der Farbe = seine Wicklungsrichtung.
• Dünne Dinge (Glieder, Röhren, Stiele) sind EIN Streifen durch ihre Gelenke; umreißen Sie die Seiten, lassen Sie die Enden in später Gezeichnetes einstecken.
• Behälter: innen → hinterer Rand → Inhalt → Vorderwand. Inhalt sinkt unter den Rand.
• Messen Sie Proportionen als Zahlen, bevor Sie ein bekanntes Objekt zeichnen. Das Strecken einer falschen Form hält sie falsch (der Schuh).
• Größe der Möbel vom Körper ableiten, der sie benutzt, niemals umgekehrt.
• Eine Zeichnung, die mit einem Bild übereinstimmen muss: Verfolgen Sie ihre Silhouette aus dem Alpha des Bildes, gestalten Sie das Innere, fixieren Sie den Rahmen auf das Bild und schneiden Sie die Klassenanpassung beim Export ab (registration.md).
• Personen: nur People.figure. Geste vor Details (Gewicht auf einem Bein, Hüften und Schultern neigen sich entgegengesetzt); Posen sind WINKEL, also ist das Verhältnis fest; Möbel und gehaltene Dinge werden von den zurückgegebenen Gelenken abgeleitet. Hinterhaare werden vor dem Körper gemalt.
• Eine lange gerade gepunktete Linie über eine weiche Form = der Halbmond-Wicklungsfehler (behoben in S.soft); eine wellige Drehbank = wenige Knoten + segmentweise Erleichterung: Verwenden Sie ein dichtes Profil mit steps: 1.
• { dash: true } bewirkt nichts: verwenden Sie S.dash. Rahmenobjekte auf ihren Inhaltsbegrenzungsrahmen, nicht nach Augenmaß.
• "Schlampig" = Konstruktion, nicht Detail: beurteilen Sie EIN Motiv in voller Größe; Umrisse müssen SICH TREFFEN (keine offenen Enden an Gelenken), Ton ist eng und regelmäßig oder abwesend, Stiftgewicht passt zur Breite der Form.

Rahmung

• Der Rahmen wird ABGELEITET, niemals getippt: Bei den Bildebenen-Kits sind es die Grenzen der ERSTEN Region, also ist der erste Aufruf S.panel(<der Rahmen>); bei einer Kamera aus der Projektion. Etwas nicht sichtbar? Prüfen Sie, ob es innerhalb des Rahmens ist, bevor Sie es größer zeichnen. clip = true beschneidet auf den angegebenen Rahmen.
• Jede Bodenebene reicht bis zum Rahmenboden (FOOT), oder der Himmel zeigt, wo eine nähere Ebene abfällt. Eine Bodenregel erreicht beide Kanten eines Blattes, nicht darüber hinaus.

Szenen, Nacht, Wetter

• Tiefe ist eine Zahl d (0 nah, 1 fern) und Stift, Schraffurabstand, Farbe und Detail lesen sie alle. Ein Berg im Gewicht der Bank ist DER Flachlandschaftsfehler.
• Nacht invertiert den Wert: Der Himmel ist die dichteste Schraffur, jedes Licht ein ausgeschnittenes Loch; ein Leuchten ist HELLER als der Himmel. Eine Figur gegen Licht ist eine schraffierte Silhouette.
• Regen wird zuletzt gezeichnet, fehlt unter einem Regenschirm; eine Reflexion ist das Motiv gespiegelt, gestaucht, in unterbrochenen Bändern, ohne Umriss.

Seiten und Paletten

• Eine Seite muss jeden Palettenschlüssel deklarieren, den ihre Motive verwenden; ein unbekannter Schlüssel wurde einmal schwarz gerendert, ohne Meldung.
• Parallele kopflose Chrome-Läufe benötigen jeweils ein separates --user-data-dir, sonst kommen Aufnahmen leer zurück.

Überprüfen

cd <Arbeitsbereich>                                     # siehe Einrichtung
bin/check.sh drawings/<name>.html                  # rendert, kein NaN, keine Konsolenfehler, keine Klassenabweichung
bin/shot.sh "drawings/<name>.html?outline=1" out.png [1120x700]   # ein Arbeitsansicht; drop ?outline=1 für Farbe
bin/render.sh <name>                               # die Auslieferung: doodles/<name>/*.png, Ordner geöffnet

Chrome/Chromium wird von bin/chrome.sh gefunden (überschreiben CHROME=/path); jede Aufnahme erhält ihr eigenes --user-data-dir, daher sind parallele Läufe sicher. Betrachten Sie jedes PNG (öffnen Sie es, oder lesen Sie es, wenn Sie Bilder sehen können). Ein bestandenes check.sh beweist, dass es gerendert wurde, nicht dass es gelesen wird.

Weiterentwicklung dieses Skills

Wenn Sie eine Lücke beheben, schreiben Sie sie dort auf, wo eine FRISCHE Sitzung sie finden wird (wenn dieser Skill schreibgeschützt installiert ist, behalten Sie diese Notizen im Arbeitsbereich und sagen Sie es):

1. Die Referenzdatei des Themas (references/<topic>.md): die Regel mit ihrem Symptom, als Anweisung formuliert. Cr