利休紋章設計図

利休紋章設計図 は何をしますか？

アップロードされた参照画像やテキストコンセプトを、純粋な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"）に固定し、支配的な対角軸を中心に構築します。立っている獣、彫刻、建築物（例：岩の上で咆哮する獅子など）に最適です。
• 平坦なミニマルな塊への蒸留: 写真の陰影や複雑なテクスチャを、均一なネガティブスペースのチャネル（フルスケールで幅 6px から 10px）で区切られた、4～8個のハイコントラストで平坦な幾何学的シルエットの島に変換します。内部のスケッチ線は使用しません。
• 原始作図レジストリの構築: すべての主要な輪郭曲線を明示的な円弧（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) にします。これにより、幾何学的なずれなく2回インスタンス化できます：

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"/> でインスタンス化します。

すべての <path> 要素は、原始作図レジストリ（x = cx + r * cos(theta)、y = cy + r * sin(theta)）から直接計算された正確な円弧コマンド（A r r 0 large-arc-flag sweep-flag x y）と直線セグメント（L x y）を使用して構築します。ネガティブスペースチャネルや内部の渦巻きスクロールには、複合パス（fill-rule="evenodd"）または <mask> 切り抜きを使用し、半透明の中央状態とソリッドなプレビューの両方がきれいにレンダリングされるようにします。

4. 同期された作図円と延長線のレンダリング

すべての作図ジオメトリを内側フレーム（<clipPath id="blueprint-clip"><rect x="40" y="40" width="720" height="720"/></clipPath>）でクリップし、transform="translate(400, 385)" の下にグループ化します：

• 密接作図円: 原始作図レジストリ内のすべての円弧（典型的には半径 r="10" から r="240" の14～24個の円）に対して、<circle cx="..." cy="..." r="..." fill="none" stroke="#5C574F" stroke-width="0.82" stroke-opacity="0.76"/> を描画します。
• 中心十字線と半径コールアウト: 各円の中心 (cx, cy) に、stroke="#4A463F" stroke-width="0.85" で 7px の十字線（M cx-3.5 cy H cx+3.5 M cx cy-3.5 V cy+3.5）をレンダリングし、主要な一次円には水平方向の半径コールアウトライン（(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"/> を描画します。
  • ソリッドでスケーリングされた #crest-shape を (660, 860) を中心にレンダリングします。

注意点

• 任意の装飾円を決して描かないこと: すべての作図円と延長線は、シルエットの実際の曲線またはエッジに数学的に接するか割線でなければなりません。パスの円弧端点を (cx, cy, r) から直接導出し、作図円がシルエットの輪郭に正確に沿うようにします。
• 半透明グループ内で不透明な用紙色のストロークを使用しないこと: fill-opacity="0.38" をグループに適用した状態で #F4F1EA のストロークを使用してネガティブスペースを切り抜くと、グリッド上にストロークが現れます。代わりに、個別の閉じた <path> の島、複合パス（fill-rule="evenodd"）、またはSVGの <mask> をネガティブスペースチャネルに使用します。
• 読みやすいネガティブスペース幅とオープンな背景バランスを維持すること: フルスケール（[-185, 185]）でギャップを 6px から 10px の間に保ち、右下のプレビューボックスで 0.32 に縮小されたときにギャップがつぶれないようにします。また、頭部と尾部の周りに十分な開放的なネガティブスペースを確保し、エンブレムが放射状のホイールではなく、象徴的な紋章として読めるようにします。