Anatomie-Spiegel-338

Anatomie

Diese Fähigkeit erstellt Figuren wie ein kleines Instrument auf einer Werkbank: eine schwere Basis auf Füßen, Schienen mit Strichlinealen, einen Schlitten auf Buchsen, gerändelte Knöpfe, Schraubenfedern, ein Messgerät, dessen Nadel sich bewegt, Schrauben als winzige Punkte. Der Leser versteht die Idee, weil er die Maschine erkennt. Jede Zahl, die die Figur zeigt, stammt aus demselben Modell, das ihre Teile bewegt.

Acht vollständige Beispiele werden mit der Fähigkeit mitgeliefert. Öffne das nächstgelegene, bevor du beginnst. Jedes framework-freie Beispiel wird mit node examples/<name>/build.mjs erstellt, das eine eigenständige HTML-Seite neben dem Skript erzeugt; füge --light für das helle Thema hinzu.

• examples/dial-indicator/ ist das kleinste: eine Messuhr auf einem Ständer, insgesamt etwa 300 Zeilen.
• examples/desk-computer/ ist framework-freies SVG: ein Tischcomputer mit einer Tastatur, auf der du tippen kannst. Die getippte Zeile erscheint auf einem CRT-Bildschirm, der in der Ebene der Gerätefront gezeichnet ist, und das Bild bricht zu einer Linie und einem Punkt zusammen, wenn du es ausschaltest. Es hat etwa 85 Festkörper und 850 Pfade.
• examples/arcade-cabinet/ ist ein aufrechter Arcade-Automat mit abgenommener Seitenverkleidung, ein Held mit etwa 240 Festkörpern und 15 Kabeln. Ein Vierteldollar fliegt in den Schlitz, rollt den Münzschacht in der Geschwindigkeit hinunter, die eine rollende Scheibe auf einer 30°-Steigung erreicht, löst den Münzschalterdraht aus und fällt in die Geldkassette; der Impuls des Schalters läuft Häppchen für Häppchen entlang des Kabels zur Platine, und der CRT erwärmt sich, führt einen Selbsttest durch und läuft einen Anziehmodus, der in der Ebene des geneigten Monitors gezeichnet ist. Der Stick kippt und schließt einen Mikroschalter unter der Abdeckung. Es zeigt, wie man eine Kamera platziert, sodass der Mechanismus eines Ausschnitts im Blick bleibt, eine konkave Platine als Prisma entlang jeder Achse gezeichnet wird, bewegliche Teile im Browser aus demselben Modul neu erstellt werden, das der Build verwendet, sowie Live-Münzen und ein Draht in reservierten Slots der festgelegten Reihenfolge. node build.mjs --audit beweist die Geometrie.
• examples/raptor-engine/ ist ein Raketentriebwerk, das in einem Prüfstand hängt. Seine runden Teile stammen von kit/lathe.mjs und seine Rohre und Kabelbäume von kit/tube.mjs. Es zerfällt in 11 Baugruppen mit gestaffelten Federn und einer Neuordnung der Tiefe pro Frame. Jedes Teil zeichnet seine wahre Form auf, und node build.mjs --audit (kit/audit.mjs) beweist, im Ruhezustand, auseinandergenommen und in jedem wiederholten Frame der Explosion, dass nichts durch etwas hindurchgeht, dass jedes Ende auf einer echten Halterung sitzt, dass keine Biegung einklemmt, faltet oder auf einer anderen Linie landet, dass die Neigung eines gekrümmten Profils nicht wackelt, und dass jede Überlappung in der Tiefenreihenfolge gezeichnet wird. Eine WebGL-Fackel, ein Schock, ein Spritzer und Dampf rendern zwischen dem hinteren und vorderen SVG. Es ist die Referenz für dichte Rohrleitungen, weiche Schattierungen und Überblendungen.
• examples/ripple-tank/ ist ein Schulwellenbecken auf hohen Beinen über einem Papierschirm, aus 44° Höhe gesehen. Zwei WebGL-Schichten (Lampenlicht, Schatten und Kaustiken auf dem Papier sowie die Wasserreflexionen und das Glas) sind auf die isometrischen Ebenen registriert und werden von einem reinen Dispersions- und Optikmodell (model.mjs) angetrieben; eine Frequenzänderung breitet sich von den Tauchern durch eine Verlaufstextur aus.
• examples/test-rig/ ist eine Produktionsfigur von einer echten Website (React/Next): ein Glasknopf auf einem federbelasteten Schlitten, ein Fingertaster auf einer Schiene, der drückt und zieht, und eine Messuhr, die den Neigungswinkel abliest. Es hat 53 Festkörper und etwa 470 Pfade.
• examples/spot-plate/ ist eine zweite Produktionsfigur von derselben Website: sechs Paare von Glastropfen auf einer Spotplatte, jedes Paar aus einem Distanzfeld gezeichnet, sodass ein Paar, das näher als merge ist, zu einem einzigen Stück Glas zusammenläuft. Ein Fächer von Fühlerblättern setzt merge, ein Blatt pro Spalt. Es ist die Referenz für Formen, die ineinander übergehen, und dafür, dass eine Steuerung viele Teile antreibt.
• examples/turning-dial/ ist der optionale 3D-Modus: ein Kombinationsschloss, das sich in echtem 3D mit einer kleinen Roboterhand darauf dreht. Es hat etwa 70 Live-Teile aus Metallmaterialien, eine zweite Drehgruppe, ein Scharnier, ein Dreifingergelenk, das anhebt, und eine Kapsel, die als freier Körper abbricht. Eine WebGL-LED, ihr Lichtkegel und Funken folgen den beweglichen Teilen. stress.mjs daneben ist eine dichte Hand mit etwa 380 Teilen in einer unordentlichen Werkstatt, die zur Leistungsmessung verwendet wird.

