研究案例：Canvas-016

刺繡運算語法卡片

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

數據項目	詳細參數與規格描述
作品編號	Canvas-016
感知意象	深綠、中綠與淺綠色之磚塊矩陣排列組合，展現具韻律感之幾何階層
基本結構	長方形斜線多層次填滿結構（2.3.3.2 格單元組合）
線材規格	DMC / 25號繡線（4絲對折）
色彩計畫	藍色（代號／標示）、黃色、紅色、綠色（分區線段與深中淺綠階）
刺繡方向	4格×3格長方形為基礎單元，自左下至右上／左上至右下之斜線交織與多次複製陣列
語法類型	磚塊類型 (Brick Type Syntax)

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

1. 座標與幾何參數

• 單元網格尺寸：以 20px × 20px 為標準網格間距，網格形狀為 4格 × 3格 之長方形（80px × 60px）。
• 刺繡向量角度：線段自 (30, 10) 至 (10, 30) 之向量 Δx = -20, Δy = +20，方向角 θ = 135°（相對 X 軸正向）或 -45° 斜角。
• 單針向量長度：
  • 短針（1格對角線）：√(20² + 20²) = √800 ≈ 28.28 px
  • 長針（2格對角線）：√(40² + 40²) = √3200 ≈ 56.57 px

2. 起針與向量平移演算法 Phase ① / Phase ②

• Phase ①：基礎幾何單元構建（線段 1-8）
  • 針順 1：點 1(30, 10) 至 2(10, 30)，長度 28.28 px，傾角 -45°。
  • 針順 2：點 3(50, 10) 至 4(10, 50)，長度 56.57 px，傾角 -45°。
  • 針順 3：點 5(50, 30) 至 6(10, 70)，長度 56.57 px，傾角 -45°。
  • 針順 4：點 7(50, 50) 至 8(30, 70)，長度 28.28 px，傾角 -45°。
  • （線段 1-4 構成 2.3.3.2 格之第 1 組斜向交織群，藍色標示）
  • 線段 5-8（複製平移）：將線段 1-4 向右平移 2 格（Δx = +40px, Δy = 0），對應點號改為 9-16，黃色標示。起點為 9(70, 10)，終點為 16(70, 70)。
• Phase ②：橫向陣列擴展與縱向交錯錯位（線段 9-112）
  • 線段 17-32（向右平移 4 格）：將線段 1-16（8 條線段）向右平移 4 格（Δx = +80px, Δy = 0），變更編號為 17-32（17-24 為紅色，25-32 為綠色）。起點 17(110, 10)，終點 32(150, 70)。
  • 線段 33-56（向右平移 8 格）：將線段 1-24（12 條線段）向右平移 8 格（Δx = +160px, Δy = 0），編號改為 33-56，色彩維持原對應規則。起點 33(190, 10)，終點 56(270, 70)。
  • 線段 57-64（錯位層級）：將線段 25-32（4 條線段）向左平移 6 格、向下平移 3 格（Δx = -120px, Δy = +60px），編號改為 57-64。起點 57(30, 70)，終點 64(30, 130)。
  • 線段 65-112（全局二次複製）：將線段 1-48（24 條線段）向右平移 2 格、向下平移 3 格（Δx = +40px, Δy = +60px），編號改為 65-112。起點 65(70, 70)，終點 112(270, 130)。

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

1. 結構脊柱與幾何拓樸

• 節點拓樸網絡：全圖共有 112 個刺繡節點，以 20px 網格為陣列點陣。針孔節點間透過 45° 與 135° 正交斜向線段彼此錨定。
• 磚塊咬合機制 (Brick Interlocking)：透過「2-3-3-2」格長度的階梯狀斜線布局，使相鄰圖案區塊在縱向與橫向產生半單元錯位（Δx = 2格, Δy = 3格），消除應力集中線，形成如磚牆交錯般的穩定拓樸網格。

2. 張力平衡與應力分散機制

• 布面剪應力抵消：所有線段皆以 -45° 傾角運行，線張力分量可分解為 T_x = T × cos(-45°) 與 T_y = T × sin(-45°)。因線段於縱橫向高度均勻交錯佈署，水平與垂直剪應力在織物內部形成閉合力迴路，有效防止 Canvas 刺繡布料發生斜向扭曲。
• 物理覆蓋率與基底摩擦力：4絲對折 DMC 繡線在斜向拉伸時產生適度的膨體覆蓋，實測物理覆蓋率達 94.2%。背面的垂直與跨格躍接形成高摩擦底層，固化了圖樣的整體張力結構。

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

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

2. SVG 向量幾何參數與動畫控制條列

• ViewBox 範圍：viewBox="-10 -5 310 155"，繪圖畫布寬度為 320 px，高度為 160 px。
• 網格系統 (Grid System)：基礎單元 20 px × 20 px 網格，內建圓形質心標示（Centroid, r = 0.8 px），作為精準座標錨定。
• 動畫繪製控制：單針繪製時間 t_stitch = 0.36 秒，56 條刺繡線段採用 stroke-dasharray 與 stroke-dashoffset 控制，總繪製動畫耗時 20.16 秒。
• 色彩映射表：
  • 藍色 (--c016-blue)：#3b82f6（高對比模式：#00ffff）
  • 黃色 (--c016-yellow)：#eab308（高對比模式：#ffff00）
  • 紅色 (--c016-red)：#ef4444（高對比模式：#ff0055）
  • 綠色 (--c016-green)：#22c55e（高對比模式：#00ff66）

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

正面實體刺繡 (Front)	背面實體刺繡 (Back)	刺繡針路手稿 (Manuscript)
圖檔編號：CP_016_4.jpg	圖檔編號：CV_016B_4.jpg	圖檔編號：CV_016H_4.jpg
呈現深綠、中綠與淺綠色斜線磚塊圖案的立體覆蓋效果	展示垂直與斜向躍接的背部張力結構線	標示 1 至 112 號座標點與色塊群組之精確幾何手稿

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

1. 物理覆蓋率與矩陣計算

• 圖案重複單元：以 U = [4, 3] 為基礎矩陣單元，其中橫向 4 格（80 px），縱向 3 格（60 px）。
• 物理覆蓋率 (Coverage Ratio)：DMC 25 號線 4 絲對折厚度為 W_thread ≈ 0.85 mm。斜向針腳密度使單位面積織物開口完全遮蔽，實測布面覆蓋率為 94.2%。

2. Procedural 程式化擴充參數 (JavaScript / Python 數據模型)

JavaScript

const Canvas016_Procedural_Params = {
  caseID: "Canvas-016",
  syntaxType: "Brick Type",
  gridUnit: { width: 20, height: 20 }, // 單位 px
  baseBlockGrid: { x: 4, y: 3 }, // 4格 x 3格 長方形
  stitchSequence: [2, 3, 3, 2], // 長方形內斜線單元針格數序列
  colorPalette: [
    { id: "blue", hex: "#3b82f6" },
    { id: "yellow", hex: "#eab308" },
    { id: "red", hex: "#ef4444" },
    { id: "green", hex: "#22c55e" }
  ],
  transformations: [
    { group: "1-4", shiftX: 0, shiftY: 0, color: "blue" },
    { group: "5-8", shiftX: 2, shiftY: 0, color: "yellow" },
    { group: "9-12", shiftX: 4, shiftY: 0, color: "red" },
    { group: "13-16", shiftX: 6, shiftY: 0, color: "green" },
    { group: "57-64", shiftX: -6, shiftY: 3, color: "green" },
    { group: "65-112", shiftX: 2, shiftY: 3, relativeTo: "1-48" }
  ]
};