JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<canvas id="cnv" width="600" height="400"></canvas>
<br>
<input id="w" type="range" value="10" min="10" max="220" onchange="paint()"> => move right
<br>results: <span id="theta"></span>

CSS

#cnv {
  border: solid 1px gray;
  background-color: silver;
}

JavaScript

function paint() {
  var cnv = document.getElementById('cnv');
  var ctx = cnv.getContext('2d');
  var yy = 1860, xx = 2500;
  
  ctx.clearRect(0,0,cnv.width,cnv.height);

	var w = Number(document.getElementById('w').value);
  var th = document.getElementById('theta');

  // axes
  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(10, cnv.height-10);
  ctx.lineTo(cnv.width-10, cnv.height-10);
  ctx.strokeStyle='black';
  ctx.stroke();

  // origin bottom left
  ctx.save();
  ctx.translate(10, cnv.height-10);
  // scale to fit xx and yy
  var sx = (xx / 0.8 + 20) / cnv.width;
  var sy = (yy / 0.8 + 20) / cnv.height;
  var s = Math.min(sx, sy);
  ctx.scale(1/s, -1/s);
  // lines get thinner so correct that
  ctx.lineWidth = s;

  // calc x
  var x = (485480*w)/(93*Math.sqrt(9709600-w*w)-125*w);
  th.innerHTML = 'w = ' + w + '; x = ' + Math.round(1000 * x) / 1000 + '; theta = ' + Math.round(1000 * Math.asin(w/x) * 180 / Math.PI) / 1000;
  
  // base line
  var yy2 = yy - x * yy / (2500 + x);
  ctx.beginPath();
  ctx.moveTo(0, yy2);
  ctx.lineTo(xx, 0);
  ctx.strokeStyle = 'green';
  ctx.stroke();
  // shifted line
  ctx.beginPath();
  ctx.moveTo(0, yy);
  ctx.lineTo(xx + x, 0);
  ctx.strokeStyle = 'red';
  ctx.stroke();
  // show that distance = w
  ctx.beginPath();
  ctx.arc(xx, 0, w, 0, 2 * Math.PI, false);
  ctx.moveTo(w, yy2);
  ctx.arc(0, yy2, w, 0, 2 * Math.PI, false);
  ctx.strokeStyle = 'yellow';
  ctx.stroke();
  ctx.restore();
}