lzytttttt/利休徽章藍圖

利休徽章藍圖 是做什麼的？

將上傳的參考影像或文字概念，轉化為極簡紋章徽章與日本家紋，並以純 SVG 呈現建築風格的圓規與直尺構造圖紙。每個輸出都結合了中央的半透明輪廓、與其同步的幾何構造圓與延伸切線、淡出的毫米網格、簡潔的設計概念說明，以及位於右下角的完整固態徽章預覽。

附帶資源

• assets/rikyu_origami_crane_kamon.svg：完整的參考 SVG 海報，展示摺紙靈感的飛鶴家紋（摺鶴與舞鶴紋），包含淡出的 10px/50px 毫米網格、<defs><g id="crest-shape"> 雙狀態實例化、同步的密切圓與半徑標註、延伸的直尺射線、利休標頭標記，以及編輯概念頁尾。
• scripts/build_crane_svg.py：參考 Python 生成腳本，展示如何從單一的「原始構造註冊表」中，計算精確的圓弧端點（x = cx + r * cos(theta)，y = cy + r * sin(theta)）、真正的連續螺旋鏤空，以及延伸的切線/割線投影（P1 +/- 1200 * u）。

使用時機

• 使用者上傳圖片（照片、雕像、動物、物體或參考海報）並要求將其轉換或複製為利休風格的 SVG 幾何草圖或構造藍圖。
• 使用者想要利休風格的幾何構造海報、日本家紋藍圖，或 SVG 格式的黃金比例標誌圖紙。
• 使用者要求設計動物、神話生物、植物圖案或抽象符號，並附帶可見的圓規與直尺構造線條和圓形。

步驟

1. 將輸入影像或概念拆解為幾何基本元素

在編寫 SVG 路徑之前，先從上傳的影像或主題中提取底層的數學骨架：

• 選擇框架原型：

  • 封閉圓形家紋：將主題包裹在外環圓形內（r="165" 到 r="185"），適合翅膀、纏繞、漩渦或旋轉圖案（例如 assets/rikyu_origami_crane_kamon.svg 中的日本橋有翼麒麟或摺紙飛鶴）。
  • 獨立紋章徽章：將主題錨定在堅固的水平基準線上（相對於中心 y="120"），並圍繞一個主要的對角軸建構，適合站立野獸、雕像或建築形式（例如岩石上的咆哮雄獅）。

• 提煉為平面簡約團塊：將照片的明暗與複雜紋理，轉換成 4 到 8 個高對比度、平面的幾何輪廓島嶼，並以均勻的負空間通道（全尺寸下 6px 到 10px 寬）分隔，而非使用內部草圖線條。

• 建構原始構造註冊表：使用明確的圓弧（cx, cy, r）定義每一個主要輪廓曲線，並使用線段端點（x1, y1, x2, y2）定義每一條直邊、基準線或姿勢軸，所有座標均位於以 (0, 0) 為中心、範圍 [-185, 185] 的局部座標空間中。先記錄這些座標，以確保輪廓 <path> 和構造覆蓋層共享相同的幾何圖形。

2. 設定 SVG 畫布與淡出毫米網格

使用垂直海報比例（viewBox="0 0 800 1000"）：

• 顏色標記：

  • 背景紙張：#F4F1EA
  • 子網格（10px）：#E2DDD3（stroke-width="0.6"）
  • 主要網格（50px）：#D2CCC0（stroke-width="0.9"）
  • 外框與預覽邊框極細線：#C6C0B4（stroke-width="1"）
  • 中央半透明圖案：fill="#8C877E" fill-opacity="0.38" stroke="#4A463F" stroke-width="1.25"
  • 構造圓與延伸射線：stroke="#5C574F" stroke-width="0.75" stroke-opacity="0.72"
  • 固態最終徽章與標頭標記：#3A3631
  • 概念正文：#6E6A63

• 網格淡出遮罩：對網格圖層應用 <linearGradient> 遮罩（y1="0" 到 y2="1"），使毫米網格覆蓋藍圖上方區域（y="40" 到 y="740"），並在 y="640" 到 y="750" 之間柔和地淡入純色紙張背景。

3. 建構可重複使用的徽章 <g id="crest-shape">

在 <defs> 內部定義徽章幾何圖形為 <g id="crest-shape">，並以其幾何中心 (0, 0) 為準，以便在不出現幾何偏移的情況下實例化兩次：

