See it live

Everything below runs in your browser, on a page that is itself a Taliesin document. Its full source is on GitHub.

A parametric 3D surface

A parametric wave-interference mesh, rendered with WebGL. Drag to orbit, scroll to zoom, and move the sliders to reshape it in real time. The renderer is transparent, so it follows the page theme. Both 3D demos share a makeScene3D helper that {{< include >}} pulls in from _includes/three-scene.tmd; it loads Three.js from esm.sh, so the two scenes need network access.

A live equation and its plot

The square wave is a sum of odd harmonics. Drag $N$ and watch the partial sum sharpen toward the square. The equation is rendered offline by KaTeX, the chart by the vendored Observable Plot, and both react to the same slider:

$$f(t)=\sum_{k=1}^{N}\frac{\sin\!\big((2k-1)\,2\pi t\big)}{2k-1}.$$

The cell that draws it

A {js} cell renders only its output, never a listing of itself, so the cell above is reprinted here as it appears in the .tmd:

//| input: harmonics
const N = tali.value("harmonics");
const ys = Array.from({ length: 500 }, (_, t) =>
  d3.range(1, N + 1).reduce(
    (s, k) => s + Math.sin(2 * Math.PI * (2 * k - 1) * t / 500) / (2 * k - 1),
    0));
return Plot.lineY(ys, { curve: "basis", stroke: "#3A5578" })
  .plot({ height: 240, marginLeft: 40,
          x: { label: "t" }, y: { label: "amplitude" } });

The Lorenz attractor

The attractor is integrated live in the browser and drawn as it grows. Drag to orbit, and move the σ / ρ / β sliders to watch a deterministic system fold into a two-winged strange attractor, and then collapse.