Equation.io

equation.io — a graphing calculator with a built-in CAS. Type equations; they compile to GPU shaders and render as 2D curves, 3D surfaces, vector fields, ODE phase portraits, probability densities, and more. Every graph lives entirely in its URL, so the address bar is the share button.

The graph.tk story

This is the successor to graph.tk, which started in this repository in May 2010 as an HTML5-canvas grapher and picked up 400+ stars over the years. The site ran on a free .tk domain — which turned out to be the fatal flaw: the registrar (Freenom) eventually seized the domain to serve ads on it, and after Meta sued Freenom the whole .tk registry collapsed and the domain stopped resolving entirely.

The lesson was learned and the grapher was rebuilt from scratch — new parser, new CAS, WebGL rendering instead of canvas — on a domain that's actually owned: equation.io. The original code is preserved on the legacy branch (tag graph.tk-final) under its original LGPL-3.0 terms; everything on main is a clean-room rewrite, MIT licensed. The old UI remains usable at graph.equation.io.

Architecture

Deployed as a Cloudflare Worker.

• lib/ — tokenizer, shunting-yard parser, symbolic expression core (expr.ts), and a GLSL compiler (glsl.ts) used for plotting.
• web/ — the grapher. Every equation is compiled to a GLSL scalar field F whose zero set is the graph:
  • 2D: fullscreen-quad fragment shader; the curve is drawn where the distance estimate |F|/|∇F| is under a pixel, with a two-scale consistency test rejecting fake lines at poles/asymptotes (e.g. y=tan(x)).
  • 3D (automatic when z appears): raymarched implicit surface — sign-change detection along each ray, bisection refinement, finite-difference normals, gl_FragDepth so multiple surfaces intersect correctly. Equations without z extrude to their true locus in R³.

