lzytttttt/rikyu-crest-blueprint

Rikyu-Wappen-Blaupause

Wandeln Sie hochgeladene Referenzbilder oder Textkonzepte in minimalistische heraldische Wappen und japanische Kamon-Embleme um, die als architektonische Compass-and-Straightedge-Konstruktionsbögen in reinem SVG dargestellt werden. Jede Ausgabe kombiniert eine zentrale durchscheinende Silhouette, überlagert mit synchronisierten geometrischen Konstruktionskreisen und verlängerten Tangentenstrahlen, einem sich verjüngenden Millimeterraster, einer prägnanten Designkonzeptnotiz und einer fertigen soliden Emblemvorschau in der unteren rechten Ecke.

Gebündelte Ressourcen

• assets/rikyu_origami_crane_kamon.svg: Beispielhaftes Referenz-SVG-Poster, das das vom Origami inspirierte Kamon des fliegenden Kranichs (Orizuru und Maizuru) demonstriert, einschließlich des verblassenden 10px/50px-Millimeterrasters, der <defs><g id="crest-shape">-Dualzustand-Instanziierung, synchronisierter Schmiegekreise mit Radiusbeschriftungen, verlängerter Linealstrahlen, der Rikyu-Kopfmarke und eines redaktionellen Konzept-Fußbereichs.
• scripts/build_crane_svg.py: Referenz-Python-Generatorskript, das zeigt, wie exakte Kreisbogenendpunkte (x = cx + r * cos(theta), y = cy + r * sin(theta)), echte kontinuierliche Spiraldurchbrüche und verlängerte Tangenten-/Sekantenlinienprojektionen (P1 +/- 1200 * u) aus einem einzigen Primitive Construction Registry berechnet werden.

Wann zu verwenden

• Der Benutzer lädt ein Bild (Foto, Statue, Tier, Objekt oder Referenzposter) hoch und bittet um Konvertierung oder Nachbildung als Rikyu-SVG-geometrische Skizze oder Konstruktionsplan.
• Der Benutzer wünscht ein Rikyu-geometrisches Konstruktionsposter, eine japanische Kamon-Blaupause oder ein Logo-Blatt im Goldenen Schnitt in SVG.
• Der Benutzer bittet um die Gestaltung eines Tieres, Fabelwesens, botanischen Motivs oder abstrakten Symbols mit sichtbaren Compass-and-Straightedge-Konstruktionslinien und -kreisen.

Schritte

1. Zerlegen des Eingabebildes oder Konzepts in geometrische Grundprimitive

Extrahieren Sie vor dem Schreiben von SVG-Pfaden das zugrunde liegende mathematische Skelett aus dem hochgeladenen Bild oder Betreff:

• Rahmen-Archetyp auswählen:

  • Geschlossenes kreisförmiges Kamon: Das Motiv in einen äußeren Kreisring einbetten (r="165" bis r="185"), ideal für geflügelte, gewundene, wirbelnde oder rotierende Motive (wie den geflügelten Kirin von Nihonbashi oder den Origami-Kranich in assets/rikyu_origami_crane_kamon.svg).
  • Freistehendes heraldisches Wappen: Das Motiv auf einer starken horizontalen Basislinie verankern (y="120" relativ zur Mitte) und um eine dominante diagonale Achse herum aufbauen, ideal für stehende Bestien, Statuen oder architektonische Formen (wie den brüllenden Löwen auf einem Felsen).

• In flache, minimale Massen destillieren: Fotografische Schattierungen und komplexe Texturen in 4 bis 8 stark kontrastierende, flache, geometrische Silhouetten-Inseln umwandeln, die durch gleichmäßige Negativraum-Kanäle (6px bis 10px breit im Vollmaßstab) getrennt sind, anstatt durch interne Skizzenlinien.

• Primitive Construction Registry erstellen: Jede primäre Konturkurve mit expliziten Kreisbögen (cx, cy, r) und jede gerade Kante, Basislinie oder Haltungsachse mit Linienendpunkten (x1, y1, x2, y2) in einem lokalen Koordinatenraum definieren, der bei (0, 0) zentriert ist und [-185, 185] umfasst. Diese Koordinaten zuerst aufzeichnen, damit der Silhouetten-<path> und die Konstruktionsüberlagerung identische Geometrie gemeinsam nutzen.

2. Einrichten der SVG-Leinwand und des verblassenden Millimeterrasters

Verwenden Sie ein vertikales Poster-Seitenverhältnis (viewBox="0 0 800 1000"):

• Farb-Token:

  • Hintergrundpapier: #F4F1EA
  • Untergitter (10px): #E2DDD3 (stroke-width="0.6")
  • Hauptgitter (50px): #D2CCC0 (stroke-width="0.9")
  • Außenrahmen und Vorschau-Rand-Haarlinien: #C6C0B4 (stroke-width="1")
  • Durchscheinendes zentrales Motiv: fill="#8C877E" fill-opacity="0.38" stroke="#4A463F" stroke-width="1.25"
  • Konstruktionskreise und verlängerte Strahlen: stroke="#5C574F" stroke-width="0.75" stroke-opacity="0.72"
  • Solides finales Emblem und Kopfmarke: #3A3631
  • Konzept-Fließtext: #6E6A63

• Gitter-Verblassungsmaske: Eine <linearGradient>-Maske (y1="0" bis y2="1") auf die Gitterebene anwenden, sodass das Millimeterraster den oberen Blaupausenbereich (y="40" bis y="740") abdeckt und zwischen y="640" und y="750"" weich in den einfachen Papierhintergrund übergeht.

3. Erstellen des wiederverwendbaren Emblems <g id="crest-shape">

