研究案例：Canvas-018

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

數據項目典藏紀錄與規格
作品編號Canvas-018
感知意象好朋友 (Good Friends)
基本結構2.3.3.2 格組成 3格×4長方形鏡像對稱矩陣
語法類型鏡像對稱 (Mirror Symmetry)
線材規格DMC 5號線 / 25號3絲對折
色彩計畫翡翠綠 (Emerald Green)、明黃色 (Bright Yellow)
刺繡方向綠色：左上至右下（-45°）/ 黃色：右下至左上（135°）

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

1. 起針邏輯與階段順序 (Phase Sequence)

  • Phase ①：雙色交叉陣列構建 以 2-3-3-2 格長為基礎，交替繪製紅/藍（綠/黃）向量針步。綠色針步（紅線標示）由左上走向右下，黃色針步（藍線標示）由右上走向左下或右下走向左上，形成兩組對角的張力網格。
  • Phase ②：區塊複製與鏡像陣列延伸
    • 第 1 區（基本圖形，針步 1–16）： 涵蓋 2.3.3.2 格組成的長方形鏡像對稱核心。
    • 第 2 區（針步 17–32）： 將第 1 區沿 X 軸正方向平移 Δx = +4 格（+80px），重複生成交錯針步。
    • 第 3 區（針步 33–48）： 再沿 X 軸正方向平移 Δx = +4 格（+80px），生成第三組水平單元。
    • 第 4–6 區（針步 49–96）： 將前三區沿 Y 軸正方向平移 Δy = +3 格（+60px），完成 3×2 區塊之陣列對稱擴充。

2. 精準座標與向量平移算術

  • 網格基準點與變換： 網格單位 1 格 = 20 px。 單針向量定義為 V = (Δx, Δy)。
  • 基本針步向量與傾角：
    • 正向斜針（左上至右下，紅線/綠線）： 例如 針步 1 (S1)：P1 = (30, 30) -> P2 = (50, 50) 向量 V_red = (20, 20)，長度 L = √(20² + 20²) = 28.28 px，傾角 θ = -45°。 長斜針 針步 3 (S3)：P1 = (90, 30) -> P2 = (50, 70) 向量 V_blue = (-40, 40)，長度 L = √((-40)² + 40²) = 56.57 px，傾角 θ = 135°。
  • 區塊平移矩陣： 區域位置映射函數：R(i, j) = Base_Shape + (i * Δx_region, j * Δy_region) 其中 i ∈ {0, 1, 2}，j ∈ {0, 1}，Δx_region = 80 px (4格)，Δy_region = 60 px (3格)。

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

1. 結構脊柱與交點拓樸 (Structural Backbone & Intersections)

Canvas-018 的拓樸結構屬於「雙向斜交平衡晶格」（Bi-directional Diagonal Lattice）。
  • 脊柱節點： 核心交點位於網格的交會中心（如 (50, 50)、(50, 70)、(130, 50) 等）。這些節點承受多條不同方向針線的穿透，形成物理拓樸上的多重連通圖（Multi-connected Graph）。
  • 長短針疊加： 2-3-3-2 的步幅結構（跨 2 格與 3 格）創造了非均勻的網格密度，長針（跨 3 格，長度約 56.57 px）提供宏觀的張力骨架，短針（跨 2 格，長度約 28.28 px）則填充邊界與局部區域，形成堅固的物理交織點。

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

  • 矢量對稱消除布面扭曲： 刺繡時，斜向線條易造成織物向特定角度拉扯。Canvas-018 採用 -45°（綠線）與 +135°（黃線）的直角交叉對稱，使合力向量 ΣF ≈ 0。
  • 應力分散路徑： 拉力 F_total 被分解為 X 軸與 Y 軸分量： F_x = F * cos(45°) = 0.707 F F_y = F * sin(45°) = 0.707 F 由於正向與反向針步在同一區塊內成對出現，布料的局部剪應力（Shear Stress）在相鄰節點被相互抵消，防止長方形結構變形。

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

1. HTML/SVG 動態刺繡卡片

96 步針步刺繡 SVG 動畫模擬器

🧵 96 步針步刺繡 SVG 動畫模擬器

即時展示刺繡路徑與步驟順序（1-96 針步全圖解）

速度：
當前步驟：1 / 96 針 0%
第 1 區 (1-16) 第 2 區 (17-32) 第 3 區 (33-48) 第 4 區 (49-64) 第 5 區 (65-80) 第 6 區 (81-96)

2. SVG 幾何參數規格表

  • ViewBox 範圍： -10 -10 320 180
  • 網格系統： 基礎單元 20 px × 20 px，包含 6 大平移區域。
  • 色彩映射：
    • 紅色/綠色針步 (c018_red)：Hex #ef4444 (高對比模式 #ff0055)
    • 藍色/黃色針步 (c018_blue)：Hex #3b82f6 (高對比模式 #00e5ff)
  • 動畫時間矩陣：
    • 單針繪製時間（–stitch-duration）：0.6s
    • 步進延遲（–stitch-step）：0.4s
    • 總計算時長：19.4 秒（涵蓋 96 針次）

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

正面實體照 (Front View)背面實體照 (Back View)手稿針路圖 (Manuscript Grid)
圖 1：正面刺繡實體
展現綠色與黃色 DMC 5號線形成的鏡像對稱張力矩陣。		圖 2：背面鎖線結構
顯示斜向渡線與節點間的平整扣結邏輯。		圖 3：原始手稿針路圖
載明第 1–3 區之 1–48 針精準座標與對稱劃分。

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

1. 物理覆蓋率與幾何計算 (Coverage Calculation)

  • 網格面積： 1 格 = 20 px × 20 px = 400 px²
  • 單針覆蓋線寬： 3.5 px (實體線材約 1.2 mm)
  • 區域物理覆蓋率算式： Coverage Rate = (總針步長度 × 線寬) / (總區域面積) × 100% 經由長針（56.57 px）與短針（28.28 px）交疊計算，雙色交叉區域之物理覆蓋率達到 87.5%，形成高度緻密的對稱紋樣。

2. Procedural 程式化擴充參數

const Canvas018_Config = {
  unitSize: 20,            // 網格基礎尺寸 (px)
  stepSequence: [2, 3, 3, 2], // 經典步幅數值序列
  colors: {
    primary: '#ef4444',    // 翡翠綠 / 主紅
    secondary: '#3b82f6'   // 明黃 / 主藍
  },
  gridDimensions: {
    columns: 3,            // 水平區域複製數
    rows: 2                // 垂直區域複製數
  },
  translationVector: {
    dx: 80,                // 水平區域偏移 (4 格)
    dy: 60                 // 垂直區域偏移 (3 格)
  }
};

3. 變體矩陣與演算法轉換 (Variant Matrix)

  • 鏡像轉置變體 (Mirror Transpose): 將 -45° 與 135° 角轉換為 +45° 與 -135°，可產生倒置雙V形紋樣。
  • 比例伸縮變體 (Scale Invariance): 將步幅序列擴展為 [3, 4, 4, 3]，可精準套用至大尺寸織品（如 Canvas-036 等重構案例）。
返回頂端