Javedalam/Vibration
0
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8" />5<meta name="viewport" content="width=device-width,initial-scale=1" />6<title>Interactive Lesson: Damped SDOF under Harmonic Load</title>7 8<!-- Plotly (verified CDN) -->9<script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>10<!-- MathJax for equations -->11<script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>12 13<style>14 :root { --bg:#0b1020; --card:#121a32; --ink:#e8eefc; --muted:#9fb1ff; --line:#273154; --accent:#8ec7ff;}15 html,body{background:var(--bg); color:var(--ink); font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif; margin:0}16 header{padding:22px 20px 10px}17 h1{margin:0 0 6px; font-size:20px}18 .wrap{padding:0 20px 24px}19 .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)}20 .row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}21 label{display:block; font-size:13px; color:var(--muted); margin:8px 0 4px}22 input,select{width:100%; padding:10px; border-radius:10px; border:1px solid #2c3a60; background:#0f1630; color:var(--ink)}23 button{padding:10px 14px; border-radius:10px; border:1px solid #2c3a60; background:#1b2650; color:var(--ink); cursor:pointer}24 button:hover{filter:brightness(1.12)}25 .tiny{color:var(--muted); font-size:12px}26 .kpi{display:flex; flex-wrap:wrap; gap:16px; margin-top:6px}27 .kpi div{background:#0f1630; border:1px dashed #2c3a60; border-radius:10px; padding:8px 10px; font-variant-numeric:tabular-nums}28 details{background:#0f1630; border:1px solid #2c3a60; border-radius:10px; padding:10px 12px}29 details summary{cursor:pointer; color:var(--accent)}30 a{color:var(--accent)}31</style>32</head>33<body>34<header>35 <h1>Interactive Lesson: Damped SDOF under Harmonic Load</h1>36 <div class="tiny">Problem → Theory → Interactive Solution → Quick Check — all in your browser.</div>37</header>38 39<div class="wrap">40 41 <!-- Problem Statement -->42 <section class="card">43 <h2 style="margin:0 0 8px;font-size:18px">1) Problem</h2>44 <p>45 A single-degree-of-freedom system with mass \(m\), stiffness \(k\), and damping ratio \(\zeta\) is subjected46 to a sinusoidal force \(F(t)=F_0\sin(\omega t)\).47 Determine and visualize the displacement response \(x(t)\), and study the steady-state48 frequency response.49 </p>50 <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>51 </section>52 53 <!-- Theory -->54 <section class="card">55 <h2 style="margin:0 0 8px;font-size:18px">2) Theory</h2>56 <p>57 The steady-state amplitude under harmonic excitation is58 \[59 |X(\omega)| = \frac{F_0/k}{\sqrt{(1-r^2)^2+(2\zeta r)^2}},\quad r=\frac{\omega}{\omega_n}.60 \]61 The phase lag is62 \[63 \phi(\omega)=\tan^{-1}\!\left(\frac{2\zeta r}{1-r^2}\right).64 \]65 </p>66 <details>67 <summary>Show derivation (outline)</summary>68 <p class="tiny">69 Assume steady state \(x_p=A\sin(\omega t-\phi)\), substitute in ODE, match sine/cosine terms to get70 amplitude and phase. The complete response is \(x(t)=x_h(t)+x_p(t)\); the homogeneous part decays for \(\zeta>0\).71 </p>72 </details>73 </section>74 75 <!-- Interactive Controls -->76 <section class="card">77 <h2 style="margin:0 0 8px;font-size:18px">3) Interactive Solution</h2>78 <div class="row">79 <div><label>Preset</label>80 <select id="preset">81 <option value="custom">— custom —</option>82 <option value="light">Light damping (ζ=0.02, resonance scan)</option>83 <option value="moderate">Moderate damping (ζ=0.07)</option>84 <option value="heavy">Heavy damping (ζ=0.2)</option>85 </select>86 </div>87 <div><label>Mass m (kg)</label><input id="m" type="number" step="any" value="1"></div>88 <div><label>Stiffness k (N/m)</label><input id="k" type="number" step="any" value="100"></div>89 <div><label>Damping ratio ζ</label><input id="zeta" type="number" step="any" value="0.05"></div>90 <div><label>Force amplitude F₀ (N)</label><input id="F0" type="number" step="any" value="1"></div>91 <div><label>Excitation ω (rad/s)</label><input id="omegaF" type="number" step="any" value="5"></div>92 <div><label>Sim time T (s)</label><input id="T" type="number" step="any" value="20"></div>93 <div><label>Δt (s)</label><input id="dt" type="number" step="any" value="0.002"></div>94 <div><label>x(0)</label><input id="x0" type="number" step="any" value="0"></div>95 <div><label>ẋ(0)</label><input id="v0" type="number" step="any" value="0"></div>96 </div>97 <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:10px">98 <button id="runBtn">Run time response</button>99 <button id="frfBtn">Plot frequency response</button>100 <button id="csvBtn">Download time history (CSV)</button>101 <span class="tiny">Everything is computed locally with RK4 + closed-form FRF.</span>102 </div>103 <div class="kpi">104 <div>ωₙ = <span id="wn">—</span> rad/s</div>105 <div>fₙ = <span id="fn">—</span> Hz</div>106 <div>c = <span id="c">—</span> N·s/m</div>107 <div>r = ω/ωₙ = <span id="r">—</span></div>108 </div>109 </section>110 111 <!-- Plots -->112 <section class="card">113 <h2 style="margin:0 0 8px;font-size:18px">4) Plots</h2>114 <div id="timePlot" style="height:380px"></div>115 <div id="frfPlot" style="height:380px;margin-top:10px"></div>116 </section>117 118 <!-- Quick Check -->119 <section class="card">120 <h2 style="margin:0 0 8px;font-size:18px">5) Quick Check</h2>121 <p class="tiny">Compute the natural frequency and critical damping for the current parameters.</p>122 <div class="row">123 <div><label>Your ωₙ (rad/s)</label><input id="qc_wn" type="number" step="any"></div>124 <div><label>Your c<sub>crit</sub> (N·s/m)</label><input id="qc_ccrit" type="number" step="any"></div>125 </div>126 <div style="margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap">127 <button id="checkBtn">Check answers</button>128 <span id="qc_msg" class="tiny"></span>129 </div>130 </section>131 132 <footer class="tiny" style="text-align:center;opacity:.9;margin-top:12px">133 Built with HTML + JavaScript + Plotly + MathJax. Share this file and it will run offline.134 </footer>135</div>136 137<script>138 // ------- Helpers -------139 const g = { ts:[], xs:[], vs:[] }; // for CSV export140 const val = id => parseFloat(document.getElementById(id).value);141 const setText = (id, t) => document.getElementById(id).textContent = t;142 143 function updateDerived() {144 const m = val('m'), k = val('k'), z = val('zeta'), w = val('omegaF');145 const wn = Math.sqrt(k/m);146 const fn = wn/(2*Math.PI);147 const c = 2*z*wn*m;148 const r = w/wn;149 setText('wn', isFinite(wn)?wn.toFixed(4):'—');150 setText('fn', isFinite(fn)?fn.toFixed(4):'—');151 setText('c', isFinite(c)?c.toExponential(4):'—');152 setText('r', isFinite(r)?r.toFixed(4):'—');153 }154 ['m','k','zeta','omegaF'].forEach(id => document.getElementById(id).addEventListener('input', updateDerived));155 156 // ------- ODE pieces -------157 function rhs(t, y, p) {158 const [x,v] = y;159 const a = (p.F0/p.m)*Math.sin(p.omega*t) - 2*p.zeta*p.wn*v - (p.wn*p.wn)*x;160 return [v, a];161 }162 function rk4_step(f,t,y,h,p){163 const k1=f(t,y,p);164 const y2=[y[0]+0.5*h*k1[0], y[1]+0.5*h*k1[1]];165 const k2=f(t+0.5*h,y2,p);166 const y3=[y[0]+0.5*h*k2[0], y[1]+0.5*h*k2[1]];167 const k3=f(t+0.5*h,y3,p);168 const y4=[y[0]+h*k3[0], y[1]+h*k3[1]];169 const k4=f(t+h,y4,p);170 return [171 y[0]+(h/6)*(k1[0]+2*k2[0]+2*k3[0]+k4[0]),172 y[1]+(h/6)*(k1[1]+2*k2[1]+2*k3[1]+k4[1])173 ];174 }175 176 function simulate(){177 const p = {178 m:val('m'), k:val('k'), zeta:val('zeta'), F0:val('F0'),179 omega:val('omegaF'), T:val('T'), dt:val('dt'),180 wn: Math.sqrt(val('k')/val('m'))181 };182 let t=0, y=[val('x0'), val('v0')];183 const N=Math.max(1,Math.floor(p.T/p.dt));184 const ts=[], xs=[], vs=[];185 for(let i=0;i<=N;i++){186 ts.push(t); xs.push(y[0]); vs.push(y[1]);187 y=rk4_step(rhs,t,y,p.dt,p); t+=p.dt;188 }189 g.ts=ts; g.xs=xs; g.vs=vs;190 191 Plotly.newPlot('timePlot',[192 {x:ts,y:xs,mode:'lines',name:'x(t) [m]'},193 {x:ts,y:vs,mode:'lines',name:'v(t) [m/s]',yaxis:'y2'}194 ],{195 paper_bgcolor:'#121a32',plot_bgcolor:'#0f1630',showlegend:true,196 margin:{l:60,r:60,t:10,b:40},197 xaxis:{title:'t [s]',gridcolor:'#273154',zerolinecolor:'#273154'},198 yaxis:{title:'x [m]',gridcolor:'#273154',zerolinecolor:'#273154'},199 yaxis2:{title:'v [m/s]',overlaying:'y',side:'right',gridcolor:'#273154',zerolinecolor:'#273154'}200 },{displayModeBar:true,responsive:true});201 202 updateDerived();203 }204 205 function frf(){206 const m=val('m'), k=val('k'), z=val('zeta');207 const wn=Math.sqrt(k/m);208 const wMin=0.01*wn, wMax=3*wn, N=600;209 const r=[], A=[], Phi=[];210 for(let i=0;i<N;i++){211 const w=wMin+(wMax-wMin)*i/(N-1);212 const rr=w/wn;213 const den=Math.sqrt((1-rr*rr)**2+(2*z*rr)**2);214 r.push(rr); A.push((1/den)); // normalized by (F0/k)215 Phi.push(-Math.atan2(2*z*rr,(1-rr*rr))*180/Math.PI);216 }217 Plotly.newPlot('frfPlot',[218 {x:r,y:A,mode:'lines',name:'|X| / (F0/k)'},219 {x:r,y:Phi,mode:'lines',name:'Phase [deg]',yaxis:'y2'}220 ],{221 paper_bgcolor:'#121a32',plot_bgcolor:'#0f1630',showlegend:true,222 margin:{l:70,r:70,t:10,b:40},223 xaxis:{title:'r = ω/ωₙ',gridcolor:'#273154',zerolinecolor:'#273154'},224 yaxis:{title:'Amplitude',gridcolor:'#273154',zerolinecolor:'#273154'},225 yaxis2:{title:'Phase [deg]',overlaying:'y',side:'right',gridcolor:'#273154',zerolinecolor:'#273154'}226 },{displayModeBar:true,responsive:true});227 updateDerived();228 }229 230 // CSV export231 function downloadCSV(){232 if(!g.ts.length){ simulate(); }233 let csv="t,x,v\n";234 for(let i=0;i<g.ts.length;i++){235 csv+=`${g.ts[i]},${g.xs[i]},${g.vs[i]}\n`;236 }237 const blob=new Blob([csv],{type:'text/csv'});238 const url=URL.createObjectURL(blob);239 const a=document.createElement('a');240 a.href=url; a.download='sdof_time_history.csv';241 document.body.appendChild(a); a.click();242 a.remove(); URL.revokeObjectURL(url);243 }244 245 // Presets246 document.getElementById('preset').addEventListener('change', e=>{247 const m = document.getElementById('m'), k=document.getElementById('k'),248 z=document.getElementById('zeta'), w=document.getElementById('omegaF');249 if(e.target.value==='light'){ m.value=1; k.value=100; z.value=0.02; w.value=Math.sqrt(100/1); }250 else if(e.target.value==='moderate'){ m.value=1; k.value=100; z.value=0.07; w.value=0.8*Math.sqrt(100/1); }251 else if(e.target.value==='heavy'){ m.value=1; k.value=100; z.value=0.2; w.value=0.6*Math.sqrt(100/1); }252 updateDerived(); simulate(); frf();253 });254 255 // Quick check (ωn and ccrit)256 document.getElementById('checkBtn').addEventListener('click', ()=>{257 const wn_true = Math.sqrt(val('k')/val('m'));258 const ccrit_true = 2*val('m')*wn_true;259 const ok1 = Math.abs(val('qc_wn')-wn_true) <= 0.01*wn_true;260 const ok2 = Math.abs(val('qc_ccrit')-ccrit_true) <= 0.02*ccrit_true;261 const msg = `ωₙ ${(ok1?'✅':'❌')} (true ${wn_true.toFixed(4)}), c_crit ${(ok2?'✅':'❌')} (true ${ccrit_true.toExponential(4)})`;262 document.getElementById('qc_msg').textContent = msg;263 });264 265 // Buttons266 document.getElementById('runBtn').addEventListener('click', simulate);267 document.getElementById('frfBtn').addEventListener('click', frf);268 document.getElementById('csvBtn').addEventListener('click', downloadCSV);269 270 // Initial render271 updateDerived(); simulate(); frf();272</script>273</body>274</html>