getMaxAltitude

calc the height achieved by an object thrown up vertically (with no air resistance)

by moob

HTML

<svg viewBox="0 -10 20 100">
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
           <stop offset="0%" stop-color="#66c4ff" />
           <stop offset="100%" stop-color="#00aeff" />
       </linearGradient>
            <path class="bg" fill='none' class="bg" d="M2.87292266,72 C1.21568461,61.3845833 0.57708714,43.5534754 1.2801941,27.5273612 C1.98330105,11.5012469 3.87478287,0.775010008 5.99774662,0.775010008 C8.12071037,0.775010008 10.0121922,11.5012469 10.7152991,27.5273612 C11.4184061,43.5534754 10.7798086,61.3845833 9.12257059,72"></path>
            <path id="fg" stroke-dashoffset="0" fill='none' class="fg" d="M2.87292266,72 C1.21568461,61.3845833 0.57708714,43.5534754 1.2801941,27.5273612 C1.98330105,11.5012469 3.87478287,0.775010008 5.99774662,0.775010008 C8.12071037,0.775010008 10.0121922,11.5012469 10.7152991,27.5273612 C11.4184061,43.5534754 10.7798086,61.3845833 9.12257059,72"></path>
            <path id="dot" fill='none' class="dot" d="M2.87292266,72 C1.21568461,61.3845833 0.57708714,43.5534754 1.2801941,27.5273612 C1.98330105,11.5012469 3.87478287,0.775010008 5.99774662,0.775010008 C8.12071037,0.775010008 10.0121922,11.5012469 10.7152991,27.5273612 C11.4184061,43.5534754 10.7798086,61.3845833 9.12257059,72"></path>
            
            <animate 
    xlink:href="#fg"
    attributeName="stroke-dashoffset"
    from="145"
    to="0" 
    dur="5s"
    fill="freeze"
    />
    
</svg>

seconds: <input type="number" name="seconds" value="2" /><br />
height: <input name="height" readonly />

CSS

svg {
  height: 90vh;
  margin: auto;
  display: block;
}

path {
  stroke-linecap: round;
  stroke-width: 0.5;
}

path.bg {
  stroke: #dddddd;
}

path.fg {
  stroke: url(#gradient);
  stroke-dasharray: 145;
  /*stroke-dashoffset: 145;
  animation: dash 2s cubic-bezier(0, 1, 1, 0) forwards;*/
}

path.dot {
  stroke: #ff66ff;
  stroke-dasharray: 0px, 145px;
  stroke-dashoffset: 145;
  stroke-width: 3.5px;
  animation: dash 2s cubic-bezier(0, 1, 1, 0) forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1; /* <---- changed to "1" from "0"  */
  }
}

JavaScript

//calc the height achieved by an object thrown up vertically (with no air resistance)
//https://math.stackexchange.com/questions/2637635/calculate-the-max-altitude-of-an-object-launched-straight-up-where-all-we-know-i
function getMaxAltitude(t){
		//average speed where t = round trip time in seconds
    const a = 9.81;//gravitational constant
    const qt = t/4;//quarter of the full time (since the acceleration is constant, the average speed will be half the speed from the moment it reached the zenith (so t/2) until t. ie t/4)
    const ht = t/2;//half of the full time
    const avSp = a*qt;
    let dist = avSp * (t/2);//average speed * the freefall time
    return dist; //the distance fallen
};

let inp = document.querySelector("input[name='seconds']");
let oup = document.querySelector("input[name='height']");
let fg = document.querySelector("#fg");
let dot = document.querySelector("#dot");

inp.onchange=function(){
	let t = parseInt(inp.value);
	oup.value=getMaxAltitude(t);
  console.log(fg.style);
}