Der Prüfstand ist die Qualitätslatte für die Zeichnung selbst. Der Raptor ist die Latte für Shaderarbeit: Ein WebGL-Effekt muss seinen Standard von weltraum-, popp- und nahtlosem Rendering erreichen.

Die eine Idee, die zählt

Das Objekt ist die Erklärung. Zeichne keine Kästchen, Pfeile und Beschriftungen. Erfinde ein echtes, gut gemachtes physisches Ding, dessen Funktionsweise das Konzept ist. Hier ist, wie frühere Figuren abgebildet wurden:

Konzept	Objekt
Ein gemeinsamer GPU-Kontext, der viele Canvas bedient	Ein Portalplotter: ein Druckkopf, der 16 Wells besucht
Ein Cache-Schlüssel, der Arbeit überspringt, wenn sich nichts geändert hat	Ein Stiftschloss: Wenn jeder Stift passt, dreht sich der Zylinder und nichts wird neu gezeichnet
Sieben Renderziele mit unterschiedlichen Bytes pro Texel	Eine Kommode mit sieben Schubladen, jede so tief wie ihre Bytes
Eine trennbare Unschärfe (49 × 49 Abtastungen vs. 49 + 49)	Ein Nagelbett-Stempel neben zwei Kämmen auf Schienen
Eine Feder, die drückt und sich neigt	Ein Prüfstand mit Federn, einem Taster und einer Messuhr
Ein Höhenprofil	Ein Profil (Konturen)Lehre, der gegen die Kante gedrückt wird
Licht, das von der Ausrichtung abhängt	Ein kleines Fotostudio: Haupt- und Fülllicht um einen Drehteller

Zwei Möglichkeiten, wie dies fehlschlägt, beide in der Praxis gesehen:

• Zu abstrakt. Gestapelte Platten, schwebende Blöcke oder gekennzeichnete Kästchen sind nicht als etwas zu erkennen.
• Zu flach und langweilig. Eine große Platte mit ein paar Linien hat kein Volumen, keine Teile und nichts zu entdecken.

Die Lösung für beides ist dieselbe: eine erkennbare Maschine, gebaut aus vielen kleinen, präzisen, zweckmäßigen Teilen.

