special relativity: calculator

index.html

<article>
  <div>Lorentz Factor
    <br>γ = <input id='gamma' type="number" value='2.2942' min="1" step="0.1">
  </div>
  <br>
  <div>Relative Velocity
    <br>v = <input id='velocity' type="number" value='0.9' min="0" max="1" step="0.01"> c
    <br>v = <input id='velocity2' type="number" value='2.7' min="0" max="3" step="0.1"> x 10<sup>8</sup> m/s
  </div>
  <br>


  <!--   <div id='gamma'></div> -->
  <br><strong>AT REST</strong> relative to observer
  <br>time = <input id='time' type="number" value='10'> s
  <br>mass = <input id='mass' type="number" value='10'> kg
  <br>distance = <input id='distance' type="number" value='10'> m
  <div class='thing' id='length1'> </div>
  <br>

  <div><strong>MOVING</strong> relative to observer
    <br>
    <div id='v_time'></div>
    <div id='v_mass'></div>
    <div id='v_distance'></div>
    <div class='thing' id='length2'> </div>
  </div>
</article>
<br>

<div id="graph"></div>

script.js

function update() {
  const v = document.getElementById("velocity").value;
  const time = document.getElementById("time").value;
  const dist = document.getElementById("distance").value;
  const mass = document.getElementById("mass").value;
  const gamma = 1 / Math.sqrt(1 - v * v);
  const vTime = time / gamma;
  const vDist = dist / gamma;
  const vMass = mass * gamma;
  document.getElementById("velocity2").value = v * 3;
  document.getElementById("gamma").value = Math.round(gamma*1000000000000) / 1000000000000;
  document.getElementById("v_time").innerHTML = "time = " + vTime.toFixed(4) + " s";
  document.getElementById("v_distance").innerHTML = "distance = " + vDist.toFixed(4) + " m";
  document.getElementById("v_mass").innerHTML = "mass = " + vMass.toFixed(4) + " kg";
  document.getElementById("length1").style.width = dist * 10 + "px";
  document.getElementById("length2").style.width = vDist * 10 + "px";
}

function convertVelocity() {
  const v = document.getElementById("velocity2").value / 3;
  document.getElementById("velocity").value = v;
  update();
}
function convertGamma() {
  const g = document.getElementById("gamma").value;
  document.getElementById("velocity").value = Math.sqrt(1-(1/g)*(1/g));
  update();
}
update();

document.getElementById("velocity").addEventListener("change", update);
document.getElementById("velocity2").addEventListener("change", convertVelocity);
document.getElementById("gamma").addEventListener("change", convertGamma);
document.getElementById("time").addEventListener("change", update);
document.getElementById("distance").addEventListener("change", update);
document.getElementById("mass").addEventListener("change", update);

functionPlot({
  // width: 600,
  // height: 600,
  target: "#graph",
  // title: 'v vs. gamma',
  yAxis: {
    domain: [0, 10],
    label: " gamma"
  },
  yDomain: [2, 4],
  xAxis: {
    domain: [0, 1.1],
    label: " v/c "
  },
  grid: true,
  data: [
    {
      fn: "nthRoot(1 - x^2, 2)^-1",
      color: "#000"
    }
  ]
});

scripts

<script src="https://wzrd.in/standalone/function-plot"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

special-relativity-calculator.markdown

special relativity: calculator

A Pen by Landgreen on CodePen.

License.

style.css

body {
  font-family: "Helvetica", "Arial", sans-serif;
  /*   text-align: center; */
  /*   font-size: 200%; */
  /*     color: #fff; */
  /*     background-color: #eee; */
  line-height: 1.7em;
  padding: 0.1em;
  /*   background-image: url("http://lilgreenland.github.io/images/space.jpg"); */
  /*   background-repeat: repeat; */
}

article {
  margin: 0 auto;
  max-width: 300px;
}

input {
  font-size: 130%;
  width: 100px;
  background: #eee;
  /*   color: #fff; */
  border: 0px;
}

input:focus {
  outline: 0;
}

.thing {
  width: 100px;
  height: 15px;
  background: #000;
  transition: width 1s ease-out;
}

#graph {
  margin: 0 auto;
  width: 550px;
  /*   background-color: white; */
}