The Discharge
The story behind The Discharge
Inspired by Lichtenberg figure on Wikipedia
Built with Pure WebGL2 · Dielectric Breakdown Model · Jacobi Iteration · Distance Field Glow
Techniques Laplacian potential field solver · Stochastic DBM growth (eta=2.2) · Dual-texture rendering (NEAREST+LINEAR) · Exponential distance-field glow · Reinhard tone mapping
Direction The same fractal branching pattern appears everywhere in nature — lightning, rivers, blood vessels, neurons — because they all solve the same optimization problem
Result Click anywhere to trigger a discharge — a real-time DBM grows Lichtenberg figures from the click point, with text labels at branch tips revealing that one geometry hides in all domains of nature
The Story
In 1777, the German physicist Georg Christoph Lichtenberg pressed a pointed electrode against a resin plate, charged it with a Leyden jar, and dusted the surface with sulfur powder. The powder clung to the invisible paths where charge had branched and forked, revealing intricate tree-like figures — the first recorded images of electrical discharge. He had made the invisible visible: the geometry of breakdown itself, frozen in dust.
Modern Lichtenberg figures are made by trapping a beam of electrons inside a block of acrylic and then triggering the discharge with a grounded nail or conductive tap. The stored charge — sometimes a gigawatt released in 120 nanoseconds — carves permanent fractal trees through the material as molecular bonds snap in an avalanche cascade. The moment of destruction is the moment of inscription. The math governing the branching is the Dielectric Breakdown Model, a close relative of Diffusion-Limited Aggregation: solve Laplace’s equation for the potential field, then grow the structure toward the steepest gradient, weighted by a power law. The exponent determines the density of branching — too low and you get a blob, too high and you get a single tendril. At the right value, you get the signature forking tree.
What makes Lichtenberg figures extraordinary is not the physics of dielectrics. It is the universality. The same branching geometry appears in lightning bolts splitting the sky, river networks carving continents, blood vessels threading organs, tree roots mining soil, neurons wiring brains, fungal mycelia digesting forests, and cosmic filaments spanning the observable universe. These systems share no chemistry, no scale, no substrate. What they share is the optimization problem: distribute a resource (charge, water, blood, nutrients, information) from a source to a volume, minimizing cost and maximizing coverage. The solution is always the same fractal tree. Lichtenberg’s dust figures are not a curiosity of static electricity. They are a diagram of a universal law written in every domain of nature, from the subcellular to the cosmological.
The Take
The experience is a generative sandbox on a black field. Click anywhere and a single white point ignites at the cursor position — then erupts into branching fractal growth in real time. The Dielectric Breakdown Model runs live: each frame solves the potential field, selects candidate growth sites, and freezes new pixels into the structure. New branches glow white-hot at their tips, cooling through cyan and electric blue into a settled blue-white as the figure matures. Each discharge is unique — different seed point, different stochastic growth path, different final shape — because the randomness in the model ensures no two Lichtenberg figures are ever identical.
After the first figure completes its growth, text labels fade in at the branch tips. “Lightning.” “Rivers.” “Blood vessels.” “Neurons.” “Tree roots.” “Mycelia.” “Cosmic filaments.” Each label sits at an endpoint of the fractal — a terminus where the branching stopped — revealing the universal tree hiding in the discharge pattern. The figure you just watched grow is not just an electrical phenomenon. It is the shape of river deltas, the shape of your circulatory system, the shape of the large-scale structure of the universe. Click again and the previous figure fades as a new discharge grows from the new point, with fresh labels at its own unique branch tips. Leave the experience idle and figures auto-cycle, each one growing and labeling itself with an extended set of natural analogues. The concept is breakdown as creation — the moment something fractures is the moment it writes a universal pattern.
The Tech
Dielectric Breakdown Model
The simulation runs on a 256x256 CPU grid. Each cell is either frozen (part of the Lichtenberg figure) or unfrozen (available for growth). The potential field is governed by Laplace’s equation — the potential at each unfrozen cell is the average of its neighbors, with frozen cells clamped to 0 and the boundary clamped to 1. This is solved via Jacobi iteration: 12 relaxation passes per frame, each pass averaging the four cardinal neighbors. Growth candidates are unfrozen cells adjacent to the frozen structure. Each candidate’s growth probability is proportional to the local potential gradient raised to the power eta=2.2 — a stochastic selection that produces the characteristic Lichtenberg branching density. Higher eta concentrates growth at the sharpest gradient tips, producing sparser trees; lower eta produces denser, bushier growth. At 2.2, the balance produces convincing electrical discharge patterns with visible primary channels and fine secondary branching.
Dual-Texture Rendering
Two separate WebGL2 textures represent the figure. The branch texture uses NEAREST filtering and RGBA8 format — each frozen pixel is a crisp, unblurred point, preserving the exact pixel-grid structure of the simulation. The glow texture uses LINEAR filtering and the same RGBA8 format — its values are computed from an exponential distance-field falloff, and the bilinear interpolation produces smooth gradients between pixels. The fragment shader composites both: sharp branches on top, soft glow underneath. This avoids the usual tradeoff between crisp structure and smooth atmosphere — the branch skeleton is pixel-perfect while the electric corona bleeds smoothly into the surrounding dark.
HDR Cooling Gradient
When a pixel first freezes into the structure, it is assigned an emissive intensity of 12.0 — well above the 0-1 display range — in pure white. Over the growth period, the pixel cools through a gradient: white-hot to cyan (emissive 6.0) to electric blue (emissive 2.0) to a settled blue-white (emissive 0.8). The cooling is tied to the simulation’s growth progress, so early branches are fully cooled by the time the figure completes while the newest tips are still blazing. Reinhard tone mapping (c / (1 + c)) compresses the HDR values into display range, preserving both the blinding white of fresh growth tips and the deep blue of mature branches without crushing the dark background — ACES would have destroyed the subtlety in the dark regions.
Distance Field Glow
After each growth step, a two-pass chamfer distance transform runs on the CPU over the 256x256 grid, computing the Euclidean distance from every unfrozen pixel to the nearest frozen pixel. These distances are converted to glow intensities via exponential decay and uploaded as the glow texture. The fragment shader reads three glow layers from the distance field: a wide atmospheric glow (half-life approximately 7 pixels) for the overall electric haze, a medium halo (approximately 4 pixels) for the visible corona around each branch, and a tight bloom (approximately 2.5 pixels) for the intense edge light hugging the structure. The three layers are additively blended with the branch texture to produce the final composite.
Branch Tip Detection and Label Placement
Branch tips are identified by scanning the frozen grid for pixels with exactly one frozen neighbor — endpoints where the fractal stopped growing. These endpoints are sorted by Euclidean distance from the seed point, and labels are assigned with a minimum separation constraint to prevent overlap. Each label is positioned at its branch tip with a short leader line, fading in with a staggered delay after growth completes. The labels are drawn as HTML overlays positioned via CSS transforms mapped from grid coordinates to viewport coordinates, keeping text rendering crisp and independent of the WebGL canvas resolution.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.