Jede Schöpfung ist hochdetailliert. Dies gilt für jede Figur, egal wie klein die Idee oder die Anfrage: Ein schneller Erklärer ist immer noch eine dichte, reale Maschine, niemals ein paar Platten. Was mit der Größe skaliert (Arbeitsschritt 1), ist, wie weit du es treibst: Eine Figur erhält den 4×-Durchlauf über ihr Thema und ihren Mechanismus, ein Held oder ein Epos über die gesamte Zeichnung.

• Lies das echte Ding. Baue es so, wie das reale Objekt gebaut ist: jede Schraube, Naht, Fase, Buchse, Etikettplatte, jedes Kabel mit seinem Stecker, jedes Lineal mit seinen Strichen und die Teile, die die Teile halten.
• Zwei Ansichten. Bei 1× liest es sich als eine klare Maschine. Bei 4× hat jede Region immer noch etwas Wahres zu entdecken; eine kahle Fläche oder eine leere Ecke ist unfertige Arbeit, nicht Ruhe.
• Zweckmäßig, niemals Rauschen. Detail kommt von Teilen, die zum Mechanismus gehören. Jedes sitzt auf einem anderen Teil, endet an einer Kante und verblasst, anstatt zu stoppen.
• Überprüfe zuletzt. Bevor du fertig wirst, zoome auf 4× (über das Thema und den Mechanismus für eine Figur, die gesamte Zeichnung für einen Helden oder ein Epos) und füge die fehlenden echten Teile hinzu, wenn eine Region schlicht ist.

Arbeitsablauf

Arbeite in dieser Reihenfolge. Schreibe das Konzept und die Teileliste vor jeder Geometrie. Dort wird der Großteil der Qualität entschieden.

1. Bemesse es, bevor du beginnst. Nenne die Größe vor jeder anderen Arbeit und teile dem Benutzer grob mit, wie lange es dauern wird, wenn die darunterliegende Stufe eine Schätzung erfordert.
   • Figur: ein Mechanismus, 40–80 Teile, SVG mit höchstens einer WebGL-Schicht. Nenne die Größe und baue sie ohne Nachfrage. Nenne dem Benutzer keine Zeit, da eine Figur oft in deutlich unter einer Stunde fertig ist. Budgetiere für die Fortschrittsprüfungen unten bis zu einer Stunde.
   • Held: ein dichtes Objekt, mehrere WebGL-Schichten oder ein 3D-Subjekt, 80–150 Teile. Etwa 2–4 Stunden. Sage dies, dann baue es, es sei denn, der Benutzer hat etwas Schnelles gewünscht.
   • Epos: ein ganzes Fahrzeug, Gebäude oder eine Anlage mit vielen sich bewegenden Systemen oder der 3D-Modus an mehr als einem Subjekt. 6 Stunden oder mehr. Starte es nicht. Gib die Schätzung, schlage eine Heldenversion vor, die den Kern der Idee behält, und liste auf, was die Vollversion hinzufügen würde. Baue das Epos nur, wenn der Benutzer es wählt.
   • Unabhängig von der Größe, habe eine funktionierende Seite, die sich im Browser innerhalb der ersten Stunde öffnen lässt, und vertiefe sie von dort aus. Führe date zu Beginn und bei jedem Schritt aus, und wenn ein Schritt das Zweifache seines Anteils an der Schätzung überschreitet, teile dem Benutzer mit, wo du stehst und was noch übrig ist.