The whole graph state lives in the URL (/g/eq1;eq2;…, each equation percent-encoded via lib/link.ts, which also escapes parens so chat-app linkifiers don't truncate the URL; legacy /#… links still load), so any set of equations is linkable and the address bar is the share mechanism. Agent-facing surface:

• /llms.txt — link format + expression syntax reference (web/public/llms.txt)
• /g/<eqs> — share form of a graph link; the worker injects og:/twitter: meta tags and /api/og/<eqs> renders the preview PNG on the CPU (expressions compile to a stack machine — no WebGL in Workers)
• /mcp — stateless MCP server (Streamable HTTP) with encode_graph_url (validates rows, returns links), decode_graph_url (decodes links for editing), and show_graph (renders the interactive grapher inside MCP Apps hosts). See MCP Apps integration and testing.

Usage

pnpm web        # dev server (grapher + worker API)
pnpm test       # vitest
pnpm typecheck  # lib + web + worker
pnpm web:build  # build to dist-web/ (client + worker)
pnpm deploy     # build and deploy to Cloudflare

Voice mode (credit keys)

A mic button talks to an OpenAI Realtime model (web/voice.ts) over WebRTC, and the model edits the graph with get_graph / set_graph tools, which report each row's readouts (values, intercepts, extrema in view). look_at_graph puts a screenshot of the canvas into the conversation as an image.

The page never holds an OpenAI credential. It opens a control WebSocket to the Worker (worker/voice-call.ts) and sends its WebRTC offer with a credit key. The Worker checks the key's balance in D1, creates the call with a fixed session, and attaches a sideband WebSocket to it before answering. The sideband charges every response's token usage to the key (worker/voice-credit.ts); the call is hung up when the balance runs out, after 30 minutes, if the page changes the session, or when the page's control socket closes. Audio flows between the browser and OpenAI directly.

wrangler secret put OPENAI_API_KEY     # locally: in .dev.vars
wrangler d1 migrations apply DB --remote   # locally: --local
node scripts/voice-key.ts create "Sam" 5   # a key with $5; prints it once
node scripts/voice-key.ts list             # balances and spend
node scripts/voice-key.ts grant <id> 10    # top up; disable/enable <id>

Each scripts/voice-key.ts command takes --remote for the deployed database. Visit any page once with #voice=<key> to show the mic in that browser (#voice= forgets it). ?voice=<key> works too, but a query string reaches the server, which may log it; the fragment never does.

Examples

Basics

• y = x^2 · x^2+y^2=4 · y = tan(x) — 2D curves
• y = sin(2πx) · θ = 1; r = θ x · y = x³ — unicode input: π and τ, Greek-letter names, superscript exponents, subscripts (T₀ ≡ T_0, so a₃ is a sequence term), and ·/×/÷/≤/≥/≠; in the editor, typing \pi, \theta, \nabla, … inserts the symbol, and \ before any function name just drops (\trail → trail)
• z = sin(x)cos(y) · x^2+y^2+z^2=9 — 3D surfaces (automatic when z appears)
• y < x/2 + 1 — inequalities shade their region; strict </> have no border, <=/>= draw the boundary line, and chains like 4 <= x^2 + y^2 <= 9 intersect with an edge per non-strict bound
• y = {x < 0: -x, x >= 0: x^2} — piecewise: cond: value cases tried in order, an optional last bare value is the default; conditions chain like {0 < x < 1: 1, 0}, and a bare condition counts 1 ({x > 0, 5})
• y = {0 < x < 2: x^2} — a domain restriction: with no default, the value is undefined outside the conditions, so nothing is drawn there
• sin(x)cos(y) — a bare expression in x, y is a 2D scalar field, shaded in the row color where positive and its complement where negative. sin(x) is a field too (constant along y): the curve is y = sin(x)
• 2+2, sqrt(a), |A - B| — a bare number draws nothing and reads out = 4 under the row, live with sliders and t; write y = 4 for the line

Sliders and animation

• a = 2 — a named constant with a slider; other equations can use a, and it compiles to a uniform so dragging never rebuilds a shader. b = a^2 + t defines a computed/animated constant
• (2, 3) / (3, 12, 0) — points. In 2D, coordinates that are plain numbers or slider names can be dragged on the canvas, and the drag rewrites them: a = 1; b = 2; (a, b) moves both sliders, (2sin(t), 3) only its literal height
• (2cos(t), 2sin(t)) — t is seconds since load, so this point orbits

Calculus

• f(x) = x^3 - a x — user-defined functions, inlined symbolically
• f(z) = {re(z) >= 1: 1, f(4 - 3(z^6)^(1/6))} then f(x i - |y|) >= 0 — a tail-recursive function (every self-call a whole case of its {…}) runs as a bounded loop per pixel; this one shades the Koch snowflake
• y = d/dx f(x) / d^2/dx^2 (x^4) — symbolic Leibniz derivatives; works for any single-letter variable, nests, and flows through function definitions: g(x) = d/dx f(x) then y = f(a) + g(a)(x - a) is a live tangent line

Probability

• X ~ Normal(0, a) — a random variable; the row plots its density, and parameters may use sliders. Then P(X < b), P(X > b), or P(-1 < X < 2) shades that area under the density and shows the numeric probability
• Also Uniform(lo, hi), Exponential(rate), Gamma(shape, rate), Beta(a, b), ChiSquared(df), StudentT(df) (or T(5)), LogNormal(mu, sigma), Cauchy(location, scale), Weibull(shape, scale) — exact densities, exact P(…), and median/IQR readouts where heavy tails leave no σ to report
• erf, normalpdf(x, mean, sd), and normalcdf(x, mean, sd) are also plain functions, so y = normalcdf(x, 0, 1) graphs the CDF

Vector fields and ODEs

• (-y, x) — a tuple depending on x, y is a vector field, rendered as animated streamlines via GPU line-integral convolution; t works too: (cos(t)-y, x)
• grad(x^2 + y^2) (or ∇(…)) — the symbolic gradient as a tuple, so it plots as a vector field and works in dot(grad(f), (1, 0))
• dy/dx = x y / y' = sin(x) - y — ODEs plot the slope/direction field (1, f); click the canvas to drop an RK4 integral curve through that point, double-click to clear
• (x', y') = (y, -sin(x)) — a system plots its phase portrait, with the same click-to-trace trajectories

Simulation (states)