PrismSpectrum

Options

background #07080c

css colour

The room behind it. Dark, because everything drawn here is light being added to it: on a pale ground the beams have nothing to be brighter than.

apex 60

20 to 110 deg

Apex angle of the prism. 60 is the one in every textbook and the one that spreads the band usefully; a shallow prism barely splits the light, and past about 75 degrees most of the beam is lost to total internal reflection.

incidence 10

-40 to 40 deg

The angle the beam arrives at. Together with the sway this decides how near the pass is to minimum deviation, which is where the fan is tightest and brightest.

tilt -30

-90 to 90 deg

How the prism is set in the frame. This is the aim: it decides where the spectrum lands and how much of the canvas it crosses, and together with incidence it sets how near the pass is to minimum deviation.

index 1.52

1.3 to 2.2

Cauchy's A, which is roughly the refractive index in the middle of the visible band. 1.52 is crown glass, 1.46 fused silica, 2.42 diamond.

dispersion 0.012

0 to 0.05

Cauchy's B, in micrometres squared, and the dispersion itself. 0.0045 is about right for crown glass; flint glass is two or three times that, which is why it is what you cut a chandelier from. At 0 the glass still bends the beam and no longer splits it.

size 0.34

0.1 to 0.7

How large the prism is, as a share of the short side of the frame. Larger glass means a longer path inside it and a wider fan on the way out.

spread 0.012

0.002 to 0.05

Width of the beams. This is the one number here that is a drawing decision rather than an optical one: a real beam is as wide as its source, and this is how wide you want it to read.

brightness 1

0.1 to 3

Strength of the light. A soft shoulder keeps the crossings from clipping, so a high value goes white where the rays overlap the way a photograph does rather than flattening into a hard patch.

glass 0.8

0 to 2

How visible the prism itself is. Low on purpose: the light is the subject, and a prism drawn as a solid object in front of its own spectrum is a paperweight.

sway 0.22

0 to 1

How far the prism rocks, in radians, over one cycle. At 0 it is a still composition, which is a legitimate way to use this and the quietest thing in the library.

grain 0.3

0 to 1

The sensor noise of a long exposure. Static rather than crawling: film grain that moves is a different effect and a far noisier one.

period 48

12 to 120 s

Seconds for one full cycle, and the pace control. Long on purpose: a backdrop has to survive being ignored, and a spectrum sweeping across a page is about as distracting as a backdrop can be.

What it needs

Category

Backdrops, an effect

Dependencies

None at all

Browser

WEBGL2

Frame budget

~0.6 ms · 1 context

Pinned to

v0.12.0

• Built for a dark ground and declared as one. This is light on a ground rather than a pattern on a surface
• The fan is traced, not drawn: sixteen wavelengths, each refracted at the entry face, carried through the glass and refracted again on the way out, each cast as its own ray
• The index comes from Cauchy's equation, n = A + B over lambda squared, which is the two-term fit every glass catalogue starts with. Red bends least and violet most because the index rises towards the blue end, so the ordering is a consequence rather than a choice: reverse the dispersion constant and the spectrum reverses
• The fan is narrow on purpose. A real 60 degree prism in crown glass spreads the visible band by about a degree, which is why a prism throws a long thin spectrum rather than a wide one
• Total internal reflection is handled rather than papered over: where a wavelength cannot leave the second face, no ray is drawn for it, which is a real thing a prism does
• The tints are the CIE 1931 colour matching functions converted to linear sRGB and evaluated at build time. Several are outside the gamut and clamp, which is unavoidable: a monitor cannot show a spectral green, and desaturating the whole spectrum to make it fit would be worse
• The prism rocks rather than spins. A whole turn spends most of its time with the beam missing the glass or leaving by the face it came in through, and the pass through minimum deviation goes by in a moment
• One WebGL2 context, one full-screen triangle, no buffers and no attributes
• Two ray-triangle intersections for the beam itself, then sixteen refractions and sixteen distance-to-ray tests per pixel. No textures, no noise lookups, no render targets. Measured at 0.57ms for a 960 by 540 canvas, timed with a readPixels after each draw so the number includes the GPU, which makes this the most expensive backdrop in the library and still well inside a frame
• Which face the beam leaves by is worked out once with the middle of the band rather than per wavelength, because the rays inside the glass arrive within a pixel of each other