Spectroscope

The honest way to put colour on a site with no brand colour: as a lamp's light, split. A hero or a reveal for an optics, imaging, photonics or materials company; a teaching piece for a lab or an education product; a wavelength input (the telescope is a real slider from 380 to 720 nm, spoken as "589.3 nanometres, sodium D"); and, with five lamps as a radio group, a selector people want to play with.

Copy the spectroscope folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="spectroscope/spectroscope.css">
<div id="spectroscope" style="width: min(94vw, 960px)"></div>

<script type="module">
  import Spectroscope from './spectroscope/spectroscope.mjs';

  const spectroscope = new Spectroscope(document.getElementById('spectroscope'), {
    lamp: 'Na',
    prism: 25.4,
    hairline: 50.81,
  });

  // spectroscope.update({ … });   change any option in place
  // spectroscope.destroy();        and take it away again
</script>

new Spectroscope(element, options)

Builds it inside the element with these options.

wavelength

reading

update(opts = {})

Change options in place.

setLamp(lamp, { user = false } = {})

setPrism(deg)

setHairline(deg)

destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: change, input.

1. At restA sodium lamp on, the prism at sodium's minimum deviation, the telescope on the D line reading 589.3 nm; nothing runs.
2. Turning the tableDrag the turntable or use its keys: the traced spectrum slides along the scale, slows, stops at minimum deviation and turns back; outside roughly 10° to 29° the light is reflected inside the prism and leaves through the base, every colour together, and the telescope sees nothing.
3. Pointing the telescopeDrag its knob along the scale: the porthole pans across the spectrum at ×12 and the display reads the wavelength at the hairline, naming a line when it sits on one.
4. Choosing a lampFive keys, a radio group: tungsten is a smooth continuum; sodium, hydrogen, mercury and neon show their own lines at their own wavelengths. Sodium strikes pink on its neon and warms to yellow.
5. KeyboardTable ±0.5°, telescope ±0.1° (Shift and Page keys ×10), Home and End; arrows move between lamps; change fires on each key.
6. Read-onlyA display: set from code only; aria-readonly says so.
7. AluminiumA bead-blasted aluminium frame, light keys, a reflective LCD reading; the breadboard stays black anodised.
8. GraphiteA soft-touch graphite frame, dark keys, a glowing VFD reading.
9. PhoneThe bench scales as one object; the grips keep their touch targets and turning a grip never scrolls the page.
10. Off screen or hiddenIt draws nothing; a lamp warming up finishes when it is back.
11. Reduced motionLamps light at once; every reading is the same.

Made of: Per wavelength ray trace, Cauchy dispersion, Total internal reflection, Minimum deviation, Planck continuum, Emission line lamps, Inverse wavelength reading, Additive light, Room fixed sheen, Sleeping loop, Fit to host.

Original. The optics are pure functions in optics.mjs, tested in Node against the textbook minimum-deviation formula. The dispersion is a dense flint's, a little stronger than SF11's, so the visible band spans about fifteen degrees of the scale.