jump calculator

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<body>
jump radius:  <input id = "jr" type="text" value = "200"> cm<br>
lip height:  <input id = "lip" type="text" value = "100"> cm<br>
lip angle: <input id = "angle" type="number" value = "60"><br>
velocity:  <input id = "speed" type="text" value = "7"> m/s<br>
distance traveled:  <input id = "range" type="text"> meters<br>
air time:  <input id = "time" type="text"> seconds<br>
height:  <input id = "height" type="text"> meters<br>
<canvas id="myCanvas" width="1000" height="360" style="border:1px solid #d3d3d3;">
.</canvas>

<script>
/*
IN THIS SIMULATION 1 PIXEL = 1 CM
*/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
let angle = (45)-360;
let t = 0; // air time
let range = 0; // horizontal range
let vel = 0;
let height = 0; // max height
let jr = 0; // jump ramp radius
let lip = 0; // lip height
let bike = new Image();
bike.src = "https://www.pngall.com/wp-content/uploads/5/Downhill-Mountain-Bike-Transparent.png";
// mountain bike 100 cm
function sq(num) { // square a number
	return num*num;
}
function rad(num) { // to radians
	return num  * Math.PI / 180;
}
function round(val, digit) {
	return Math.round(val * Math.pow(10, digit)) / (Math.pow(10, digit));
}
function render() {
	angle = (document.getElementById("angle").value);
  vel = (document.getElementById("speed").value);
  jr = (document.getElementById("jr").value);
  ctx.lineWidth = 1;
  ctx.strokeStyle = "black";
	ctx.clearRect(0, 0, 1000, 1000);
  ctx.beginPath();
  ctx.arc(100, 260-jr+100, jr, ((90)/180)*Math.PI, ((450-angle)/180)*Math.PI, true);
  ctx.stroke();
  ctx.moveTo((Math.sin(angle/57)*jr)+100, 260+(Math.cos(angle/57)*jr)-jr+100);
  ctx.lineTo((Math.sin(angle/57)*jr)+120, 260+(Math.cos(angle/57)*jr)-jr+100);
  ctx.stroke();
  ctx.lineTo((Math.sin(angle/57)*jr)+120+(Math.sin(angle/57)*50), 360);
  ctx.moveTo(0, 360);
  ctx.lineTo(100, 360);
  ctx.stroke();
  t = (2 * vel * Math.sin(rad(angle))) / (9.8);
  range = ...