研究案例：Canvas-013

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

數據項目詳細內容與規範參數
作品編號 (ID)Canvas-013
感知意象 (Perception)上下坡 (Uphill and Downhill Slopes)
基本結構 (Structure)層層坡路（階梯式鋸齒結構 / Stepped Terraced Alignment）
語法類型 (Syntax Type)凸顯立體型 (3D Relief Emphasized)
線材規格 (Thread Spec)DMC / 25號繡線（4絲對折，形成雙倍線徑張力）
色彩計畫 (Color Palette)綠色 (Forest Green / #ef4444 針路標示)、灰白色 (Off-White / #0284c7 針路標示)
刺繡方向 (Direction)雙軌雙色交替，由左上中心線向右下階梯式推進 (Top-left to Bottom-right)

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

1. 起針單元陣列結構

作品採取「3格×3」與「2格×2」網格單元之交錯階梯式佈局。起針邏輯分為 Phase ① 與 Phase ② 兩條相互鎖合的幾何軌跡：
  • Phase ① (短斜針與直針線路 / 標示色：紅色)：先於 3格×3 邊界區域執行 1 單元長度的 135° 對角斜針（4 針橫排），隨後轉為 0° 垂直方向（2 針縱列），形成鋸齒邊緣。
  • Phase ② (長斜針線路 / 標示色：藍色)：緊接著於 2格×2 及延伸區域執行 2 單元長度的 135° 長對角斜針（4 針橫排 + 2 針縱向平移排），深鎖於 Phase ① 形成的階梯基底上。

2. 精準座標與向量轉換矩陣

以標準 1 單元網格（Unit = 40px）建立絕對座標系：
  • Phase ① (針路 1 – 12，紅色短斜針系)：
    • 橫排斜針 (S1-S4)：
      • S1: Start (180, 60) -> End (140, 100), 位移向量 V = (-40, 40), 長度 L = 40 × √2 ≈ 56.57px, 傾角 θ = 135°
      • S2: Start (220, 60) -> End (180, 100), 位移向量 V = (-40, 40)
      • S3: Start (260, 60) -> End (220, 100), 位移向量 V = (-40, 40)
      • S4: Start (300, 60) -> End (260, 100), 位移向量 V = (-40, 40)
    • 縱列斜針 (S5-S6)：
      • S5: Start (300, 100) -> End (260, 140), Δx = -40, Δy = +40
      • S6: Start (300, 140) -> End (260, 180), Δx = -40, Δy = +40
  • Phase ② (針路 13 – 24，藍色長斜針系)：
    • 橫排長斜針 (S7-S10)：
      • S7: Start (140, 100) -> End (60, 180), 位移向量 V = (-80, 80), 長度 L = 80 × √2 ≈ 113.14px, 傾角 θ = 135°
      • S8: Start (180, 100) -> End (100, 180), 位移向量 V = (-80, 80)
      • S9: Start (220, 100) -> End (140, 180), 位移向量 V = (-80, 80)
      • S10: Start (260, 100) -> End (180, 180), 位移向量 V = (-80, 80)
    • 縱列長斜針 (S11-S12)：
      • S11: Start (260, 140) -> End (180, 220), 位移向量 V = (-80, 80)
      • S12: Start (260, 180) -> End (180, 260), 位移向量 V = (-80, 80)

3. 模組複製與對角平移矩陣

整體視覺陣列由 24 針為一組基礎單元 (Unit Group) 進行對角遞歸複製：
  • 第一平移組 (針路 25 – 48)：平移向量 T1 = (+120, +120)
  • 第二平移組 (針路 49 – 72)：平移向量 T2 = (+240, +240)

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

1. 結構脊柱與幾何張力平衡

  • 雙重剪應力交叉鎖定：Canvas-013 採用短跨距（56.57px）與長跨距（113.14px）兩種斜向線段交替平行排列。所有線段之向量傾角均為 135°，將布料張力統一導向左下與右上對角方向。
  • 階梯式應力分散點： Phase ① 的 6 針與 Phase ② 的 6 針在節點上形成 90° 的階梯狀轉折（如 300,60 -> 300,100 -> 300,140）。此種不連續的端點分佈能有效打破單一長線條所產生的布料拉扯局限，將拉力均勻拉散至網格孔洞中。

2. 三維浮雕感（3D Relief）與立體物理機制

  • 疊層高度差 (Height Differential)：Phase ② 的藍色長針跨越 2×2 個網格，線材浮於布料表面的長度為 Phase ① 短針的兩倍。4絲對折的 DMC 繡線在高密度排列下會產生向上擠壓的物理膨脹效果。
  • 光影鋸齒溝槽 (Shadow Terraces)：短斜針與長斜針在邊界處形成的「3格×3 再 2格×2」階梯差，能在斜射光線下投射出具備層次感的多重陰影，於平面布料上構建出宛如「上下坡路」的真實立體階梯質感。

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

1. SVG 幾何參數與渲染規範

  • ViewBox 規範：0 0 720 600
  • 網格系統：基底採用 40px × 40px Pattern 網格，網格點半徑 r = 1.5px。
  • 線條規格：
    • 紅色短斜針：stroke: #ef4444, stroke-width: 3.8, stroke-dasharray: 56.57
    • 藍色長斜針：stroke: #0284c7, stroke-width: 3.8, stroke-dasharray: 113.14
  • 動畫控制：基於 Sequential Delay 機制，每一步驟基準間隔為 480ms，搭配 stroke-dashoffset 遞減達到擬真刺繡畫線效果。

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

🧵 Canvas-013 : 刺繡針路圖形動畫 (1 – 72 針)
第 0 / 72 針
12 34 56 78 910 1112 1314 1516 1718 1920 2122 2324 2526 2728 2930 3132 3334 3536 3738 3940 4142 4344 4546 4748 4950 5152 5354 5556 5758 5960 6162 6364 6566 6768 6970 7172

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

實體刺繡正面 (Front View)實體刺繡背面 (Back View)邏輯手稿圖典 (Design Diagram)
圖一：實體刺繡正面成果，展示灰白與深綠交織出的階梯立體浮雕光影。圖二：實體刺繡背面，呈現平行拉線與張力束集點。圖三：幾何座標與針路數值化繪製手稿 (1-72針)。

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

1. 物理覆蓋率與幾何公式 (Physical Coverage Calculation)

  • 網格單元面積：A_cell = 40px × 40px = 1600 px²
  • 單一基礎模組 (24針) 線條總長度：
    • Phase ① (6 針)：6 × 56.57px = 339.42px
    • Phase ② (6 針)：6 × 113.14px = 678.84px
    • 總線長 L_total = 1018.26px
  • 物理覆蓋率 (Coverage Ratio)：在 DMC 4絲對折（等效線寬 w ≈ 1.8px）下，單一模組佔據 6×6 網格（面積 57600 px²），線條總覆蓋面積為 1018.26 × 1.8 ≈ 1832.87 px²，基礎物理覆蓋率 ≈ 31.8%。透過雙軌緊密堆疊後可達到 85% 以上的高飽和立體覆蓋。

2. Procedural 參數矩陣

const Canvas013_Parameters = {
  unitSize: 40,               // 基礎網格尺寸 (px)
  stepSequence: [3, 2],       // 階梯排列週期: 3格x3 先行，再接 2格x2
  phase1Length: 1.0,          // Phase 1 線段長度 (網格單元倍數, sqrt(2)*40)
  phase2Length: 2.0,          // Phase 2 線段長度 (網格單元倍數, 2*sqrt(2)*40)
  strokeAngle: 135,           // 主刺繡線段角度 (度)
  repeatVector: { x: 3, y: 3 },// 模組複製對角平移步數 (3 grid units)
  colors: {
    phase1: "#ef4444",        // 代表灰白色短斜針
    phase2: "#0284c7"         // 代表深綠色長斜針
  }
};
返回頂端