Site Lab
How far can two nearly identical starting states diverge? What patterns can local rules produce? These nine experiments run interactively in your browser, each with its own canvas and model explanation. Choose a phenomenon, change a condition, and observe the result before reading the calculation behind it. This section also documents the site’s architecture and rendering techniques.
Experiments
What changes a trajectory?
- Double pendulum (Open experiment): Run two pendulums from nearly identical states, then pause to compare their endpoint trails. Do they separate immediately?
- Rössler attractor (Open experiment): Change the parameter and rotate the view to see how the numerically integrated three-dimensional chaotic trajectory folds back.
- Gravity orbits (Open experiment): Change initial speed to compare circles, ellipses, and speed along the orbit; then change only inclination to inspect the orbital plane.
- Flow field (Open experiment): Drag the vortex source and compare nearby and distant particle paths to see how a velocity field guides motion.
Where brightness and color come from
- Wave interference (Open experiment): Add sources and pause to inspect the bands. Where do phases reinforce or cancel one another?
- Prism dispersion (Open experiment): Rotate the prism and trace refraction at different wavelengths, including when total internal reflection occurs.
- ASCII Earth (Open experiment): Turn the globe and inspect how characters form land and ocean; the explanation shows how sphere shading becomes a character grid.
How local changes produce patterns
- Game of Life (Open experiment): Draw cells and step through still lifes, oscillators, and gliders to distinguish patterns that stay, repeat, or move.
- Reaction–diffusion (Open experiment): Seed concentration disturbances and watch spots and bands form; switch parameters to compare shapes.
How the experiments are built
All rendering runs locally in the reader’s browser, without hosted renderers or external simulation backends. Each renderer allocates and disposes its own geometry, materials, controls, observers, animation frames, and WebGL contexts. Dimensions follow the container; homepage previews retain direct manipulation and playback controls, while full parameter panels live on dedicated pages.
Drawing pauses offscreen or in a hidden tab. Animated experiments honor reduced-motion preferences and can be played manually. Older 3D scenes target about 30 FPS; the new models use fixed simulation steps with browser-driven drawing. Explanation pages present source code and numerical formulations directly; standard Markdown code blocks allow full reading, scrolling, and syntax highlighting without flip cards or artificial clipping.
Three.js experiments
ASCII Earth, the Rössler attractor, and gravity orbits use Three.js for their three-dimensional scenes. Their explanations cover character conversion, chaotic trajectory integration, and central-gravity motion respectively.
Canvas 2D experiments
The double pendulum, wave interference, Game of Life, and reaction–diffusion use Canvas 2D. The drawing interface is shared, but the calculations differ: pendulum states are integrated over time, the wave field is evaluated directly by position and time, and the other two models update grids step by step.
p5.js experiments
Prism dispersion and the flow field use p5.js. Their explanations cover ray tracing with batched WebGL drawing, and velocity fields with offscreen buffers, respectively.
To learn another browser GPU API, start with the standalone compute and rendering examples in the WebGPU guide. It offers a basis for future experiments; the existing WebGL and Canvas 2D implementations described here have not been converted to WebGPU.
Diagram Style
Mermaid renders locally with its classic look and the site’s warm instrument palette. The default favors legibility; handDrawn can be selected for an informal diagram, while ELK should be added only when a complex graph defeats the default layout. This simple diagram shows a reading relationship:
Further reading
This section focuses on the site’s infrastructure and graphical displays. For development environments and everyday tools, see Tools & Workflows; for reusable computer science concepts, including graphics and algorithms, see Computer Science. Return to the Knowledge Map to browse the whole collection.