메뉴
Evaluate and implement visualization algorithms for ocean/foam rendering. Use when discussing rendering techniques, contour algorithms, performance optimization for graphics, or evaluating algorithm tradeoffs. Auto-apply when editing files in src/render/.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | visualization-algorithms |
| description | Evaluate and implement visualization algorithms for ocean/foam rendering. Use when discussing rendering techniques, contour algorithms, performance optimization for graphics, or evaluating algorithm tradeoffs. Auto-apply when editing files in src/render/. |
This project renders ocean waves and foam using Canvas 2D with custom algorithms. Apply this skill when evaluating or implementing visualization approaches.
Location: src/render/marchingSquares.js
Foam Rows → Intensity Grid → Blur → Marching Squares → Contours → Canvas
| Function | Purpose |
|---|---|
buildIntensityGrid() | Convert foam rows to 2D grid |
boxBlur() | Smooth grid with 3x3 kernel |
extractContours() | Trace closed contour paths |
extractLineSegments() | Get raw line segments (debug) |
renderMultiContour() | Multi-threshold nested rings |
Three approaches for foam dispersion over time:
Option A: Expanding Segment Bounds
Option B: Age-Based Blur
Option C: Per-Row Dispersion Radius
When comparing visualization algorithms, consider:
// Lower resolution = faster, less detail
const gridW = 80; // Default
const gridH = 60;
// For mobile/low-end: 40x30
// For high quality: 120x90
// Box blur is O(n) per pixel with separable passes
// Multiple passes approximate Gaussian blur
const blurPasses = 2; // Default - good balance
// Use Float32Array for grid data
const grid = new Float32Array(gridW * gridH);
Located in src/stories/FoamRendering.stories.jsx:
| Story | Purpose |
|---|---|
Zones Early/Mid/Late Wave | Wave lifecycle stages |
Samples Early/Mid Wave | Algorithm comparison |
Comparison Mid Wave | Side-by-side options |
Small/Large Wave | Size variations |
Zones T0-T35 | Animation frames |
00-principles.mdplans/visuals/60-foam-effects.md - Foam designplans/visuals/132-foam-rendering-layers.md - Layered approachplans/visuals/foam-dispersion-v2-tests.md - Dispersion testingplans/00-principles.md - Physics basis for visual behaviorVisual regression for canvas-rendered matrix progressions. Tests filmstrip strips that show how 2D data evolves visually over time. Auto-apply when editing *Progressions.ts strip definitions or stories with filmstrip components.
Screenshot testing for React components with Playwright. Captures component pixels and compares to baselines. Auto-apply when editing React component stories or *.visual.spec.ts files that test UI components.
Pure logic and math testing with Vitest. Use for single-point assertions on functions, state transitions, and physics calculations. Auto-apply when editing *.test.ts files (except *Progressions.test.ts).
Matrix data model verification using ASCII diagrams. Use when working with *Progressions.ts files, defineProgression(), or testing how 2D numeric grids evolve over time. Auto-apply when editing files matching *Progressions.ts or src/test-utils/ascii*.ts.
Testing strategy orchestrator. Use when discussing test types, test order, or choosing how to test something. Auto-apply for general testing questions.
Screenshot-based regression testing with Playwright. Compares rendered pixels against baseline PNGs. Use when working with stories, *.visual.spec.ts files, or baseline screenshots. Auto-apply when editing files in stories/ or *.visual.spec.ts.