visualization-algorithms

Implement ocean foam and wave contour visualization algorithms for Canvas rendering.

2|Updated Nov 28, 2025

Search Tags:#performance #rendering #visualization #canvas #foam #marching-squares #contours

Ready to run

npx skills add https://github.com/joshribakoff/surfsim --skill visualization-algorithms

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visualization-algorithms
Source: https://github.com/joshribakoff/surfsim/tree/main/.claude/skills/visualization-algorithms
Command: npx skills add https://github.com/joshribakoff/surfsim --skill visualization-algorithms

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Evaluate and implement visualization algorithms for ocean foam rendering and wave contours, enabling more realistic visuals and efficient rendering pipelines.

Core Features & Use Cases

Build intensity grids from foam data
Apply blur to smooth data and extract contours
Render multi-contour visuals and dispersion options
Guide algorithm comparisons and performance tuning in Canvas-based simulations
Create Ladle stories for visual testing and documentation

Quick Start

Run a quick evaluation by inspecting the marchingSquares implementation and integrating a chosen contour rendering approach into src/render.

Frequently Asked Questions about visualization-algorithms

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render ocean foam contours using the marching squares algorithm in Canvas?▼

You can render ocean foam contours by building an intensity grid from foam data, applying blur to smooth the values, and extracting contours with a marching squares implementation. The Skill guides this pipeline for Canvas-based real-time rendering.

What is the best way to optimize ocean foam visualization performance across multiple dispersion modes?▼

The best way to optimize ocean foam visualization is by comparing algorithm implementations, tuning animation scales, and evaluating performance tradeoffs across multiple dispersion modes. This process ensures efficient real-time Canvas rendering.

How do I build an intensity grid from foam data for wave contour rendering?▼

Building an intensity grid requires processing raw foam data into a structured grid format, then applying a blur pass to smooth the values. This smoothed grid serves as the input for extracting wave contours and rendering visuals.

Does this approach support real-time Canvas-based rendering for ocean simulations?▼

Yes, this approach supports real-time Canvas-based rendering. It applies contour extraction and multi-contour visualization techniques directly within Canvas environments, enabling efficient ocean foam and wave rendering for simulations.

What are the tradeoffs of different contour rendering algorithms for foam visualization?▼

Tradeoffs involve balancing visual fidelity against rendering speed across different dispersion modes and animation scales. The Skill guides algorithm comparisons and documents these performance tradeoffs to help you choose the right contour rendering approach.

Why do I need to apply blur before extracting contours from foam data?▼

Applying blur before extracting contours smooths the intensity grid, reducing noise and producing cleaner wave contour lines. This smoothing step is necessary for generating visually coherent multi-contour ocean foam renderings.