Die Emblemgeometrie innerhalb von <defs> als <g id="crest-shape"> definieren, zentriert bei (0, 0), sodass sie ohne geometrische Drift zweimal instanziiert werden kann:

1. Zentrale Blaupauseninstanz: Über <use href="#crest-shape" transform="translate(400, 385)" fill="#8C877E" fill-opacity="0.38" stroke="#4A463F" stroke-width="1.25"/> instanziieren.
2. Fertiges Emblem unten rechts: Innerhalb des Vorschaukastens über <use href="#crest-shape" transform="translate(660, 860) scale(0.32)" fill="#3A3631" stroke="none"/> instanziieren.

Alle <path>-Elemente unter Verwendung exakter Kreisbogenbefehle (A r r 0 large-arc-flag sweep-flag x y) und gerader Segmente (L x y) konstruieren, die direkt aus dem Primitive Construction Registry berechnet werden (x = cx + r * cos(theta), y = cy + r * sin(theta)). Verwenden Sie zusammengesetzte Pfade (fill-rule="evenodd") oder <mask>-Ausschnitte für Negativraum-Kanäle und innere Spiralen, sodass sowohl der durchscheinende zentrale Zustand als auch die feste Vorschau sauber gerendert werden.

4. Rendern synchronisierter Konstruktionskreise und verlängerter Strahlen

Beschneiden Sie die gesamte Konstruktionsgeometrie auf den inneren Rahmen (<clipPath id="blueprint-clip"><rect x="40" y="40" width="720" height="720"/></clipPath>) und gruppieren Sie sie unter transform="translate(400, 385)":

• Schmiege-Konstruktionskreise: Für jeden Kreisbogen im Primitive Construction Registry (typischerweise 14 bis 24 Kreise mit Radien von r="10" bis r="240") <circle cx="..." cy="..." r="..." fill="none" stroke="#5C574F" stroke-width="0.82" stroke-opacity="0.76"/> zeichnen.
• Zentrierungsfadenkreuze und Radiusbeschriftungen: An jedem Kreismittelpunkt (cx, cy) ein 7px-Fadenkreuz (M cx-3.5 cy H cx+3.5 M cx cy-3.5 V cy+3.5) mit stroke="#4A463F" stroke-width="0.85" rendern und horizontale Radius-Beschriftungslinien ((cx, cy) bis (cx+r, cy)) mit einem 6px-vertikalen Endstrich an den wichtigsten Primärkreisen hinzufügen.
• Verlängerte Sekanten- und Tangentenstrahlen: Für jede gerade Kante, Basislinie und primäre Haltungsachse (typischerweise 12 bis 20 Linien) den Richtungsvektor der Linie (dx, dy) über die gesamte Leinwand projizieren (P1 - 1200 * u bis P1 + 1200 * u, wobei u der Einheitsvektor ist), sodass clip-path="url(#blueprint-clip)" jeden Strahl sauber am Rahmenrand abschneidet.

5. Zusammenstellen des redaktionellen Kopf- und Fußzeilenlayouts

• Äußerer Rahmen: <rect x="40" y="40" width="720" height="920" fill="none" stroke="#C6C0B4" stroke-width="1"/> zeichnen.

• Obere Kopfzeile (y="85"): Das minimale Silhouettensymbol und den Serifen-Markentitel (Rikyu standardmäßig oder vom Benutzer angegebener Titel) um x="400" zentrieren.

• Konzeptblock unten links (x="76", y="810"):

  • CONCEPT in Großbuchstaben und serifenloser Schrift rendern (font-size="13", letter-spacing="2.8", font-weight="600", fill="#4A463F").
  • Darunter (y="846") 3 bis 4 Zeilen <text> platzieren, die erklären, wie die Haltung des hochgeladenen Bildes, die Hauptachse und die flachen geometrischen Massen in das Emblem destilliert wurden (in Chinesisch, Japanisch oder Englisch, je nach Präferenz des Benutzers).

• Vorschaukasten unten rechts:

  • Das eingebettete Quadrat <rect x="560" y="760" width="200" height="200" fill="#F4F1EA" stroke="#C6C0B4" stroke-width="1"/> zeichnen.
  • Die feste skalierte #crest-shape zentriert bei (660, 860) rendern.

Fallstricke

• Niemals willkürliche dekorative Kreise zeichnen: Jeder Konstruktionskreis und jeder verlängerte Strahl muss mathematisch tangential oder sekant zu einer tatsächlichen Kurve oder Kante der Silhouette sein. Leiten Sie die Bogenendpunkte direkt aus (cx, cy, r) ab, sodass die Konstruktionskreise die Silhouettenkonturen genau berühren.
• Undurchsichtige papierfarbene Striche innerhalb durchscheinender Gruppen vermeiden: Wenn Sie #F4F1EA-Striche zum Ausschneiden von Negativraum verwenden, wird durch Anwenden von fill-opacity="0.38" auf die Gruppe der Strich über dem Gitter sichtbar. Verwenden Sie stattdessen separate geschlossene <path>-Inseln, zusammengesetzte Pfade (fill-rule="evenodd") oder eine SVG-<mask> für Negativraum-Kanäle.
• Lesbare Negativraum-Breite und offene Hintergrundbalance beibehalten: Halten Sie Abstände zwischen 6px und 10px im Vollmaßstab ([-185, 185]), damit sie beim Verkleinern auf 0.32 im Vorschaukasten unten rechts nicht zusammenlaufen. Bewahren Sie großzügigen offenen Negativraum um Kopf und Schwanz, damit das Emblem eher als ikonisches Wappen denn als radiales Rad gelesen wird.