Graphics / WebGL2026
The Beauty and Math
A parametric heart, drawn from 2,500 particles of whatever you type
- Three.js r128
- WebGL
- JavaScript
- Parametric geometry
- Canvas textures
A closed-form heart curve turned into a 3D particle cloud in Three.js, where every particle is a glyph of the message you type. Drag to spin it, scroll to zoom, and the whole cloud breathes on a slow sine. It is the one project here whose correctness criterion is whether it looks right.
- 01
The curve, in closed form
x = 16 sin³t, y = 13 cos t − 5 cos 2t − 2 cos 3t − cos 4t. Sweeping t around the full turn traces the outline exactly; there is no mesh and no modelling — the shape falls out of the equation.
- 02
From 2D curve to 3D volume
A second parameter φ lifts the flat curve into a solid: z = 8 sin φ (1 − 0.3r), where r is the normalised radius. Points near the outer edge get pushed less, which is what rounds the lobes instead of extruding a flat cutout.
- 03
Text as the particle
Each character of the message is rasterised to its own texture and used as a point material, so the cloud is literally built out of the words rather than out of dots. Roughly 2,500 particles fill the volume.
- 04
Motion that isn't distracting
Particle sizes pulse on a slow sine so the cloud breathes, drag carries inertial momentum rather than snapping, and fog plus lighting give the depth cues a flat point cloud otherwise loses.
- 05
Easter eggs
The palette shifts for certain inputs, and typing LUCY sets off five seconds of fireworks.
