index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Relativity Park: Walking Speed of Light</title>
<meta name="description" content="Special relativity simulator in which light crawls along at a human speed, so Lorentz contraction, aberration and Doppler shift happen at walking pace.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500&family=Saira+Condensed:wght@500;600;700&display=swap">
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<canvas id="view"></canvas>
<div id="scrim" aria-hidden="true"></div>

<header class="hud" id="masthead">
  <h1>Relativity Park</h1>
  <p>Special relativity with <b id="v-c">c = 5 km/h</b></p>
</header>

<nav class="hud" id="tools">
  <button type="button" id="open-help">Field guide (Help) <kbd>H</kbd></button>
  <button type="button" id="open-panel">Settings <kbd>Tab</kbd></button>
</nav>

<div class="hud" id="instruments">
  <section class="panel" id="kinematics" aria-label="Motion readout">
    <p class="eyebrow">Your velocity</p>
    <div class="big"><span id="v-speed">0.00</span><span>km/h</span></div>
    <dl class="rows">
      <div class="row"><dt>&beta;: &nbsp;v / c</dt><dd id="v-beta">0.0000</dd></div>
      <div class="row"><dt>&gamma;: &nbsp;Lorentz factor</dt><dd id="v-gamma">1.000</dd></div>
      <div class="row"><dt>Lengths ahead</dt><dd id="v-contract">&times; 1.0000</dd></div>
    </dl>
    <div id="rapidity" aria-hidden="true"><i id="v-rapid"></i></div>
  </section>

  <div class="panel" id="gauge" aria-hidden="true">
    <div id="spectrum-wrap">
      <div id="spectrum"></div>
      <div id="rest-tick"></div>
      <div id="marker"></div>
    </div>
    <p class="caption">
      <span>Doppler at crosshair</span>
      <b id="v-dop">1.000</b>
      <span id="v-dopword">at rest</span>
    </p>
  </div>
</div>

<section class="hud panel" id="clocks" aria-label="Clocks">
  <p class="eyebrow">Elapsed</p>
  <dl>
    <div class="clock"><dt class="eyebrow">Your watch</dt><dd id="v-tau">0:00.0</dd></div>
    <div class="clock is-world"><dt class="eyebrow">World clock</dt><dd id="v-tworld">0:00.0</dd></div>
  </dl>
  <footer>World clocks tick <b id="v-rate">&times; 1.000</b> faster than yours.</footer>
</section>

<div class="hud" id="reticle" aria-hidden="true">
  <div class="cross"></div>
</div>

<div class="hud" id="galilean">Galilean view (aberration off)</div>
<div class="hud" id="paused">Paused</div>

<p class="hud" id="hint">
  <span class="hint-row">
    <span><em>Arrows / W A S D:</em> accelerate</span>
    <span><em>Mouse:</em> look</span>
    <span><em>Space:</em> stop</span>
  </span>
  <span class="hint-row">
    <span><em>L G C B:</em> toggle effects</span>
    <span><em>R:</em> reset</span>
    <span><em>P:</em> pause</span>
  </span>
</p>

<div id="overlay">
  <div class="card">
    <h2 id="overlay-title">Light is slow here</h2>
    <p id="overlay-body">
      In this park, the speed of light is 5 kilometers per hour &mdash; a brisk walk.
      Just like in the real world, the speed of light is not attainable, only approachable asymptotically.
      The more you speed up, the more relativistic effects will become apparent:
      length contraction, time dilation, Terrell rotation, etc. The Doppler effect of light
      also becomes apparent, with objects in front of you blueshifted, objects behind you
      redshifted, and transverse Doppler effects visible on objects in motion.
    </p>
    <p class="cue">Click to look around</p>
  </div>
</div>

<aside id="panel" class="is-open" aria-label="Settings">
  <div class="drawer-head">
    <h2>Settings</h2>
    <button type="button" id="panel-close" aria-label="Close settings">&times;</button>
  </div>

  <fieldset>
    <legend class="eyebrow">Effects</legend>
    <label class="check">
      <input type="checkbox" id="fx-delay" checked>
      <span>Light-travel delay <kbd>L</kbd>
        <small>You see each object where and when its light left it.</small></span>
    </label>
    <label class="check">
      <input type="checkbox" id="fx-aberr" checked>
      <span>Aberration &amp; contraction <kbd>G</kbd>
        <small>The Lorentz boost of apparent position.</small></span>
    </label>
    <label class="check">
      <input type="checkbox" id="fx-doppler" checked>
      <span>Doppler color <kbd>C</kbd>
        <small>Spectra blueshifted and redshifted according to motion.</small></span>
    </label>
    <label class="check">
      <input type="checkbox" id="fx-beam" checked>
      <span>Relativistic beaming <kbd>B</kbd>
        <small>Light piles up ahead of you and thins out behind.</small></span>
    </label>
  </fieldset>

  <fieldset>
    <legend class="eyebrow">World</legend>
    <div class="slider">
      <div class="top"><label for="opt-c">Speed of light</label><output id="opt-c-out">5.0 km/h</output></div>
      <input type="range" id="opt-c" min="1" max="40" step="0.5" value="5">
    </div>
    <label class="check">
      <input type="checkbox" id="opt-eye" checked>
      <span>Eye adaptation
        <small>Your retina adjusts to the average brightness ahead.</small></span>
    </label>
  </fieldset>

  <details id="debug">
    <summary>Debug</summary>
    <div class="debug-body">
      <div class="slider">
        <div class="top"><label for="opt-beam">Beaming exponent</label><output id="opt-beam-out">D^4.0</output></div>
        <input type="range" id="opt-beam" min="0" max="4" step="0.1" value="4">
      </div>
      <div class="slider">
        <div class="top"><label for="opt-exposure">Exposure</label><output id="opt-exposure-out">1.00</output></div>
        <input type="range" id="opt-exposure" min="0.2" max="2.5" step="0.05" value="1">
      </div>
      <div class="slider">
        <div class="top"><label for="opt-res">Render scale</label><output id="opt-res-out">100%</output></div>
        <input type="range" id="opt-res" min="0.4" max="1" step="0.05" value="1">
      </div>
      <div class="slider">
        <div class="top"><label for="opt-ground">Ground detail</label><output id="opt-ground-out">High</output></div>
        <input type="range" id="opt-ground" min="0" max="4" step="1" value="2">
        <small id="opt-ground-now"></small>
      </div>
      <label class="check">
        <input type="checkbox" id="opt-ground-adapt" checked>
        <span>Adapt to speed
          <small>Retessellate the ground with finer detail as the observer approaches c.</small></span>
      </label>
      <footer><span><span id="v-fps">&mdash;</span> fps</span><span><span id="v-verts">&mdash;</span> vertices</span></footer>
    </div>
  </details>

  <p id="credit">By <a href="https://dmitrybrant.com" target="_blank" rel="noopener">Dmitry Brant</a>, 2026
    <br /><a href="https://github.com/dbrant/relativity" target="_blank" rel="noopener">source code</a></p>
