# Interactive surfacefun demos

Runs in your browser through [numbl](https://numbl.org) — no install.

## ▶ [Open `refine_demo.m`](refine_demo.m) and click **Run**

A cubed-sphere [surfacefun](https://github.com/danfortunato/surfacefun) mesh
appears in the figure. Drag the **Refinement level** slider: the page sends the
level back to the script, which refines the mesh with surfacefun and returns the
new patches — the surface re-renders in place (drag to rotate, scroll to zoom).

## ▶ [Open `vector_field_demo.m`](vector_field_demo.m) and click **Run**

A tangent vector field (arrows) is displayed on a sphere. Use the **Arrow
scale** slider to make the arrows larger or smaller — scaling updates instantly
in the browser with no round-trip to the script. The field is the tangential
projection of a constant vector onto the surface, giving a smooth "wind" pattern.

## How it works

- [`refine_demo.m`](refine_demo.m) — builds a mesh and hands it to `mesh_refiner`
- [`vector_field_demo.m`](vector_field_demo.m) — builds a mesh and vector field; hands them to `vector_field_viewer`
- `mesh_refiner.m` / `vector_field_viewer.m` — open the figure, send data; `mesh_refiner` also handles slider callbacks
- `app/` — a small React/three.js app (built to a single HTML file) that renders
  the surface and hosts the controls

The figure app detects the data type (`data.type === 'vectorfield'` vs. plain
mesh data) and switches between the refinement panel and the arrow-scale panel.

On every push to `main`, the
[deploy workflow](.github/workflows/deploy.yml) builds the app, bundles the
project with the numbl browser IDE, and publishes it to GitHub Pages.