Click once. Understand forever.
50 interactive simulations that make math click — no math degree required.
50 interactive HTML simulations (41 experiments + 9 simulators) for learning Constraint Theory, geometry, physics, and math. Built for students, teachers, and the perpetually curious.
┌─────────────────────────────────────────────────────────────┐
│ │
│ 📖 Reading docs: "The manifold consists of..." │
│ (2 minutes later) "Wait, what?" │
│ │
│ 🖱️ Interactive demo: Click canvas → See snap → Got it! │
│ (5 seconds to understanding) │
│ │
└─────────────────────────────────────────────────────────────┘
⚡ Zero setup. Zero build. Zero friction.
| I want to... | Click here |
|---|---|
| See geometry snap | Pythagorean Demo → |
| Watch algorithms work | KD-Tree Demo → |
| Play with physics | Swarm Demo → |
| Browse all 50 | Full Gallery → |
💻 Prefer local? Clone it (optional)
git clone https://github.com/SuperInstance/constraint-theory-web.git
cd constraint-theory-web
open simulators/pythagorean/index.html # That's it. No npm install.Reading about Pythagorean snapping:
"The manifold consists of integer-ratio points on S¹ indexed by KD-tree with O(log n) lookup..."
...interesting, but what does it actually look like?
Opening our demo:
Click anywhere on the canvas. Watch your cursor snap to the nearest exact coordinate. See the noise. Understand instantly.
| Demo | What You'll Learn | Seconds to Try |
|---|---|---|
| Pythagorean Snapping | Click to snap — see noise in real-time | ▶ Play |
| KD-Tree Visualization | Watch O(log n) in action | ▶ Play |
| Swarm Behavior | Boids with deterministic physics | ▶ Play |
| Demo | What You'll See | Quick Link |
|---|---|---|
| Mandelbrot Set | Fractal zoom with color cycling | ▶ |
| Fourier Series | Circles drawing waves | ▶ |
| Geometric Algebra | Clifford algebra made visual | ▶ |
| Holonomy Transport | Parallel transport on manifolds | ▶ |
| Quaternion | 4D rotations projected | ▶ |
| Complex Plane | Möbius transforms | ▶ |
| Cellular Automata | Conway's Life & more | ▶ |
| Demo | What You'll Experience |
|---|---|
| N-Body | Gravitational chaos — watch planets orbit |
| Fluid Dynamics | Navier-Stokes in your browser |
| Soft Body | XPBD constraint solver — squishy physics |
| Wave Interference | Constructive & destructive patterns |
| Voxel XPBD | 3D physics engine |
| Demo | What You'll Explore |
|---|---|
| Neural Network | Forward pass visualization |
| Tree of Thoughts | AI reasoning visualization |
| Constraint Network | Agent coordination |
Want to build your own? Here's a minimal starting point:
📝 Show me the code
<!DOCTYPE html>
<html>
<head>
<title>My First Constraint Demo</title>
<style>
canvas { border: 1px solid #333; cursor: crosshair; }
#info { font-family: monospace; margin-top: 10px; }
</style>
</head>
<body>
<canvas id="demo" width="400" height="400"></canvas>
<div id="info">Click anywhere to snap to nearest Pythagorean triple</div>
<script>
const canvas = document.getElementById('demo');
const ctx = canvas.getContext('2d');
const info = document.getElementById('info');
const triples = [
[3/5, 4/5], [4/5, 3/5], [5/13, 12/13], [8/17, 15/17], [7/25, 24/25]
];
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = (e.clientX - rect.left) / 200 - 1;
const y = (e.clientY - rect.top) / 200 - 1;
let best = triples[0], minDist = Infinity;
for (const [tx, ty] of triples) {
const dist = Math.hypot(x - tx, y - ty);
if (dist < minDist) { minDist = dist; best = [tx, ty]; }
}
ctx.clearRect(0, 0, 400, 400);
ctx.beginPath();
ctx.arc(200 + x * 200, 200 + y * 200, 5, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.beginPath();
ctx.arc(200 + best[0] * 200, 200 + best[1] * 200, 8, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();
info.textContent = `Snapped to (${best[0].toFixed(4)}, ${best[1].toFixed(4)}) - noise: ${minDist.toFixed(4)}`;
});
</script>
</body>
</html>Copy-paste into a .html file, open in browser, and click!
→ See contributing guide for more
┌─────────────────────────────────┐
│ Want to SEE math, not read it?│
└─────────────┬───────────────────┘
│
┌────────────────────────┼────────────────────────┐
│ │ │
┌────▼────┐ ┌────▼────┐ ┌────▼────┐
│ TEACHER │ │ STUDENT │ │ DEV │
└────┬────┘ └────┬────┘ └────┬────┘
│ │ │
▼ ▼ ▼
┌─────────┐ ┌──────────┐ ┌──────────┐
│ ✓ Use │ │ ✓ Learn │ │ ✓ Debug │
│ in class│ │ by doing │ │ your code│
└─────────┘ └──────────┘ └──────────┘
If any of these sound like you, you're in the right place.
Kinesthetic learning beats lecture. Students remember what they discover.
// In class: Open Pythagorean demo
// Students click around the unit circle
// They see which points snap to exact values
// Patterns emerge: (3,4,5), (5,12,13), (8,15,17)...
// No lecture needed — they get it.Struggling with a concept? Stop reading. Start clicking.
- Fourier Series → Watch circles draw waves
- Mandelbrot → Zoom into infinity
- Swarm → See emergence in action
Visual debugging catches what unit tests miss.
- KD-Tree → Watch queries traverse partitions
- N-Body → Validate your physics engine
- Constraint Network → Debug agent coordination
- Zero dependencies — Vanilla JavaScript
- Canvas 2D / WebGL — Hardware-accelerated rendering
- Responsive — Desktop and mobile friendly
- Self-contained — Single HTML file per demo
- Accessible — ARIA attributes, keyboard navigation, screen reader support
| Browser | Version | Status |
|---|---|---|
| Chrome | 90+ | ✅ Full support |
| Firefox | 88+ | ✅ Full support |
| Safari | 14+ | ✅ Full support |
| Edge | 90+ | ✅ Full support |
| Mobile Safari | 14+ | ✅ Touch optimized |
| Chrome Mobile | 90+ | ✅ Touch optimized |
| Repo | What It Does | Key Features |
|---|---|---|
| constraint-theory-core | 🦀 Rust crate | ~100ns snap, SIMD batch, 82 tests |
| constraint-theory-python | 🐍 Python bindings | NumPy integration, PyTorch compatible |
| constraint-theory-web | 🌐 This repo | 50 visualizations, zero setup |
| constraint-theory-research | 📚 Mathematical foundations | arXiv paper, proofs, open problems |
| constraint-ranch | 🎮 Gamified learning | Puzzle games, agent breeding |
| constraint-flow | 💼 Business automation | Exact financial calculations, workflow orchestration |
| constraint-theory-agent | 🤖 Implementation agent | Code audit, refactoring, expert explanations |
Use Constraint Theory in the browser with WebAssembly:
// Install from npm (when published)
// npm install constraint-theory-wasm
// Or build from source
git clone https://github.com/SuperInstance/constraint-theory-core
cd constraint-theory-core
wasm-pack build --target web --out-dir ../constraint-theory-web/wasm
// Use in JavaScript
import init, { PythagoreanManifold } from './wasm/constraint_theory_core.js';
await init();
const manifold = new PythagoreanManifold(200);
const [exact, noise] = manifold.snap([0.577, 0.816]);
// exact = [0.6, 0.8] — forever exact!Cite our work in your papers:
@article{constraint_theory_2025,
title={Constraint Theory: Deterministic Manifold Snapping via Pythagorean Geometry},
author={SuperInstance},
journal={arXiv preprint arXiv:2503.15847},
year={2025},
url={https://github.com/SuperInstance/constraint-theory-research}
}Key papers:
- Mathematical Foundations — 45-page deep dive
- Theoretical Guarantees — Zero-hallucination proofs
- arXiv:2503.15847 — Publication-ready PDF
For journalists, influencers, and community outreach:
- HN Title Options — Tested variations
- HN FAQ — Prepared responses
- HN Comment — Draft first comment
npm install -g wrangler
wrangler pages deploy . --project-name constraint-theory-webGood First Issues · CONTRIBUTING.md
We welcome:
- 🎨 New demos — Add your visualization
- 🌐 Translations — Make it global
- 📱 Mobile improvements — Touch support, responsive design
MIT — see LICENSE.