|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" /> |
|
|
<title>Interactive Lesson: Damped SDOF under Harmonic Load</title> |
|
|
|
|
|
|
|
|
<script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script> |
|
|
|
|
|
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> |
|
|
|
|
|
<style> |
|
|
:root { --bg:#0b1020; --card:#121a32; --ink:#e8eefc; --muted:#9fb1ff; --line:#273154; --accent:#8ec7ff;} |
|
|
html,body{background:var(--bg); color:var(--ink); font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif; margin:0} |
|
|
header{padding:22px 20px 10px} |
|
|
h1{margin:0 0 6px; font-size:20px} |
|
|
.wrap{padding:0 20px 24px} |
|
|
.card{background:var(--card); border:1px solid #293456; border-radius:16px; padding:16px; margin:12px 0; box-shadow:0 6px 22px rgba(0,0,0,.25)} |
|
|
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px} |
|
|
label{display:block; font-size:13px; color:var(--muted); margin:8px 0 4px} |
|
|
input,select{width:100%; padding:10px; border-radius:10px; border:1px solid #2c3a60; background:#0f1630; color:var(--ink)} |
|
|
button{padding:10px 14px; border-radius:10px; border:1px solid #2c3a60; background:#1b2650; color:var(--ink); cursor:pointer} |
|
|
button:hover{filter:brightness(1.12)} |
|
|
.tiny{color:var(--muted); font-size:12px} |
|
|
.kpi{display:flex; flex-wrap:wrap; gap:16px; margin-top:6px} |
|
|
.kpi div{background:#0f1630; border:1px dashed #2c3a60; border-radius:10px; padding:8px 10px; font-variant-numeric:tabular-nums} |
|
|
details{background:#0f1630; border:1px solid #2c3a60; border-radius:10px; padding:10px 12px} |
|
|
details summary{cursor:pointer; color:var(--accent)} |
|
|
a{color:var(--accent)} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<h1>Interactive Lesson: Damped SDOF under Harmonic Load</h1> |
|
|
<div class="tiny">Problem β Theory β Interactive Solution β Quick Check β all in your browser.</div> |
|
|
</header> |
|
|
|
|
|
<div class="wrap"> |
|
|
|
|
|
|
|
|
<section class="card"> |
|
|
<h2 style="margin:0 0 8px;font-size:18px">1) Problem</h2> |
|
|
<p> |
|
|
A single-degree-of-freedom system with mass \(m\), stiffness \(k\), and damping ratio \(\zeta\) is subjected |
|
|
to a sinusoidal force \(F(t)=F_0\sin(\omega t)\). |
|
|
Determine and visualize the displacement response \(x(t)\), and study the steady-state |
|
|
frequency response. |
|
|
</p> |
|
|
<p class="tiny">Governing ODE: \(\ddot x + 2\zeta\omega_n \dot x + \omega_n^2 x = \dfrac{F_0}{m}\sin(\omega t)\), where \(\omega_n=\sqrt{k/m}\).</p> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="card"> |
|
|
<h2 style="margin:0 0 8px;font-size:18px">2) Theory</h2> |
|
|
<p> |
|
|
The steady-state amplitude under harmonic excitation is |
|
|
\[ |
|
|
|X(\omega)| = \frac{F_0/k}{\sqrt{(1-r^2)^2+(2\zeta r)^2}},\quad r=\frac{\omega}{\omega_n}. |
|
|
\] |
|
|
The phase lag is |
|
|
\[ |
|
|
\phi(\omega)=\tan^{-1}\!\left(\frac{2\zeta r}{1-r^2}\right). |
|
|
\] |
|
|
</p> |
|
|
<details> |
|
|
<summary>Show derivation (outline)</summary> |
|
|
<p class="tiny"> |
|
|
Assume steady state \(x_p=A\sin(\omega t-\phi)\), substitute in ODE, match sine/cosine terms to get |
|
|
amplitude and phase. The complete response is \(x(t)=x_h(t)+x_p(t)\); the homogeneous part decays for \(\zeta>0\). |
|
|
</p> |
|
|
</details> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="card"> |
|
|
<h2 style="margin:0 0 8px;font-size:18px">3) Interactive Solution</h2> |
|
|
<div class="row"> |
|
|
<div><label>Preset</label> |
|
|
<select id="preset"> |
|
|
<option value="custom">β custom β</option> |
|
|
<option value="light">Light damping (ΞΆ=0.02, resonance scan)</option> |
|
|
<option value="moderate">Moderate damping (ΞΆ=0.07)</option> |
|
|
<option value="heavy">Heavy damping (ΞΆ=0.2)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div><label>Mass m (kg)</label><input id="m" type="number" step="any" value="1"></div> |
|
|
<div><label>Stiffness k (N/m)</label><input id="k" type="number" step="any" value="100"></div> |
|
|
<div><label>Damping ratio ΞΆ</label><input id="zeta" type="number" step="any" value="0.05"></div> |
|
|
<div><label>Force amplitude Fβ (N)</label><input id="F0" type="number" step="any" value="1"></div> |
|
|
<div><label>Excitation Ο (rad/s)</label><input id="omegaF" type="number" step="any" value="5"></div> |
|
|
<div><label>Sim time T (s)</label><input id="T" type="number" step="any" value="20"></div> |
|
|
<div><label>Ξt (s)</label><input id="dt" type="number" step="any" value="0.002"></div> |
|
|
<div><label>x(0)</label><input id="x0" type="number" step="any" value="0"></div> |
|
|
<div><label>αΊ(0)</label><input id="v0" type="number" step="any" value="0"></div> |
|
|
</div> |
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:10px"> |
|
|
<button id="runBtn">Run time response</button> |
|
|
<button id="frfBtn">Plot frequency response</button> |
|
|
<button id="csvBtn">Download time history (CSV)</button> |
|
|
<span class="tiny">Everything is computed locally with RK4 + closed-form FRF.</span> |
|
|
</div> |
|
|
<div class="kpi"> |
|
|
<div>Οβ = <span id="wn">β</span> rad/s</div> |
|
|
<div>fβ = <span id="fn">β</span> Hz</div> |
|
|
<div>c = <span id="c">β</span> NΒ·s/m</div> |
|
|
<div>r = Ο/Οβ = <span id="r">β</span></div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="card"> |
|
|
<h2 style="margin:0 0 8px;font-size:18px">4) Plots</h2> |
|
|
<div id="timePlot" style="height:380px"></div> |
|
|
<div id="frfPlot" style="height:380px;margin-top:10px"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="card"> |
|
|
<h2 style="margin:0 0 8px;font-size:18px">5) Quick Check</h2> |
|
|
<p class="tiny">Compute the natural frequency and critical damping for the current parameters.</p> |
|
|
<div class="row"> |
|
|
<div><label>Your Οβ (rad/s)</label><input id="qc_wn" type="number" step="any"></div> |
|
|
<div><label>Your c<sub>crit</sub> (NΒ·s/m)</label><input id="qc_ccrit" type="number" step="any"></div> |
|
|
</div> |
|
|
<div style="margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap"> |
|
|
<button id="checkBtn">Check answers</button> |
|
|
<span id="qc_msg" class="tiny"></span> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<footer class="tiny" style="text-align:center;opacity:.9;margin-top:12px"> |
|
|
Built with HTML + JavaScript + Plotly + MathJax. Share this file and it will run offline. |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const g = { ts:[], xs:[], vs:[] }; |
|
|
const val = id => parseFloat(document.getElementById(id).value); |
|
|
const setText = (id, t) => document.getElementById(id).textContent = t; |
|
|
|
|
|
function updateDerived() { |
|
|
const m = val('m'), k = val('k'), z = val('zeta'), w = val('omegaF'); |
|
|
const wn = Math.sqrt(k/m); |
|
|
const fn = wn/(2*Math.PI); |
|
|
const c = 2*z*wn*m; |
|
|
const r = w/wn; |
|
|
setText('wn', isFinite(wn)?wn.toFixed(4):'β'); |
|
|
setText('fn', isFinite(fn)?fn.toFixed(4):'β'); |
|
|
setText('c', isFinite(c)?c.toExponential(4):'β'); |
|
|
setText('r', isFinite(r)?r.toFixed(4):'β'); |
|
|
} |
|
|
['m','k','zeta','omegaF'].forEach(id => document.getElementById(id).addEventListener('input', updateDerived)); |
|
|
|
|
|
|
|
|
function rhs(t, y, p) { |
|
|
const [x,v] = y; |
|
|
const a = (p.F0/p.m)*Math.sin(p.omega*t) - 2*p.zeta*p.wn*v - (p.wn*p.wn)*x; |
|
|
return [v, a]; |
|
|
} |
|
|
function rk4_step(f,t,y,h,p){ |
|
|
const k1=f(t,y,p); |
|
|
const y2=[y[0]+0.5*h*k1[0], y[1]+0.5*h*k1[1]]; |
|
|
const k2=f(t+0.5*h,y2,p); |
|
|
const y3=[y[0]+0.5*h*k2[0], y[1]+0.5*h*k2[1]]; |
|
|
const k3=f(t+0.5*h,y3,p); |
|
|
const y4=[y[0]+h*k3[0], y[1]+h*k3[1]]; |
|
|
const k4=f(t+h,y4,p); |
|
|
return [ |
|
|
y[0]+(h/6)*(k1[0]+2*k2[0]+2*k3[0]+k4[0]), |
|
|
y[1]+(h/6)*(k1[1]+2*k2[1]+2*k3[1]+k4[1]) |
|
|
]; |
|
|
} |
|
|
|
|
|
function simulate(){ |
|
|
const p = { |
|
|
m:val('m'), k:val('k'), zeta:val('zeta'), F0:val('F0'), |
|
|
omega:val('omegaF'), T:val('T'), dt:val('dt'), |
|
|
wn: Math.sqrt(val('k')/val('m')) |
|
|
}; |
|
|
let t=0, y=[val('x0'), val('v0')]; |
|
|
const N=Math.max(1,Math.floor(p.T/p.dt)); |
|
|
const ts=[], xs=[], vs=[]; |
|
|
for(let i=0;i<=N;i++){ |
|
|
ts.push(t); xs.push(y[0]); vs.push(y[1]); |
|
|
y=rk4_step(rhs,t,y,p.dt,p); t+=p.dt; |
|
|
} |
|
|
g.ts=ts; g.xs=xs; g.vs=vs; |
|
|
|
|
|
Plotly.newPlot('timePlot',[ |
|
|
{x:ts,y:xs,mode:'lines',name:'x(t) [m]'}, |
|
|
{x:ts,y:vs,mode:'lines',name:'v(t) [m/s]',yaxis:'y2'} |
|
|
],{ |
|
|
paper_bgcolor:'#121a32',plot_bgcolor:'#0f1630',showlegend:true, |
|
|
margin:{l:60,r:60,t:10,b:40}, |
|
|
xaxis:{title:'t [s]',gridcolor:'#273154',zerolinecolor:'#273154'}, |
|
|
yaxis:{title:'x [m]',gridcolor:'#273154',zerolinecolor:'#273154'}, |
|
|
yaxis2:{title:'v [m/s]',overlaying:'y',side:'right',gridcolor:'#273154',zerolinecolor:'#273154'} |
|
|
},{displayModeBar:true,responsive:true}); |
|
|
|
|
|
updateDerived(); |
|
|
} |
|
|
|
|
|
function frf(){ |
|
|
const m=val('m'), k=val('k'), z=val('zeta'); |
|
|
const wn=Math.sqrt(k/m); |
|
|
const wMin=0.01*wn, wMax=3*wn, N=600; |
|
|
const r=[], A=[], Phi=[]; |
|
|
for(let i=0;i<N;i++){ |
|
|
const w=wMin+(wMax-wMin)*i/(N-1); |
|
|
const rr=w/wn; |
|
|
const den=Math.sqrt((1-rr*rr)**2+(2*z*rr)**2); |
|
|
r.push(rr); A.push((1/den)); |
|
|
Phi.push(-Math.atan2(2*z*rr,(1-rr*rr))*180/Math.PI); |
|
|
} |
|
|
Plotly.newPlot('frfPlot',[ |
|
|
{x:r,y:A,mode:'lines',name:'|X| / (F0/k)'}, |
|
|
{x:r,y:Phi,mode:'lines',name:'Phase [deg]',yaxis:'y2'} |
|
|
],{ |
|
|
paper_bgcolor:'#121a32',plot_bgcolor:'#0f1630',showlegend:true, |
|
|
margin:{l:70,r:70,t:10,b:40}, |
|
|
xaxis:{title:'r = Ο/Οβ',gridcolor:'#273154',zerolinecolor:'#273154'}, |
|
|
yaxis:{title:'Amplitude',gridcolor:'#273154',zerolinecolor:'#273154'}, |
|
|
yaxis2:{title:'Phase [deg]',overlaying:'y',side:'right',gridcolor:'#273154',zerolinecolor:'#273154'} |
|
|
},{displayModeBar:true,responsive:true}); |
|
|
updateDerived(); |
|
|
} |
|
|
|
|
|
|
|
|
function downloadCSV(){ |
|
|
if(!g.ts.length){ simulate(); } |
|
|
let csv="t,x,v\n"; |
|
|
for(let i=0;i<g.ts.length;i++){ |
|
|
csv+=`${g.ts[i]},${g.xs[i]},${g.vs[i]}\n`; |
|
|
} |
|
|
const blob=new Blob([csv],{type:'text/csv'}); |
|
|
const url=URL.createObjectURL(blob); |
|
|
const a=document.createElement('a'); |
|
|
a.href=url; a.download='sdof_time_history.csv'; |
|
|
document.body.appendChild(a); a.click(); |
|
|
a.remove(); URL.revokeObjectURL(url); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('preset').addEventListener('change', e=>{ |
|
|
const m = document.getElementById('m'), k=document.getElementById('k'), |
|
|
z=document.getElementById('zeta'), w=document.getElementById('omegaF'); |
|
|
if(e.target.value==='light'){ m.value=1; k.value=100; z.value=0.02; w.value=Math.sqrt(100/1); } |
|
|
else if(e.target.value==='moderate'){ m.value=1; k.value=100; z.value=0.07; w.value=0.8*Math.sqrt(100/1); } |
|
|
else if(e.target.value==='heavy'){ m.value=1; k.value=100; z.value=0.2; w.value=0.6*Math.sqrt(100/1); } |
|
|
updateDerived(); simulate(); frf(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('checkBtn').addEventListener('click', ()=>{ |
|
|
const wn_true = Math.sqrt(val('k')/val('m')); |
|
|
const ccrit_true = 2*val('m')*wn_true; |
|
|
const ok1 = Math.abs(val('qc_wn')-wn_true) <= 0.01*wn_true; |
|
|
const ok2 = Math.abs(val('qc_ccrit')-ccrit_true) <= 0.02*ccrit_true; |
|
|
const msg = `Οβ ${(ok1?'β
':'β')} (true ${wn_true.toFixed(4)}), c_crit ${(ok2?'β
':'β')} (true ${ccrit_true.toExponential(4)})`; |
|
|
document.getElementById('qc_msg').textContent = msg; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('runBtn').addEventListener('click', simulate); |
|
|
document.getElementById('frfBtn').addEventListener('click', frf); |
|
|
document.getElementById('csvBtn').addEventListener('click', downloadCSV); |
|
|
|
|
|
|
|
|
updateDerived(); simulate(); frf(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
