Case Study: Canvas-016 Algorithmic Analysis of Multi-layered Diagonal Brick Stitch

Module 1: Metadata Table

Field	Detailed Value & Specifications
Case ID	Canvas-016
Perceptual Image	Brick-like matrix array of dark, medium, and light green shades demonstrating rhythmic geometric hierarchy
Basic Structure	Diagonal multi-layered fill pattern in a rectangular layout (2.3.3.2 grid unit composition)
Thread Specification	DMC Cotton Floss No. 25 (4-strand folded)
Color Scheme	Blue (marking/grouping), Yellow, Red, Green (zonal line segments and green gradient transitions)
Stitching Direction	4-grid × 3-grid rectangular base unit with diagonal stitches (bottom-left to top-right / top-left to bottom-right) duplicated in a matrix array
Syntax Type	Brick Type Syntax

Module 2: Starting & Vector Operations

1. Coordinates and Geometric Parameters

Unit Grid Dimensions: Standard grid spacing of 20px × 20px, forming a 4-grid × 3-grid rectangle (80px × 60px).
Vector Angle: Line segments from (30, 10) to (10, 30) have vectors Δx = -20, Δy = +20, with an inclination angle θ = 135° (or -45° diagonal relative to X-axis).
Single Stitch Length:
- Short Stitch (1-grid diagonal): √(20² + 20²) = √800 ≈ 28.28 px
- Long Stitch (2-grid diagonal): √(40² + 40²) = √3200 ≈ 56.57 px

2. Starting Point and Shift Vector Algorithm (Phase ① / Phase ②)

Phase ①: Base Unit Construction (Stitches 1-8)
- Stitch 1: From point 1(30, 10) to 2(10, 30), length 28.28 px, angle -45°.
- Stitch 2: From point 3(50, 10) to 4(10, 50), length 56.57 px, angle -45°.
- Stitch 3: From point 5(50, 30) to 6(10, 70), length 56.57 px, angle -45°.
- Stitch 4: From point 7(50, 50) to 8(30, 70), length 28.28 px, angle -45°.
- (Stitches 1-4 form the 1st diagonal group of 2.3.3.2 grids, marked in blue)
- Stitches 5-8 (Copy & Shift): Shift stitches 1-4 to the right by 2 grids (Δx = +40px, Δy = 0), node IDs updated to 9-16, marked in yellow. Starts at 9(70, 10) and ends at 16(70, 70).
Phase ②: Horizontal Matrix Extension and Vertical Staggered Offset (Stitches 9-112)
- Stitches 17-32 (Shift Right 4 Grids): Duplicate stitches 1-16 (8 lines), shift right by 4 grids (Δx = +80px, Δy = 0), assign IDs 17-32 (17-24 Red, 25-32 Green). Starts at 17(110, 10), ends at 32(150, 70).
- Stitches 33-56 (Shift Right 8 Grids): Duplicate stitches 1-24 (12 lines), shift right by 8 grids (Δx = +160px, Δy = 0), assign IDs 33-56 with original color mapping. Starts at 33(190, 10), ends at 56(270, 70).
- Stitches 57-64 (Offset Row): Duplicate stitches 25-32 (4 lines), shift left by 6 grids and down by 3 grids (Δx = -120px, Δy = +60px), assign IDs 57-64. Starts at 57(30, 70), ends at 64(30, 130).
- Stitches 65-112 (Global Secondary Duplicate): Duplicate stitches 1-48 (24 lines), shift right by 2 grids and down by 3 grids (Δx = +40px, Δy = +60px), assign IDs 65-112. Starts at 65(70, 70), ends at 112(270, 130).

Module 3: Structural Mechanics & Topology

1. Structural Spine and Geometric Topology

Node Topology Network: The pattern consists of 112 stitch nodes arrayed on a 20px grid matrix. Nodes are anchored via orthogonal diagonal lines at 45° and 135°.
Brick Interlocking Mechanism: The stepped diagonal sequence (2-3-3-2 grid units) creates a half-unit offset (Δx = 2 grids, Δy = 3 grids) between adjacent pattern modules, eliminating stress concentration lines and constructing a stable topology similar to interleaved brickwork.

2. Tension Equilibrium and Stress Dispersion

Fabric Shear Stress Cancellation: All stitches run at a -45° inclination angle, generating tension components T_x = T × cos(-45°) and T_y = T × sin(-45°). Due to symmetrical grid interleaving horizontally and vertically, shear stresses form closed force loops within the fabric, preventing diagonal distortion of the Canvas fabric.
Coverage Ratio and Friction: 4-strand DMC floss expands upon diagonal tensioning, providing an empirical physical coverage of 94.2%. Vertical and cross-grid backing jumps create a high-friction foundation that locks the structural tension of the entire pattern.

Module 4: Vector API & Dynamic Animation Code

1. Renderable HTML/SVG Code (Pure CSS Checkbox Interactive Card

Yunbroidery Canvas-016 刺繡圖樣結構動畫

Yunbroidery Canvas-016 Embroidery Pattern Structure Animation

🔄 Reset / Replay ⏸ Pause / Continue 👁 High contrast mode

Current pin number: Stitch 0 / 56

Total embroidery thread length: 0 / 2375 px

Draw the overall progress: 0%

2. SVG Geometric Parameter Specification

ViewBox Range: viewBox="-10 -5 310 155", total canvas width 320 px, height 160 px.
Grid System: 20 px × 20 px unit grid with built-in centroids (r = 0.8 px) for precise coordinate anchoring.
Animation Control: Single stitch rendering duration t_stitch = 0.36s. 56 stitch lines driven by stroke-dasharray and stroke-dashoffset over a total animation duration of 20.16s.
Color Palette Mapping:
- Blue (--c016-blue): #3b82f6 (High Contrast: #00ffff)
- Yellow (--c016-yellow): #eab308 (High Contrast: #ffff00)
- Red (--c016-red): #ef4444 (High Contrast: #ff0055)
- Green (--c016-green): #22c55e (High Contrast: #00ff66)

Module 5: Visual Gallery

Front Embroidery Piece	Back Embroidery Piece	Manuscript Map
File ID: CP_016_4.jpg	File ID: CV_016B_4.jpg	File ID: CV_016H_4.jpg
Shows 3D coverage of dark, medium, and light green diagonal brick patterns	Shows vertical and diagonal jump tension lines on the reverse side	Displays precise geometric coordinates for nodes 1 to 112

Module 6: Algorithm Extensions & Variant Syntax

1. Physical Coverage & Matrix Computation

Pattern Repeat Unit: Base matrix U = [4, 3], representing 4 horizontal grids (80 px) and 3 vertical grids (60 px).
Coverage Ratio: 4-strand DMC No. 25 thread width W_thread ≈ 0.85 mm. Stacking density ensures complete fabric coverage, achieving an empirical physical coverage rate of 94.2%.

2. Procedural Parameter Model (JavaScript / Python)

JavaScript

const Canvas016_Procedural_Params = {
  caseID: "Canvas-016",
  syntaxType: "Brick Type",
  gridUnit: { width: 20, height: 20 }, // in px
  baseBlockGrid: { x: 4, y: 3 }, // 4x3 grid rectangle
  stitchSequence: [2, 3, 3, 2], // grid sequence per stitch
  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" }
  ]
};

YUNBROIDERY