研究案例：Canvas-019

刺繡運算語法卡片

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

屬性項目詳細參數與規格說明
作品編號Canvas-019
感知意象爬格子 (Step-Climbing Structure / Staircase Progression)
基本結構雙向對角階梯結構（橫向 4 個對角線 × 直向 4 個對角線）
線材規格DMC 25 號刺繡線，取 3 絲對折（等效 6 股強度與豐厚度）
色彩計畫漸層三色配置：深綠色 (#0284c7 代表色域一)、中綠色 (#dc2626 代表色域二)、淺綠色 (#eab308 代表色域三)
刺繡方向左上角斜向往中心之下延伸刺繡 (Top-Left to Bottom-Right Diagonal Traversal)

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

  1. 基本幾何與對角向量 (Diagonal Vector Basis)
    • 網格系統：採用標準正方形網格，每單元格長寬為 g (在 SVG 中相當於 20px，實體網格通常為 2mm 或 1 網格單位)。
    • 針路幾何：每單一斜針跨越 2 格橫向與 2 格縱向 (相當於 3×3 網格點陣列)，其長度由勾股定理決定：
      L = sqrt((2g)^2 + (2g)^2) = 2 * sqrt(2) * g approx 2.828 g
      (於 6mm 網格基準下，實際刺繡針長為 10.1mm)
    • 向量傾角：刺繡方向自左上走向右下，方向角 theta = -45 deg (或純向量 135 deg / -45 deg 方向)。
  2. Phase 1：基本模組與階段平移 (Phase Operations)
    • 階段 1 (針 1 至 12，基本對角單元群)：
      • 起針點 (針 1): 起始座標 (x_1, y_1) = (210, 70)。
      • 終針點 (針 2): (x_2, y_2) = (250, 110)。位移向量 (dx, dy) = (+40, +40) (即 +2g, +2g)。
      • 子步驟 1-1 (針 1-6): 沿 y 軸正向連續向下平移，平移量 dy = +20 (即 +1g)。
        針 1-2: (210,70) -> (250,110)
        針 3-4: (210,90) -> (250,130)
        針 5-6: (210,110) -> (250,150)
      • 子步驟 1-2 (針 7-12): 沿 x 軸負向連續向左平移，平移量 dx = -20 (即 -1g)。
        針 7-8: (190,110) -> (230,150)
        針 9-10: (170,110) -> (210,150)
        針 11-12: (150,110) -> (190,150)
    • 階段 2 (針 13 至 24，複製平移矩陣):
      • 將針 1-12 之全體座標進行複合向量平移：先向下平移 3 格 (dy = +60)，再向左平移 3 格 (dx = -60)。
      • 複合平移向量 V_trans = (-60, +60)。
      • 例如：針 13 之起點 = (210 – 60, 70 + 60) = (150, 130)。
    • 階段 3 (針 25 至 36，第二次複合平移):
      • 將針 13-24 再次套用相同的平移向量 V_trans = (-60, +60)。
      • 針 25 之起點 = (150 – 60, 130 + 60) = (90, 190)。
  3. Phase 2：區域擴展與階梯疊加 (Regional Operations)
    • 區域一 (第 1-36 針)：構建第一條斜向階梯帶（深綠色系 / 藍色渲染）。
    • 區域二 (第 37-72 針)：沿主對角垂直向量 (dx, dy) = (+40, +40) 向右下複製第一區域結構，構成第二層階梯（中綠色系 / 紅色渲染）。
    • 區域三 (第 73-108 針)：繼續向右下位移 (+40, +40) 疊加第三層階梯（淺綠色系 / 黃色渲染），完成全幅鋪滿。

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

  1. 結構脊柱與幾何交錯 (Structural Backbone & Interlocking)
    • Canvas-019 的核心力學結構建立於「3格×3格 45度斜針」與「正交階梯狀陣列」的交織。
    • 針路交替方向：3 針縱向向下延伸，接續 3 針橫向向左鋪展。這種 90 度轉折的階梯式路徑構成幾何交錯骨架（Interlocked Backbone），有效避免了傳統單向長針刺繡容易發生的線材鬆脫或滑移現象。
  2. 張力平衡機制 (Tension Balance Mechanism)
    • 兩向作用力抵消：刺繡線材在 -45 deg 方向施加拉力 T_diag。由於針法採用 3 縱 3 橫的 Zig-zag 階梯分佈，作用於織物紗線上的分力可均勻拆解為：
      F_x = T_diag * cos(45 deg)
      F_y = T_diag * sin(45 deg)
    • 織物形變抑制：水平與垂直方向的分力大小相等 (F_x = F_y)，使得布面橫向紗線與縱向紗線受到的拉力保持嚴格平衡，徹底消除布料因單向受力而產生的斜向扭曲 (Puckering)。
  3. 應力分散與體積支撐 (Stress Distribution & Volumetric Support)
    • 體積的支撐 (Volumetric Cushioning)：DMC 3 絲對折（6 股）提供極高的線材線密度。45 度對角線跨越 2 格（長度約 10.1mm），在密集的階梯交錯下，布面上方形成一層具有厚度與彈性的浮雕層。
    • 背面結點強度 (Backside Anchorage)：背面線路形成緊密的長方形與階梯狀連接（如 CV_019B 圖檔所示），網格交接點（Grid Nodes）承受高密度的穿刺拉力，形成穩固的拓樸網絡，保證實體作品在長時間展示下結構不變形。

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

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

Canvas-019 (1-108針全集) – 慢速2倍 (藍/紅/黃三區)
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 7374 7576 7778 7980 8182 8384 8586 8788 8990 9192 9394 9596 9798 99100 101102 103104 105106 107108

2.SVG 幾何參數條列說明

  • ViewBox 規格：0 20 360 360（正方形繪圖區，頂部預留 20px 空間）。
  • 網格系統 (Grid System)：背景採用 20px × 20px 之正方形網格，中心輔以直徑 3px 之灰點 (fill: #94a3b8) 標示穿刺節點。
  • 動畫控制機制：
    • 採用 CSS stroke-dasharray: 100 與 stroke-dashoffset: 100。
    • 單針繪製時間 (Single Stitch Duration)：0.7 秒，採用 cubic-bezier(0.4, 0, 0.2, 1) 緩和曲線。
    • 順序延遲 (Sequential Delay)：單針計時增量為 0.4 秒，總共 108 針，呈現連續且流暢的慢速刺繡過程。
  • 區域與色彩分配：
    • 區域一 (針 1-36)：標示色 #0284c7 (寶藍色代表深綠色線區)。
    • 區域二 (針 37-72)：標示色 #dc2626 (鮮紅色代表中綠色線區)。
    • 區域三 (針 73-108)：標示色 #eab308 (琥珀黃代表淺綠色線區)。

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

刺繡實體正面 (Front View)刺繡實體背面 (Back View)原始設計手稿 (Manuscript)
正面：呈現漸層三色階梯立體浮雕感背面：呈現雙向縱橫緊密錨定圖樣手稿：精確標註 1-108 針號與區塊邏輯

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

  1. 物理覆蓋率 (Physical Surface Coverage Ratio)
    • 在標準網格（如 14-count Aida 或 6mm 網格）上，雙向對角階梯網格形成高密度的線材鋪設。
    • 線材厚度 d_thread 與網格單位 g 滿足 6 * d_strand approx 1.2mm，刺繡線疊加率達到 100% 覆蓋，無裸露底布。
  2. Procedural 程式化擴充參數 (Procedural Extension Parameters)
    • stepSequence: [3, 3] (代表 3 針垂直向下、3 針水平向左的階梯交替模式)。
    • unitSpacing: 1g (代表子步驟單針之間的正交平移距離)。
    • blockOffset: (-3g, +3g) (代表整組基本圖案 1-12 轉移至 13-24 時的複製位移向量)。
    • diagonalSpan: (2g, 2g) (代表單一斜針跨越 2 格橫向與 2 格縱向，對角角度 -45 deg)。
    • gapRatio: 0 (無空隙緊密相連)。
  3. 變體矩陣 (Variant Matrix & Parametric Variations)
    • Canvas-019-V1 (鋸齒波浪變體)：將 stepSequence 改為 [4, 2]，產生不對稱斜向波紋。
    • Canvas-019-V2 (雙向交織變體)：將第二區域的針路方向旋轉 90 度，使斜針交錯呈 90 度十字網狀。
    • Canvas-019-V3 (微型階梯變體)：縮小單針跨度為 (1g, 1g)，stepSequence 改為 [2, 2]，適合高精細度邊框刺繡。
返回頂端