2. Wahrheit zuerst. Sammle die realen Zahlen und das Verhalten des erklärten Dings: Größen, Anzahlen, Schwellen, Kurven. Die Anzeige, die Bewegung und die Beschriftung müssen alle wahr sein. Wenn möglich, schreibe das Modell als kleines reines Modul, wie rig.ts im Prüfstand-Beispiel, und treibe alles davon an.
3. Erfinde das Objekt. Wähle eine Maschine, ein Werkzeug, ein Instrument oder ein Möbelstück, dessen Mechanismus eins-zu-eins auf das Konzept abbildet. Sage in einem Satz, was sich bewegt und was diese Bewegung bedeutet. Kopiere niemals ein Referenzbild: nimm seine Oberfläche, nicht sein Objekt.
4. Teileliste. Schreibe mindestens 40 Teile (40–80 für eine Figur, 80–150 für einen Helden, mehr für ein Epos), gruppiert: Basis (Platte, Füße, Nut, Eckschrauben, Typenschild, Linealstreifen), Struktur (Pfosten, Schienen, Rahmenteile, Endanschläge), Mechanismus (Schlitten, Buchsen, Federn, Kolben, Nadel), Steuerungen (Rändelknopf, Daumenschraube, Krone) und das Subjekt selbst, das der einzige beleuchtete Teil ist. Jedes Teil sitzt auf einem anderen Teil. references/craft.md hat ein Vokabular von Teilen mit Rezepten.
5. Plane die Welt. Verwende Welteinheiten von etwa 1 px des realen Dings: x und y auf dem Boden, z nach oben. Lege Pläne als abgerundete Rechtecke {x, y, w, d, r} und Kreise an. Wähle die Kamera: Azimut 45° standardmäßig, 35–60° um die lange Seite zu zeigen, Elevation 30° (höher, wie die 44° des Wellenbeckens, um in etwas Offenes zu schauen). Dann passe mit fitProjection(points, width, height, { pad, azimuth }) an.
6. Baue Geometrie einmal. Berechne jeden statischen Pfad in einem Geometriemodul mit dem Kit vor: slabOf, cylinder, extrude, planOutline, topTicks, knurl, coil, radialTicks und so weiter. Runde Teile auf jeder Achse (Glocken, Flansche, Ventile, Aktuatoren) kommen von kit/lathe.mjs und Rohre und Kabel von kit/tube.mjs. Bewegliche Teile werden einmal in einer Ruheposition gebaut und mit translateAlong bewegt. Nur Teile, deren Form sich ändert, werden pro Frame neu gebaut.
7. Malen von hinten nach vorne, von unten nach oben. Sortiere wiederholte Teile mit depthOf. Teile alles, was ein anderes Teil umschließt, in eine hintere Hälfte und eine vordere Hälfte: die Federn um eine Stange, die Stäbe eines Rahmens um einen Schlitten. Ein bewegliches Teil wird in dem Schlitz gezeichnet, in dem es physisch sitzt. Siehe „Maler-Reihenfolge" in references/craft.md. Sobald eine Figur Rohre, Kabel und runde Teile hat, höre auf, Schlüssel nach Augenmaß einzustellen: zeichne die Form jedes Elements auf, wenn du es in A.recorder(P, { order, spring }) einfügst, lasse A.settle(R, P) die wahre Tiefe messen, wo immer sich zwei Elemente überlappen, und setze die Schlüssel, und beende den Build mit A.auditOrExit(R, P). Verlege Rohre, bevor du sie zeichnest: echte Anschlüsse an beiden Enden, Schenkel entlang der Struktur, Kreuzungen auf Geraden, Kragen, die das Rohr überbrücken (references/craft.md, Abschnitt 8). Zeichne die wahre Form dessen auf, was du zeichnest: eine Platzhalterform, die die Prüfung zum Schweigen bringt, ist ein Fehler, und die Prüfung schlägt fehl. Eine Stange, die aus einer Stopfbuchse gleitet, ist eine Stange von G.rodOut, aufgezeichnet mit A.slide.
8. Rahme es ein. Setze die Figur in eine Karte: Fig n oben links, einen kurzen Titel oben rechts, den Interaktionshinweis unten links und die Live-Anzeige unten rechts. Legenden und eine wahre Bildunterschrift kommen unter die Karte, und Wörter bleiben außerhalb der Zeichnung, abgesehen von höchstens einer winzigen gravierten Beschriftung.
9. Mach es lebendig. Verwende beruhigte zeitbasierte Bewegung: exponentielles Folgen oder echte Federn. Ein Leerlaufrundgang wiederholt sich, wenn niemand es berührt. Die Figur reagiert auf Zeiger und Tastatur, stoppt wenn sie nicht im Sichtfeld ist, und wird still bei reduzierter Bewegung. Schreibe Attribute auf Referenzen und rendere nicht pro Frame neu. Siehe references/motion.md.
10. Überprüfe wie ein Kritiker. Der Besitzer findet Fehler durch Hineinzoomen, also zoome du zuerst hinein. Lies jedes PNG, das du erstellst.

