The Photocyte
The story behind The Photocyte
Inspired by Photocyte on Wikipedia
Built with Canvas 2D
Techniques Additive-blend particle system · Physics-based scatter on disturbance · Ambient pulser organisms · Dual-frequency ocean current field · Interaction-gated narrative
Direction The chemistry of living light — luciferin oxidation, photon release, and the biological decisions encoded in every flash
Result A dark ocean surface that responds to your touch with bioluminescent flashes, each disturbance revealing another phrase from the deep
The Story
A photocyte is a cell that makes its own light. Inside it, an enzyme called luciferase catalyzes a reaction: luciferin meets oxygen, a bond rearranges, and a photon escapes. The chemistry is ancient — older than eyes, older than brains. Bioluminescence evolved independently at least fifty times across the tree of life, from single-celled dinoflagellates to deep-sea anglerfish to the fireflies blinking in your backyard.
In the deep ocean, where sunlight disappears below 200 meters, photocytes are everywhere. Eighty percent of creatures in the mesopelagic and bathypelagic zones produce their own light. They flash to attract mates, to lure prey, to startle predators, to communicate with their own kind. A single flash is a decision: attract, warn, confuse, disappear. The language is binary — light or dark — but the vocabulary is enormous.
What makes bioluminescence remarkable is not the light itself but the control. A photocyte does not glow continuously. It fires in response to a stimulus — a touch, a chemical signal, a pressure wave through the water. The cell decides when to spend its luciferin, because the reaction is irreversible. Each photon costs something. Every flash is a small, deliberate expenditure of chemical energy in service of survival.
The deep ocean is not dark. It is full of conversations happening in wavelengths between 460 and 490 nanometers — blue-green light, the color that travels farthest through seawater. Creatures that appear black or red under white light are invisible down there, absorbing the only wavelengths available. Everything else is speaking in flashes.
The Take
The screen is near-black — a dark gradient from #020810 to #04101a, the color of deep water below the photic zone. Scattered across it, 700 particles drift in barely perceptible motion, each one a photocyte at rest, glowing at 2-3% brightness. They are there but almost invisible, the way real bioluminescent organisms sit dark until stimulated.
Click the water. A disturbance radiates outward from your touch point — a pressure wave with a 160-pixel radius that expands and decays. Every particle inside the wavefront responds: brightness jumps toward its individual maximum (between 0.5 and 1.0), and the particle is pushed outward from the disturbance center. The scatter is physical — each particle receives a radial force proportional to the disturbance strength and inversely proportional to distance. Particles near the epicenter shoot outward. Particles at the edge barely flinch.
The brightened particles leave trails — up to eight positions recorded in a ring buffer, each fading at 92% per frame. The trails are drawn first, under the particle, giving each flash a comet-tail of residual light. The particle itself renders in three layers: an outer glow (large radius, low alpha), a core (medium, higher saturation), and for the brightest particles above 0.3, a hot center shifted toward white. All three layers are drawn with additive blending (globalCompositeOperation: 'lighter'), so overlapping particles intensify rather than occlude.
Between your clicks, eight larger organisms pulse independently — ambient pulsers on sine curves raised to the third power, producing sharp peaks separated by long dim periods. They drift on the same current field as the smaller particles but at their own pace, their glow halos reaching five times their core radius. They are the background heartbeat of the scene, proof that the ocean is alive even when you are not touching it.
Each click advances a counter. At 1 click, 3, 6, 10, and 15, a narrative phrase fades in at the bottom-left in EB Garamond at half-opacity cyan — the text is barely there, more watermark than headline. The phrases build: what a photocyte is, the chemistry behind it, the evolutionary purpose of each flash, the statistical prevalence, and finally a reframing of what you are watching. The text holds for seven seconds and fades. There is no way to trigger it except by disturbing the water.
The Tech
Particle Physics and Disturbance Model
Each of the 700 particles carries position, velocity, a base size (1–2.5px), current brightness, a per-particle maximum brightness, and a hue in the 170–200 range (cyan to green, matching real bioluminescent emission spectra). Velocity is updated each frame by three forces: the ocean current field, velocity damping (0.995 per frame), and any active disturbances.
Disturbances are stored as expanding wavefronts. On creation, a disturbance has zero radius and full strength. Each frame, the radius approaches its maximum via exponential easing (radius += (maxRadius - radius) * dt * 5) and the strength decays multiplicatively (strength *= 0.97). Any particle inside the current radius receives a radial push — the force vector points from the disturbance center to the particle, scaled by (1 - dist/radius) * strength. This produces a naturalistic scatter: particles near the center are thrown hard, particles at the edge shift gently, and the whole cloud recovers slowly through damping.
Additive Blending and Three-Layer Glow
Canvas 2D’s globalCompositeOperation: 'lighter' adds RGB values instead of alpha-compositing them. This means two dim particles overlapping produce a brighter spot, the way real bioluminescent light accumulates in water. Each particle is drawn as three concentric circles: an outer glow at baseSize * (2 + brightness * 8) radius with 15% alpha, a core at baseSize * (0.5 + brightness) with 80% alpha, and a hot center at baseSize * 0.4 that only appears above 0.3 brightness. The hue shifts 10 degrees cooler and the lightness jumps to 90% for the hot center, simulating the spectral broadening of intense luminescence.
Dual-Frequency Ocean Current
The current field is computed analytically at each particle’s position: cx = sin(y * 0.003 + t * 0.2) * 0.3 + sin(y * 0.007 + t * 0.1) * 0.15 and cy = cos(x * 0.004 + t * 0.15) * 0.09. The two sine terms at different spatial frequencies create gentle meandering — particles in different vertical bands drift at slightly different rates, producing visible shear lanes. The vertical component is much weaker than the horizontal, giving the overall field a lateral character like a slow ocean current.
Ambient Pulsers
The eight pulser organisms use Math.pow(Math.sin(t * speed + phase) * 0.5 + 0.5, 3) for their brightness curve. The cubic power concentrates the bright phase into a sharp peak — the pulser is dim for most of its cycle and fires briefly, mimicking the metabolically expensive nature of real bioluminescent pulses. Each pulser renders with the same three-layer glow as the small particles but at five times the radius, producing soft halos that overlap and blend through the additive compositing.
Mobile and Input
Pointer events handle both mouse and touch through a unified path. pointerdown triggers a single disturbance; pointermove with buttons pressed creates continuous disturbances (capped at 20 active to prevent performance degradation). A separate touchstart/touchmove path with preventDefault suppresses scroll on mobile. On viewports below 768px, particle count drops from 700 to 400, pulser count from 8 to 4, and the disturbance radius from 160px to 120px. The hint text swaps from “click to disturb the water” to “touch the dark water.”
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.