</aside>

<aside id="help" aria-label="Field guide">
  <div class="drawer-head">
    <h2>Field guide</h2>
    <button type="button" id="help-close" aria-label="Close field guide">&times;</button>
  </div>

  <p>
    All of the motion effects you see are physically accurate, in a world where the speed of light
    is greatly reduced, so it can be observed more easily on human scales.
  </p>

  <h3>Controls</h3>
  <div class="keys">
    <div class="keyrow"><kbd>W A S D</kbd><span>accelerate</span></div>
    <div class="keyrow"><kbd>&uarr; &darr; &larr; &rarr;</kbd><span>accelerate</span></div>
    <div class="keyrow"><kbd>Mouse</kbd><span>look around</span></div>
    <div class="keyrow"><kbd>Space</kbd><span>stop</span></div>
    <div class="keyrow"><kbd>Q</kbd> <span>drop / <kbd>E</kbd> rise</span></div>
    <div class="keyrow"><kbd>R</kbd><span>return to start</span></div>
    <div class="keyrow"><kbd>P</kbd><span>pause the world</span></div>
    <div class="keyrow"><kbd>Tab</kbd><span>settings</span></div>
    <div class="keyrow"><kbd>Esc</kbd><span>release mouse</span></div>
  </div>

  <h3>Effects</h3>
  <p>
    Play around with what effect causes which phenomenon to be observed.
  </p>
  <div class="keys">
    <div class="keyrow"><kbd>L</kbd><span>light-travel delay</span></div>
    <div class="keyrow"><kbd>G</kbd><span>aberration &amp; contraction</span></div>
    <div class="keyrow"><kbd>C</kbd><span>Doppler color</span></div>
    <div class="keyrow"><kbd>B</kbd><span>relativistic beaming</span></div>
  </div>

  <h3>Things to try</h3>
  <ul>
    <li>
      Accelerate by pressing the Up arrow. Your field of view begins to condense
      in the direction you are traveling, and becomes blueshifted. If you look
      behind you by using your mouse to turn, that field of view is redshifted
      and stretched out. This is <b>relativistic aberration</b>. Also observe the timers
	    labeled "Your watch" and "World clock", and see <b>time dilation</b> in effect.
      Press Space to stop any motion, and observe how the field of view returns to normal.
    </li>
    <li>
      The <b>lamp posts</b> all flash once per second of world time. Move toward a lamp
      and the flashing speeds up and blueshifts; move away and it slows down and redshifts.
      This is the effect of both time dilation and <b>relativistic Doppler shift</b>.
    </li>
    <li>
      The <b>Ferris wheel</b> and <b>carousel</b> cars move at 75% of the speed of light.
      They are contracted by their own motion, and you see each one at a different moment in its trip
      around the circle. As the cars move around, you can see the effects of relativistic
      contraction and <b>Terrell rotation</b>.
    </li>
    <li>
      The <b>shuttle</b> near the end of the corridor runs back and forth, also attaining a speed
      of 75% of the speed of light. Notice how it also contracts and undergoes Terrell rotation as it moves.
    </li>
  </ul>

  <h3>What's NOT accurate</h3>
  <ul>
    <li>
      Obviously a Ferris wheel spinning at relativistic speeds would fly apart, and if you travel through
      the atmosphere at relativistic speeds, you would be vaporized instantly. Even if you travel near
      the speed of light in interstellar space, stray hydrogen atoms would hit you with enormous energy,
      causing intense ionizing radiation.
    </li>
    <li>
      The rendering of blueshifts and redshifts is a rough approximation.
      At extreme redshifts, the color fades to black. And at extreme blueshifts (past violet),
      the color turns to a metallic silver to represent x-rays, then to bright white
      to represent gamma rays (totally unphysical, but just to get a sense of it).
    </li>
  </ul>
</aside>

<script src="js/glutil.js"></script>
<script src="js/color.js"></script>
<script src="js/geometry.js"></script>
<script src="js/stl.js"></script>
<script src="js/shaders.js"></script>
<script src="js/scene.js"></script>
<script src="js/app.js"></script>
</body>
</html>