Electromagnetic Radiation Visualization

Single-file project: index.html (all HTML, CSS, and JS inline).

What it is

An interactive visualization showing how electromagnetic radiation works — a magnet oscillating near a wire (antenna) emitting EM waves. The core insight: “it’s all just wiggling faster” — the same phenomenon at every frequency from 0 Hz to gamma rays.

Current state

Canvas visualization

• Vertical wire (antenna) at ~25% of canvas width, with a metallic gradient
• Electrons (blue dots) in the wire oscillating vertically in response to the changing magnetic field
  • Displacement ∝ sin(phase) — in phase with magnet position
  • Brightness pulses with |cos(phase)| — brightest at max current
  • Dim but visible at 0 Hz (stationary charges)
• Bar magnet (red N / blue S halves) oscillating horizontally, clearly separated from wire (~25px min gap)
  • Visual oscillation rate capped at ~8 Hz so it’s always perceivable
  • Motion blur trails at higher frequencies
• Concentric arc ripples (far-field radiation) expanding rightward from the wire
  • Opacity scaled by radiationEfficiency(freq) — invisible below ~100 Hz, full above ~1 MHz
  • Ring spacing log-mapped from frequency (wide at low, tight at gamma)
  • Spectral RGB colors in visible range, tinted greys outside
  • shadowBlur bloom only in visible range when ring count is manageable
• Source glow (near-field) on the wire pulsing in sync with the magnet — visible even at low frequencies where far-field radiation is negligible

Frequency range

• 0 Hz to 10^20 Hz: slider position 0 = 0 Hz (static), then logarithmic 10^0–10^20
• formatFreq: 0 Hz, Hz, kHz, MHz, GHz, THz, PHz, EHz
• formatWavelength: ∞ at 0 Hz, km, m, cm, mm, µm, nm, pm, fm
• formatEnergy: eV with SI prefixes (feV through MeV)

UI below canvas

• Frequency slider (0–1 mapped logarithmically, starts at 0)
• Spectrum bar (canvas) with rainbow visible band and colored non-visible bands
• Spectrum labels (Radio, Microwave, Infrared, Visible, UV, X-ray, Gamma)
• Landmarks: Power Grid, AM Radio, FM Radio, WiFi, CMB (special), Your Body (special), Sunlight, Medical X-ray — clickable, animate slider
• Frequency ranges (transparency windows): Sun emission, Passes through air, Passes through water — stacked bars showing convergence on visible light, with annotation that brightens near visible
• Info readouts: frequency, wavelength, spectrum band, photon energy (color-coded by danger: grey < 3.1 eV, amber UV, red ionizing)
• Dynamic narrative text — radio band has 3 sub-narratives matching radiation efficiency; 0 Hz has its own

Key functions

• wavelengthToRGB(nm) — spectral color from wavelength
• freqToColor(f) — returns RGB array for visible frequencies, null otherwise
• getRingColor(freq, bandName) — ring color: spectral in visible, tinted grey outside
• radiationEfficiency(freq) — smoothstep 0→1 from 100 Hz to 1 MHz; scales far-field wave opacity
• freqToVisualSpacing(freq) — log-mapped ring spacing
• freqToVisualRate(freq) — visual oscillation rate (capped ~8 Hz)
• getNarrative(freq, band) — frequency-aware narrative text (radio has 3 tiers)
• formatEnergy(freq) / getEnergyColor(freq) — photon energy E=hf in eV, color-coded by ionization threshold