Migration for Flutter's underdamped spring formula change

by Tong Mu

HTML

<table>
<tr>
<th>Default constructor:</th>
<th>withDampingRatio constructor:</th>
</tr>

<tr>
<td>
Mass: <input id="mass1" placeholder="mass"><br>
Stiffness: <input id="stiffness1" placeholder="stiffness"><br>
Damping: <input id="damping1" placeholder="damping"><br>
<button onclick="calculate1()">Calculate</button><br>
<textarea id="result1" readonly></textarea>

</td>

<td>
Mass: <input id="mass2" placeholder="mass"><br>
Stiffness: <input id="stiffness2" placeholder="stiffness"><br>
Ratio: <input id="ratio2" placeholder="ratio"><br>
<button onclick="calculate2()">Calculate</button><br>
<textarea id="result2" readonly></textarea>

</td>
</tr>
</table>

CSS

textarea {
  height: 100px;
  width: 90%;
}

table {
  width: 100vw;
}

th {
  text-align: left;
}

JavaScript

function calculate(m, k, c) {
  const new_mass = 1;
  const new_stiffness = (4 * (k / m) - (c / m) * (c / m) + (c * m) * (c * m)) * new_mass / 4;
  const new_damping = c * m;
  return [new_mass, new_stiffness, new_damping];
}

function calculate1() {
  const m = parseFloat(document.getElementById('mass1').value) || 0;
  const k = parseFloat(document.getElementById('stiffness1').value) || 0;
  const c = parseFloat(document.getElementById('damping1').value) || 0;
  const z = c / 2 / Math.sqrt(m * k);
  
  if (z >= 1 || m == 1) {
  	document.getElementById('result1').value = 'No need to migrate!';
    return;
  }
  
  const [new_mass, new_stiffness, new_damping] = calculate(m, k, c);
 
  document.getElementById('result1').value = `  SpringDescription(
    mass: ${new_mass},
    stiffness: ${new_stiffness},
    damping: ${new_damping}
  )`;
}

function calculate2() {
  const m = parseFloat(document.getElementById('mass2').value) || 0;
  const k = parseFloat(document.getElementById('stiffness2').value) || 0;
  const z = parseFloat(document.getElementById('ratio2').value) || 0;
  if (z >= 1 || m == 1) {
  	document.getElementById('result2').value = 'No need to migrate!';
    return;
  }
  
  const [new_mass, new_stiffness, new_damping] = calculate(m, k, z * 2 * Math.sqrt(m * k));
  const new_ratio = new_damping / 2 / Math.sqrt(new_mass * new_stiffness);
 
  document.getElementById('result2').value = `  SpringDescription.withDampingRatio(
    mass: ${new_mass},
    stiffness: ${new_stiffness},
    ratio: ${new_ratio}
  )`;
}