• Erfasse Desktop, Telefon (390 breit), Hover und mehrere Momente der Bewegung mit scripts/capture.mjs; verwende scripts/drive.mjs für Sequenzen, die auseinandergenommene Pose und den --no-webgl-Fallback.
• Führe die Prüfung auf null. Bei Rohren, Kabeln oder runden Teilen muss node build.mjs --audit mit audit passed enden, jede fehlschlagende Zeile bei 0: Spiel auf Abstand im Ruhezustand, auseinander und während des Flugs, Anschlüsse, lose Enden, Falten, Selbstüberlappung, Gedränge (auch gegen schlanke Festkörper), Platzhalterformen, Unterstützung, Wackeln, Sättel und Tiefenreihenfolge. Behebe eine Verzahnung in der Geometrie, niemals mit einer Schlüsselvorspannung.
• Führe die Linienprüfung auf null. Die Prüfung sieht niemals Linienauszeichnung. node scripts/lines.mjs page.html --out shots/lines.png (und auf der -light-Seite und in jeder Ruhepose mit der ["lines"]-Aktion von drive.mjs) muss line ends: 0 ausgeben: jede Naht, Linie, Rippe, jeder Strich und Zeiger endet auf einem Strich, einem Punkt oder einer Kontur. Lies das markierte PNG.
• 4×-Nahaufnahmen jeder Verbindungsstelle in beiden Themen (erstelle --light auch), zusammengebaut und auseinander: jeder Flansch, T-Stück, Winkelstück, Klemme, Ventil, Faltenbalg, Band, Sattel, Kugelgelenk und Kreuzung, jeder gekrümmte Körper (keine Tonwerttreppe), jeder Ort, an dem eine Textur endet (auf einer Kante oder verblassend), flache Kastenflächen mit ihren Nähten, jeder texturierte Schlauch an einer Abschnittsverbindung, jede gleitende Stange im Ruhezustand und bei vollem Hub und jedes Fenster mit Text- oder Shader-Inhalt darin.
• Shader: ein Kontaktbogen verlangsamt mit ["slow", 0.05] über jeden Übergang; nichts poppt auf, kein Farbwechsel, Kanten lesen 0. Im Hellen, protokolliere auch Tinte pro Frame durch jeden Übergang (sie muss monoton dem Licht folgen) und beschneide, wo die Tinte auf Striche bei 8–16× trifft (references/verify.md, „Shader des hellen Themas").
• Lege dein PNG neben die Beispiele und frage: Ist es sofort ein reales Objekt, reich an kleinen Teilen mit Volumen, bei dem jede Linie auf etwas endet? Ist es bei 1× hochdetailliert und bei 4× immer noch lohnend, ohne kahle Fläche oder leere Ecke? Iteriere bis ja. Checkliste: references/verify.md.

Einrichtung

Das Kit befindet sich in kit/:

Datei	Verwende es für
kit/iso-kit.ts	Den gesamten Kern in einer Datei: Kamera, Festkörper, eine Teilebibliothek, einen SVG-String-Renderer, Karten- und Seiten-Builder und das CSS (ISO_CSS). Kopiere es in ein TypeScript-Projekt.
kit/iso-kit.mjs	Denselben Kern, kompiliert zu einfachem ESM, für Node-Skripte. Importiere es direkt.
kit/iso.css	ISO_CSS als Datei ausgeschrieben. Importiere es einmal und setze class="iso" (plus data-theme="light" für hell) auf einen Wrapper.

…

[gekürzt für Übersetzung]