研究案例：Canvas-017

模組一：典藏基本數據表 (Metadata Table)

項目	數據與規格內容
作品編號	Canvas-017
感知意象	上坡 (Ascending / Uphill Movement)
基本結構	長方形斜線填滿 (Rectangle Diagonal Line Fill)
線材規格	DMC / 25號繡線 3絲對折 (3 Strands Folded)
色彩計畫	深綠色、中綠色、淺綠色 (Deep Green, Medium Green, Light Green)
刺繡方向	由左上對角斜線 2.3.3.2 格為一單元，其中 2 格為共用格，持續對角斜線 3.3.2 格填滿
語法類型	接續語法 (Continuous / Sequential Syntax)

模組二：起針邏輯與向量角度演算法 (Starting & Vector Operations)

1. 起針空間佈局 (Phase ① & Phase ②)

• Phase ① 基礎圖形創建 (Basic Unit Construction)：
  • 起針位置：起於網格左上角長方形區域，座標 Centroid(x, y) = (80, 40)。
  • 長方形基底單元：劃定寬度 20 px、高度 80 px（橫向 1 格，縱向 4 格）之長方形空間，邊界座標為 (50, 30) 至 (110, 110)。
  • 首單元針路（1-6針）：沿左上至右下對角斜線方向推進。依序為 1 針（2格跨距）、2 針（3格跨距）、3 針（3格跨距）、4 針（2格跨距）、5 針（3格跨距）、6 針（3格跨距）。
• Phase ② 接續與陣列複製 (Sequential Array Expansion)：
  • 共用格接續機制：以首單元末端之 2 格作為共用重疊節點（Shared Nodes）。
  • 縱向陣列位移：複製基本單元並向下平移 2 格 (dy = +40 px)、向右平移 1 格 (dx = +20 px)。次序變更為 7-12 針、13-18 針、19-24 針與 25-30 針，連續重複 4 次，完成「藍色第一區域」（共 30 針）。
  • 平行區域轉移：第 31-60 針（紅色第二區域）定位於第一區域右方 2 格 (dx = +40 px)、上方 1 格 (dy = -20 px)；第 61-90 針（黃/綠色第三區域）以此類推重複生成。

2. 向量平移量與傾角計算

• 針路幾何向量 (Vector Displacement)：
  • 2格斜線向量：dx = -20 px, dy = +20 px，位移長度 L = √(20² + 20²) = 28.28 px。
  • 3格斜線向量：dx = -40 px, dy = +40 px，位移長度 L = √(40² + 40²) = 56.57 px。
• 向量傾角 (Vector Angle)：所有斜線針步均保持恆定之反向對角傾角 θ = -45°（由右上至左下，或由左上向右下延伸之等腰直角系統）。
• 平移矩陣 (Translation Matrix)：區域內單元位移向量 T_unit = (20, 40)；區域間平行位移向量 T_region = (40, -20)。

模組三：拓樸網絡與力學分析 (Structural Mechanics & Topology)

1. 結構脊柱 (Structural Spine)

• 主應力軸線：由左上向右下貫穿之 -45° 斜向對角線構成結構脊柱。
• 接續重疊節點：利用 2 格共用格建立連續鎖定點，防止長方形結構在斜向拉力下發生幾何剪切變形。

2. 張力平衡與應力分散機制 (Tension Balance & Stress Distribution)

• 交錯張力抵銷：每組 2.3.3.2 格斜線針步產生的拉力方向一致，藉由布料經緯紗線（Aida Grid）的垂直與水平正交支撐力進行抵銷。
• 共用格應力集中點：共用節點處承受雙向線材拉力，強化了斜向脊柱的拓樸剛性，使布面呈現極具質感的立體「上坡」階梯視覺延伸感。

模組四：SVG 向量語法與動態展示數據 (Vector API)

1. 可直接渲染之 HTML/SVG 卡片程式碼

2. SVG 向量幾何參數說明

• ViewBox 視窗範圍：0 0 360 320。
• 網格系統 (Grid System)：正方形正交網格，網格間距等於 20 px。
• 起終點座標與長度 (Start/End Coordinates & Stroke Length)：
  • 2格斜線針步：線段起終點 dx = 20 px, dy = 20 px，預設 stroke-dasharray 與 stroke-dashoffset 設為 29 px（略大於實測長度 28.28 px）。
  • 3格斜線針步：線段起終點 dx = 40 px, dy = 40 px，預設 stroke-dasharray 與 stroke-dashoffset 設為 57 px（略大於實測長度 56.57 px）。
• 色彩系統 (Color Mapping)：
  • 藍色第一區域：#1e50a2 (Blue)
  • 紅色第二區域：#e62f00 (Red)
  • 綠色第三區域：#2e8b57 (Green)

模組五：手稿圖典與實體刺繡對照 (Visual Gallery)

正面實體照 (Front)	背面實體照 (Back)	設計手稿圖 (Draft)
正面：綠色漸層密鋪之階梯斜線結構	背面：規律斜向平行線，呈良好張力拉伸	手稿：手繪幾何座標與 1-90 針步路徑

模組六：演算法擴充參數與轉換邏輯 (Algorithm Extensions & Variant Syntax)

1. 物理覆蓋率 (Physical Coverage Ratio)

• 單元線條覆蓋密度：每單元包含 4 條對角斜針，在 20×80 px 的長方形區域內，有效平滑覆蓋率約為 88.5%。
• 重疊防漏光效應：共用格的雙重過針能有效填補對角夾角間隙，消弭布料底色露光現象[cite: 8, 9]。

2. 變體矩陣 (Variant Matrix)

• 水平鏡射 (Horizontal Reflection)：傾角轉換為 +45°，結構視覺由「上坡」轉變為「下坡 (Descending)」。
• 垂直延伸 (Vertical Extension)：增加單元複製次數，可生成延伸性極佳的紡織品側邊花邊邊框。

3. Procedural 程序化擴充參數

• stepSequence：[2, 3, 3, 2]（針步跨格序列）
• unitSpacing：{ dx: 20, dy: 40 }（區域內單元位移量）
• regionOffset：{ dx: 40, dy: -20 }（跨區域平移量）
• gapRatio：0.5（共用格佔比）