1. 中央藍圖實例：透過 <use href="#crest-shape" transform="translate(400, 385)" fill="#8C877E" fill-opacity="0.38" stroke="#4A463F" stroke-width="1.25"/> 實例化。
2. 右下角完成徽章實例：在預覽框內，透過 <use href="#crest-shape" transform="translate(660, 860) scale(0.32)" fill="#3A3631" stroke="none"/> 實例化。

使用精確的圓弧指令（A r r 0 large-arc-flag sweep-flag x y）和直線段（L x y）來建構所有 <path> 元素，這些指令是直接根據原始構造註冊表計算得出的（x = cx + r * cos(theta)，y = cy + r * sin(theta)）。對負空間通道和內部螺旋捲曲，使用複合路徑（fill-rule="evenodd"）或 <mask> 鏤空，以確保半透明中央狀態和固態預覽都能乾淨渲染。

4. 渲染同步的構造圓與延伸射線

將所有構造幾何圖形裁剪到內框（<clipPath id="blueprint-clip"><rect x="40" y="40" width="720" height="720"/></clipPath>），並將它們分組到 transform="translate(400, 385)" 之下：

• 密切構造圓：對於原始構造註冊表中的每一個圓弧（通常有 14 到 24 個圓，半徑從 r="10" 到 r="240"），繪製 <circle cx="..." cy="..." r="..." fill="none" stroke="#5C574F" stroke-width="0.82" stroke-opacity="0.76"/>。
• 中心十字準線與半徑標註：在每個圓心 (cx, cy) 處，繪製一個 7px 的十字準線（M cx-3.5 cy H cx+3.5 M cx cy-3.5 V cy+3.5），設定 stroke="#4A463F" stroke-width="0.85"，並在關鍵的主要圓上，從 (cx, cy) 到 (cx+r, cy) 添加水平半徑標註線，末端帶有 6px 的垂直短線。
• 延伸割線與切線射線：對於每一條直邊、基準線和主要姿勢軸（通常有 12 到 20 條線），將線段方向向量 (dx, dy) 投影到整個畫布上（從 P1 - 1200 * u 到 P1 + 1200 * u，其中 u 是單位向量），以便 clip-path="url(#blueprint-clip)" 在邊框處整齊地裁剪每一條射線。

5. 組合編輯標頭與頁尾版面

• 外框：繪製 <rect x="40" y="40" width="720" height="920" fill="none" stroke="#C6C0B4" stroke-width="1"/>。

• 頂部標頭（y="85"）：將極簡輪廓圖示和襯線字體品牌標題（預設為 Rikyu，或使用者指定的標題）圍繞 x="400" 居中放置。

• 左下角概念區塊（x="76"，y="810"）：

  • 以大寫無襯線字體渲染 CONCEPT（font-size="13"，letter-spacing="2.8"，font-weight="600"，fill="#4A463F"）。
  • 在其下方（y="846"），放置 3 到 4 行 <text>，說明如何將上傳圖像的姿態、主軸和平面幾何團塊提煉成徽章（使用符合使用者偏好的中文、日文或英文）。

• 右下角預覽框：

  • 繪製內嵌正方形 <rect x="560" y="760" width="200" height="200" fill="#F4F1EA" stroke="#C6C0B4" stroke-width="1"/>。
  • 在 (660, 860) 處渲染縮放的固態 #crest-shape。

注意事項

• 切勿繪製任意裝飾性圓形：每個構造圓和延伸射線必須在數學上與輪廓的實際曲線或邊緣相切或相割。直接從 (cx, cy, r) 推導路徑圓弧端點，使構造圓緊貼輪廓。
• 避免在透明群組內使用不透明紙張顏色的筆劃：如果你使用 #F4F1EA 筆劃來雕刻負空間，對群組套用 fill-opacity="0.38" 會使筆劃在網格上顯現。請改用獨立的封閉 <path> 島嶼、複合路徑（fill-rule="evenodd"）或 SVG <mask> 來處理負空間通道。
• 保持可讀的負空間寬度與開放的背景平衡：在全尺寸（[-185, 185]）下，保持間隙在 6px 到 10px 之間，這樣在右下角預覽框中縮小到 0.32 時才不會閉合；並在頭部和尾部周圍保留充足的開放負空間，使徽章讀起來像一個標誌性的家紋，而不是一個放射狀的輪盤。