JavaScript Physics Simulation: Check a Spring Model at Known Phases

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>JavaScript Physics Simulation: Check a Spring Model at Known Phases</title><style>:root{--bg:#eaf3f7;--paper:#fff;--ink:#16354a;--accent:#12526f;--tint:#dcedf5;--line:#b5ccd7;--muted:#436171;--button:#fff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:22px clamp(18px,4vw,42px) 38px}header{border-bottom:2px solid var(--accent);padding-bottom:14px;margin-bottom:18px}h1{font-size:clamp(26px,4vw,36px);line-height:1.15;margin:4px 0 10px}h2{font-size:22px;line-height:1.3;margin:0 0 14px}h3{font-size:19px}p{margin:0 0 14px}.eyebrow{font-size:16px;font-weight:750;color:var(--accent)}.lede{max-width:800px}.panel{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:20px;margin:18px 0}.workbench{border-top:4px solid var(--accent)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid>*{min-width:0}label{display:block;font-size:16px;font-weight:650;margin:12px 0 6px}input,textarea,select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid #7b8893;border-radius:5px;padding:10px;width:100%;min-width:0}textarea{resize:vertical;line-height:1.45}input[type=checkbox],input[type=radio]{width:21px;height:21px;vertical-align:middle;margin-right:9px}button{font:650 16px/1.4 system-ui,sans-serif;padding:11px 15px;min-height:46px;background:var(--accent);border:2px solid var(--accent);color:var(--button);border-radius:5px;cursor:pointer}button:disabled{opacity:.55;cursor:default}.buttons{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.buttons>*{flex:1 1 auto}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #c05b00;outline-offset:3px}.result{font:600 17px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--tint);padding:16px;border-left:4px solid var(--accent);min-height:65px;margin:16px 0}.sample{padding:14px 16px;border-left:3px solid var(--accent);background:var(--tint);margin:12px 0}.muted{color:var(--muted)}pre,code{font:16px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}pre{margin:12px 0}table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:16px}th,td{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}th{background:var(--tint)}svg{max-width:100%;height:auto;display:block}details{margin:20px 0}summary{font-weight:700;cursor:pointer}footer{margin-top:28px;border-top:1px solid var(--line);padding-top:18px;font-size:16px}a{color:var(--accent)}.reading{font-family:Georgia,serif}.codeview{border-radius:0;box-shadow:7px 7px 0 var(--tint)}.token{display:inline-block;padding:8px 12px;margin:4px;border:1px solid var(--line);border-radius:4px;background:var(--paper)}.swatch{min-height:30px}.split{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}ol{padding-left:25px}li{margin:9px 0}@media(max-width:600px){main{padding:16px}.grid,.split{grid-template-columns:1fr}.panel{padding:16px;margin:14px 0}h1{font-size:27px}header{padding-bottom:10px}.buttons{gap:8px}.result{padding:13px}th,td{padding:8px 5px}}</style></head><body><main><header><div class="eyebrow">Original practice fixture · local workbench</div><h1>At the center, moving left</h1><p class="lede">A 2 kg mass on an 8 N/m spring is released from rest at 0.25 m. At a quarter period it crosses the center moving left at 0.5 m/s; at a half period it rests momentarily at −0.25 m.</p></header><pre id="result" class="result" aria-label="Current analytic readings">Release: x = 0.25 m; v = 0 m/s. Quarter-period teacher result: x = 0 m; v = −0.5 m/s.</pre><p id="status" role="status" aria-live="polite" aria-atomic="true"></p><div class="buttons"><button type="button" id="quarter">Quarter period</button><button type="button" id="half">Half period</button><button type="button" id="full">Full period</button><button type="button" id="release">Release</button></div><section class="panel"><h2>Schematic position</h2><svg viewBox="0 0 500 80" role="img" aria-label="Mass position on a schematic horizontal rail"><path d="M10 40H490M250 10V70" stroke="#658797"/><rect id="marker" x="330" y="20" width="40" height="40" fill="#22677e"/></svg></section><label for="m">Mass · kg</label><input id="m" value="2" ><label for="k">Spring · N/m</label><input id="k" value="8" ><label for="a">Amplitude · m</label><input id="a" value=".25" ><div class="buttons"><button type="button" id="apply">Apply</button><button type="button" id="start">Start</button><button type="button" id="pause">Pause</button><button type="button" id="reset">Reset</button></div><section class="panel"><h2>Analytic model</h2><p id="formulas">omega = sqrt(k/m); T = 2*pi/omega; x = A*cos(omega*t); v = -A*omega*sin(omega*t). With m = 2 kg, k = 8 N/m and A = 0.25 m: quarter period x = 0 m, v = −0.5 m/s; half period x = −0.25 m, v = 0 m/s.</p></section><footer><p>This ideal frictionless model has no damping or collision and is not an engineering validation.</p><p>Use a prepared HTML explanation in <a href="https://nos-workspace.com/">NOS</a> when reviewing this analytic spring workbench. Eligible static instructions can be revised in visual editing mode; dynamic outputs follow their controls.</p></footer></main><script>
(()=>{'use strict';const $=s=>document.querySelector(s);const out=s=>{$('#result').textContent=s;$('#status').textContent=s;};const val=id=>$('#'+id).value;const num=id=>{const s=val(id).trim();return s===''?NaN:Number(s);};const on=(id,fn)=>$('#'+id).addEventListener('click',fn);const watch=ids=>{for(const id of ids)for(const event of ['input','change'])$('#'+id).addEventListener(event,()=>out('Inputs changed. Run the action to update this result.'));};const fmt=(n,d=4)=>Math.abs(n)<1e-10?(0).toFixed(d):n.toFixed(d);
let m=2,k=8,a=.25,time=0,valid=true,running=false,last=null,raf=0;function stop(){running=false;last=null;cancelAnimationFrame(raf);}function show(){const w=Math.sqrt(k/m),T=2*Math.PI/w,x=a*Math.cos(w*time),v=-a*w*Math.sin(w*time);$('#marker').setAttribute('x',230+x*400);$('#result').textContent=((running?'Running':'Paused')+' | x = '+fmt(x)+' m | v = '+fmt(v)+' m/s | t = '+fmt(time)+' s | T = '+fmt(T)+' s'+(a===0?' | Stationary zero amplitude.':''));}function apply(){stop();m=num('m');k=num('k');a=num('a');valid=[m,k,a].every(Number.isFinite)&&m>=1&&m<=4&&k>=1&&k<=16&&a>=0&&a<=.5;if(!valid){out('Invalid parameters: m = 1–4, k = 1–16, A = 0–0.5; complete numeric fields required.');return;}time=0;show();$('#status').textContent='Parameters applied. At release.';}for(const id of ['m','k','a'])$('#'+id).addEventListener('input',()=>{stop();valid=false;out('Inputs changed. Apply valid parameters.');});on('apply',apply);for(const [id,q]of [['quarter',.25],['half',.5],['full',1],['release',0]])on(id,()=>{if(!valid){out('Apply valid parameters first.');return;}stop();time=q*2*Math.PI/Math.sqrt(k/m);show();$('#status').textContent='Checkpoint: '+id+'.';});function frame(stamp){if(!running)return;if(last!==null)time+=(stamp-last)/1000;last=stamp;show();raf=requestAnimationFrame(frame);}on('start',()=>{if(!valid||running)return;running=true;last=null;show();$('#status').textContent='Animation started.';raf=requestAnimationFrame(frame);});on('pause',()=>{stop();if(valid)show();$('#status').textContent='Animation paused.';});document.addEventListener('visibilitychange',()=>{if(document.hidden){stop();if(valid)show();}});on('reset',()=>{$('#m').value='2';$('#k').value='8';$('#a').value='.25';apply();$('#status').textContent='Reset to the initial release.';});show();
})();
</script></body></html>