Bernoulli\u2019s Equation \u2014 Interactive Slider<\/title>\n <style>\n :root{\n --bg:#0b1020; --fg:#e9eef9; --muted:#9fb3d1; --accent:#7cc0ff; --accent2:#9dffb0; --warn:#ffb86b;\n --panel:#121a36; --card:#141c3f; --shadow: rgba(5,8,20,.35);\n }\n *{box-sizing:border-box}\n \/* --- Basic Setup --- *\/\n .bernoulli-body{\n font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,\"Helvetica Neue\",Arial;\n background:linear-gradient(180deg,var(--bg),#0f1630 40%, #0b1020);\n color:var(--fg);\n padding: 16px;\n }\n\n .wrap{max-width:1100px; margin:32px auto;}\n\n .grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:24px}\n @media (max-width: 980px){ .grid{grid-template-columns: 1fr;}}\n\n .card{background:linear-gradient(180deg,var(--card),#0f1735); border:1px solid rgba(255,255,255,.06); border-radius:18px; box-shadow:0 10px 30px var(--shadow); padding:18px}\n \n \/* --- MODIFICATION: Reduced font sizes for better fit --- *\/\n .bernoulli-h1{font-weight:800; letter-spacing:.2px; font-size: clamp(20px, 2.3vw, 30px); margin:0 0 6px}\n p.lead{margin:.25rem 0 1rem; color:var(--muted); font-size: 0.95rem;}\n\n \/* --- MODIFICATION: Made slider row more compact --- *\/\n .slider-row{display:grid; gap:12px; grid-template-columns: 130px 1fr 75px; align-items: center;}\n .slider-row label{font-weight:600; color:var(--muted); font-size: 0.9rem;}\n .slider-row output{font-variant-numeric: tabular-nums; font-weight:700; font-size: 0.9rem;}\n input[type=range]{width:100%}\n .sliders{display:grid; gap:14px}\n\n \/* --- Main Scene (Pipe + particle) --- *\/\n .scene{position:relative; height:240px; display:grid; place-items:center;}\n .pipe{position:relative; width:92%; height:80px; border-radius:999px; background:linear-gradient(180deg,#1b2553,#0c1331); outline:1px solid rgba(255,255,255,.06); box-shadow: inset 0 0 0 2px rgba(255,255,255,.05), inset 0 -10px 20px rgba(0,0,0,.35)}\n .pipe:before,.pipe:after{content:\"\"; position:absolute; inset:-10px; border-radius:999px; pointer-events:none}\n .pipe:after{inset:auto; left:0; right:0; bottom:-14px; height:14px; filter:blur(10px); background:linear-gradient(90deg, transparent, rgba(124,192,255,.25), transparent)}\n .fluid{position:absolute; inset:8px; border-radius:999px; background:linear-gradient(90deg, rgba(124,192,255,.25), rgba(157,255,176,.25)); box-shadow: inset 0 0 16px rgba(124,192,255,.35)}\n .particle{position:absolute; top:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #ffffff, #bfe7ff 40%, #86c9ff 60%, #4aa7ff 80%, #2e6ed1 100%); box-shadow: 0 0 20px rgba(124,192,255,.8), 0 0 40px rgba(124,192,255,.35)}\n\n .legend{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}\n .tag{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08)}\n .dot{width:10px; height:10px; border-radius:50%}\n .p{background:#86b6ff}\n .k{background:#9dffb0}\n .u{background:#ffd28a}\n\n \/* --- Equation board & Controls --- *\/\n \/* --- MODIFICATION: Reduced font size --- *\/\n .eqn{font-size: clamp(13px, 1.3vw, 17px); line-height:1.45; background:linear-gradient(180deg,#101736,#0d132b); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:14px 16px}\n .eqn .row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0}\n .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace}\n .val{font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:.3px}\n .unit{opacity:.75}\n .bump{display:inline-block; transition: transform .25s cubic-bezier(.2,.9,.2,1), filter .25s;}\n .bump.bumped{transform:translateY(-2px) scale(1.02); filter:drop-shadow(0 6px 8px rgba(124,192,255,.25))}\n\n .bars{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:10px}\n .bar{height:120px; border-radius:12px; background:rgba(255,255,255,.06); overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.07)}\n .bar > div{position:absolute; bottom:0; left:0; right:0}\n .bar.p > div{background:linear-gradient(180deg,#86b6ff,#3c79ff)}\n .bar.k > div{background:linear-gradient(180deg,#bfffd1,#57d37a)}\n .bar.u > div{background:linear-gradient(180deg,#ffe2ad,#ffb86b)}\n .bar label{position:absolute; top:8px; left:10px; font-size:12px; color:var(--muted)}\n\n small.hint{color:var(--muted); display:block; margin-top:8px}\n .note{color:var(--muted); margin-top:8px}\n\n \/* --- MODIFICATION: Added media query for small screens to stack slider elements --- *\/\n @media (max-width: 480px) {\n .slider-row {\n grid-template-columns: 1fr; \/* Stack label, slider, and output *\/\n gap: 8px;\n }\n }\n <\/style>\n<\/head>\n<body class=\"bernoulli-body\">\n\n <div class=\"wrap\">\n <h1 class=\"bernoulli-h1\">Bernoulli\u2019s Equation \u2014 Interactive Slider<\/h1>\n <p class=\"lead\">Steady flow of an ideal fluid: <span class=\"mono\">P + \u00bd \u03c1 v\u00b2 + \u03c1 g h = constant<\/span>. Move the sliders and watch the particle, the bar chart, and each term update in real-time.<\/p>\n\n <div class=\"grid\">\n \n <div class=\"card\">\n <div class=\"scene\">\n <div class=\"pipe\" id=\"pipe\">\n <div class=\"fluid\" id=\"fluid\"><\/div>\n <div class=\"particle\" id=\"particle\" aria-label=\"fluid particle\"><\/div>\n <\/div>\n <\/div>\n <div class=\"legend\">\n <span class=\"tag\"><span class=\"dot p\"><\/span><b>P<\/b> Pressure<\/span>\n <span class=\"tag\"><span class=\"dot k\"><\/span><b>\u00bd\u03c1v\u00b2<\/b> Kinetic<\/span>\n <span class=\"tag\"><span class=\"dot u\"><\/span><b>\u03c1gh<\/b> Potential<\/span>\n <\/div>\n <div class=\"bars\" aria-label=\"stacked bars for term magnitudes\">\n <div class=\"bar p\"><label>P<\/label><div id=\"barP\" style=\"height:50%\"><\/div><\/div>\n <div class=\"bar k\"><label>\u00bd\u03c1v\u00b2<\/label><div id=\"barK\" style=\"height:20%\"><\/div><\/div>\n <div class=\"bar u\"><label>\u03c1gh<\/label><div id=\"barU\" style=\"height:30%\"><\/div><\/div>\n <\/div>\n <small class=\"hint\">Bar heights are proportional to each term\u2019s magnitude. Total energy per unit volume stays constant.<\/small>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"sliders\">\n <div class=\"slider-row\">\n <label for=\"v\">Velocity v (m\/s)<\/label>\n <input id=\"v\" type=\"range\" min=\"0.1\" max=\"10\" step=\"0.1\" value=\"3\" \/>\n <output id=\"vOut\" class=\"mono\">3.0<\/output>\n <\/div>\n <div class=\"slider-row\">\n <label for=\"h\">Height h (m)<\/label>\n <input id=\"h\" type=\"range\" min=\"0\" max=\"10\" step=\"0.1\" value=\"2\" \/>\n <output id=\"hOut\" class=\"mono\">2.0<\/output>\n <\/div>\n <\/div>\n\n <div class=\"eqn\" aria-live=\"polite\" aria-atomic=\"true\">\n <div class=\"row\"><div><b>Bernoulli:<\/b> <span class=\"mono\">P + \u00bd\u03c1v\u00b2 + \u03c1gh = <span id=\"constVal\" class=\"val\">\u2014<\/span> <span class=\"unit\">Pa<\/span><\/span><\/div><\/div>\n <hr style=\"border:none;border-top:1px solid rgba(255,255,255,.08); margin:8px 0\">\n <div class=\"row\">\n <div><span class=\"bump\" id=\"pLabel\"><b>P<\/b> (pressure)<\/span><\/div>\n <div class=\"mono\"><span id=\"pVal\" class=\"val\">0<\/span> <span class=\"unit\">Pa<\/span><\/div>\n <\/div>\n <div class=\"row\">\n <div><span class=\"bump\" id=\"kLabel\"><b>\u00bd\u03c1v\u00b2<\/b> (kinetic)<\/span><\/div>\n <div class=\"mono\"><span id=\"kVal\" class=\"val\">0<\/span> <span class=\"unit\">Pa<\/span><\/div>\n <\/div>\n <div class=\"row\">\n <div><span class=\"bump\" id=\"uLabel\"><b>\u03c1gh<\/b> (potential)<\/span><\/div>\n <div class=\"mono\"><span id=\"uVal\" class=\"val\">0<\/span> <span class=\"unit\">Pa<\/span><\/div>\n <\/div>\n <p class=\"note mono\" id=\"note\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ --- Physical constants ---\n const rho = 1000; \/\/ kg\/m^3 (water)\n const g = 9.81; \/\/ m\/s^2\n\n \/\/ --- Elements ---\n const vSlider = document.getElementById('v');\n const hSlider = document.getElementById('h');\n const vOut = document.getElementById('vOut');\n const hOut = document.getElementById('hOut');\n\n const pVal = document.getElementById('pVal');\n const kVal = document.getElementById('kVal');\n const uVal = document.getElementById('uVal');\n const constVal = document.getElementById('constVal');\n const note = document.getElementById('note');\n\n const pLabel = document.getElementById('pLabel');\n const kLabel = document.getElementById('kLabel');\n const uLabel = document.getElementById('uLabel');\n\n const barP = document.getElementById('barP');\n const barK = document.getElementById('barK');\n const barU = document.getElementById('barU');\n\n const pipe = document.getElementById('pipe');\n const fluid = document.getElementById('fluid');\n const particle = document.getElementById('particle');\n\n \/\/ --- Helpers ---\n const fmt = x => x.toLocaleString(undefined,{maximumFractionDigits:0});\n\n \/\/ Smoothly animated numeric displays\n function makeAnimatedValue(el){\n let current = 0; let target = 0; let lastTime = performance.now();\n const speed = 8; \/\/ larger = faster catch-up\n function step(t){\n const dt = Math.min(1\/30, (t - lastTime)\/1000); \/\/ frame clamp\n lastTime = t;\n const diff = target - current;\n current += diff * Math.min(1, speed*dt);\n el.textContent = fmt(current);\n requestAnimationFrame(step);\n }\n requestAnimationFrame(step);\n return {\n set: (v)=>{target = v}\n };\n }\n\n const animP = makeAnimatedValue(pVal);\n const animK = makeAnimatedValue(kVal);\n const animU = makeAnimatedValue(uVal);\n\n \/\/ Bump animation on label when its value changes noticeably\n function bump(el){\n el.classList.remove('bumped');\n void el.offsetWidth; \/\/ reflow to restart animation\n el.classList.add('bumped');\n setTimeout(()=>el.classList.remove('bumped'), 280);\n }\n\n \/\/ Compute initial constant using baseline P0 plus initial sliders\n let v0 = parseFloat(vSlider.value);\n let h0 = parseFloat(hSlider.value);\n let P0 = 200000; \/\/ Pa baseline (keeps P positive over slider range)\n\n const K0 = 0.5 * rho * v0*v0;\n const U0 = rho * g * h0;\n const Econst = P0 + K0 + U0; \/\/ total energy per unit volume (constant)\n\n constVal.textContent = fmt(Econst);\n\n \/\/ Update visuals + numbers\n function update(){\n const v = parseFloat(vSlider.value);\n const h = parseFloat(hSlider.value);\n vOut.textContent = Number(v).toFixed(1);\n hOut.textContent = Number(h).toFixed(1);\n\n const K = 0.5 * rho * v*v;\n const U = rho * g * h;\n let P = Econst - K - U; \/\/ Bernoulli rearranged\n if(P < 0){ P = 0; note.textContent = '\u26a0\ufe0f Maxed out kinetic + potential; pressure floored at 0 for visualization.'; }\n else { note.textContent = ''; }\n\n \/\/ Animated counters\n animP.set(P); animK.set(K); animU.set(U);\n bump(pLabel); bump(kLabel); bump(uLabel);\n\n \/\/ Bars relative to constant\n const pH = Math.max(0, 100 * P \/ Econst);\n const kH = Math.max(0, 100 * K \/ Econst);\n const uH = Math.max(0, 100 * U \/ Econst);\n barP.style.height = pH + '%';\n barK.style.height = kH + '%';\n barU.style.height = uH + '%';\n\n \/\/ Pipe diameter ~ 1\/sqrt(v) to hint at continuity (qualitative)\n const baseH = 80; \/\/ px base pipe height\n const scale = Math.min(1.4, Math.max(0.45, 1\/Math.sqrt(v\/3))); \/\/ normalized around v0=3\n const pipeH = baseH * scale;\n pipe.style.height = pipeH + 'px';\n fluid.style.inset = Math.max(6, pipeH*0.1) + 'px';\n\n \/\/ Particle speed proportional to v\n targetSpeedPxPerSec = 80 + v*60; \/\/ px\/s\n }\n\n vSlider.addEventListener('input', update);\n hSlider.addEventListener('input', update);\n\n \/\/ Particle animation along the pipe\n let x = 0; \/\/ 0..1 across pipe width\n let targetSpeedPxPerSec = 80 + v0*60;\n let lastT = performance.now();\n\n function loop(t){\n const dt = Math.min(0.05, (t - lastT)\/1000);\n lastT = t;\n\n \/\/ move particle\n const pipeRect = pipe.getBoundingClientRect();\n const usable = pipeRect.width - 24; \/\/ margins so it stays inside\n const speed = targetSpeedPxPerSec; \/\/ px\/s\n x += (speed * dt) \/ usable;\n if(x>1) x -= 1;\n\n const px = pipeRect.left + 12 + x*usable;\n const py = pipeRect.top + pipeRect.height\/2;\n\n \/\/ position particle (using transform for performance)\n const localX = 12 + x*usable;\n particle.style.left = localX + 'px';\n\n requestAnimationFrame(loop);\n }\n\n \/\/ Kick things off\n update();\n requestAnimationFrame(loop);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bernoulli\u2019s Equation \u2014 Interactive Slider Bernoulli\u2019s Equation \u2014 Interactive Slider Steady flow of an ideal fluid: P + \u00bd \u03c1 v\u00b2 + \u03c1 g h = constant. Move the sliders and watch the particle, the bar chart, and each term update in real-time. P Pressure \u00bd\u03c1v\u00b2 Kinetic \u03c1gh Potential P \u00bd\u03c1v\u00b2 \u03c1gh Bar heights are […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-321","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=321"}],"version-history":[{"count":4,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/321\/revisions"}],"predecessor-version":[{"id":327,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/321\/revisions\/327"}],"wp:attachment":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":321,"date":"2025-09-10T10:09:20","date_gmt":"2025-09-10T10:09:20","guid":{"rendered":"https:\/\/learn-by-animation.com\/?page_id=321"},"modified":"2025-09-10T10:39:01","modified_gmt":"2025-09-10T10:39:01","slug":"bernoullis-equation-interactive-slider","status":"publish","type":"page","link":"https:\/\/learn-by-animation.com\/?page_id=321","title":{"rendered":"Bernoulli\u2019s Equation \u2014 Interactive Slider"},"content":{"rendered":"\n\n\n\n\n\n \n \n Bernoulli\u2019s Equation \u2014 Interactive Slider<\/title>\n <style>\n :root{\n --bg:#0b1020; --fg:#e9eef9; --muted:#9fb3d1; --accent:#7cc0ff; --accent2:#9dffb0; --warn:#ffb86b;\n --panel:#121a36; --card:#141c3f; --shadow: rgba(5,8,20,.35);\n }\n *{box-sizing:border-box}\n \/* --- Basic Setup --- *\/\n .bernoulli-body{\n font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,\"Helvetica Neue\",Arial;\n background:linear-gradient(180deg,var(--bg),#0f1630 40%, #0b1020);\n color:var(--fg);\n padding: 16px;\n }\n\n .wrap{max-width:1100px; margin:32px auto;}\n\n .grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:24px}\n @media (max-width: 980px){ .grid{grid-template-columns: 1fr;}}\n\n .card{background:linear-gradient(180deg,var(--card),#0f1735); border:1px solid rgba(255,255,255,.06); border-radius:18px; box-shadow:0 10px 30px var(--shadow); padding:18px}\n \n \/* --- MODIFICATION: Reduced font sizes for better fit --- *\/\n .bernoulli-h1{font-weight:800; letter-spacing:.2px; font-size: clamp(20px, 2.3vw, 30px); margin:0 0 6px}\n p.lead{margin:.25rem 0 1rem; color:var(--muted); font-size: 0.95rem;}\n\n \/* --- MODIFICATION: Made slider row more compact --- *\/\n .slider-row{display:grid; gap:12px; grid-template-columns: 130px 1fr 75px; align-items: center;}\n .slider-row label{font-weight:600; color:var(--muted); font-size: 0.9rem;}\n .slider-row output{font-variant-numeric: tabular-nums; font-weight:700; font-size: 0.9rem;}\n input[type=range]{width:100%}\n .sliders{display:grid; gap:14px}\n\n \/* --- Main Scene (Pipe + particle) --- *\/\n .scene{position:relative; height:240px; display:grid; place-items:center;}\n .pipe{position:relative; width:92%; height:80px; border-radius:999px; background:linear-gradient(180deg,#1b2553,#0c1331); outline:1px solid rgba(255,255,255,.06); box-shadow: inset 0 0 0 2px rgba(255,255,255,.05), inset 0 -10px 20px rgba(0,0,0,.35)}\n .pipe:before,.pipe:after{content:\"\"; position:absolute; inset:-10px; border-radius:999px; pointer-events:none}\n .pipe:after{inset:auto; left:0; right:0; bottom:-14px; height:14px; filter:blur(10px); background:linear-gradient(90deg, transparent, rgba(124,192,255,.25), transparent)}\n .fluid{position:absolute; inset:8px; border-radius:999px; background:linear-gradient(90deg, rgba(124,192,255,.25), rgba(157,255,176,.25)); box-shadow: inset 0 0 16px rgba(124,192,255,.35)}\n .particle{position:absolute; top:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #ffffff, #bfe7ff 40%, #86c9ff 60%, #4aa7ff 80%, #2e6ed1 100%); box-shadow: 0 0 20px rgba(124,192,255,.8), 0 0 40px rgba(124,192,255,.35)}\n\n .legend{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}\n .tag{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08)}\n .dot{width:10px; height:10px; border-radius:50%}\n .p{background:#86b6ff}\n .k{background:#9dffb0}\n .u{background:#ffd28a}\n\n \/* --- Equation board & Controls --- *\/\n \/* --- MODIFICATION: Reduced font size --- *\/\n .eqn{font-size: clamp(13px, 1.3vw, 17px); line-height:1.45; background:linear-gradient(180deg,#101736,#0d132b); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:14px 16px}\n .eqn .row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0}\n .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace}\n .val{font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:.3px}\n .unit{opacity:.75}\n .bump{display:inline-block; transition: transform .25s cubic-bezier(.2,.9,.2,1), filter .25s;}\n .bump.bumped{transform:translateY(-2px) scale(1.02); filter:drop-shadow(0 6px 8px rgba(124,192,255,.25))}\n\n .bars{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:10px}\n .bar{height:120px; border-radius:12px; background:rgba(255,255,255,.06); overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.07)}\n .bar > div{position:absolute; bottom:0; left:0; right:0}\n .bar.p > div{background:linear-gradient(180deg,#86b6ff,#3c79ff)}\n .bar.k > div{background:linear-gradient(180deg,#bfffd1,#57d37a)}\n .bar.u > div{background:linear-gradient(180deg,#ffe2ad,#ffb86b)}\n .bar label{position:absolute; top:8px; left:10px; font-size:12px; color:var(--muted)}\n\n small.hint{color:var(--muted); display:block; margin-top:8px}\n .note{color:var(--muted); margin-top:8px}\n\n \/* --- MODIFICATION: Added media query for small screens to stack slider elements --- *\/\n @media (max-width: 480px) {\n .slider-row {\n grid-template-columns: 1fr; \/* Stack label, slider, and output *\/\n gap: 8px;\n }\n }\n <\/style>\n<\/head>\n<body class=\"bernoulli-body\">\n\n <div class=\"wrap\">\n <h1 class=\"bernoulli-h1\">Bernoulli\u2019s Equation \u2014 Interactive Slider<\/h1>\n <p class=\"lead\">Steady flow of an ideal fluid: <span class=\"mono\">P + \u00bd \u03c1 v\u00b2 + \u03c1 g h = constant<\/span>. Move the sliders and watch the particle, the bar chart, and each term update in real-time.<\/p>\n\n <div class=\"grid\">\n \n <div class=\"card\">\n <div class=\"scene\">\n <div class=\"pipe\" id=\"pipe\">\n <div class=\"fluid\" id=\"fluid\"><\/div>\n <div class=\"particle\" id=\"particle\" aria-label=\"fluid particle\"><\/div>\n <\/div>\n <\/div>\n <div class=\"legend\">\n <span class=\"tag\"><span class=\"dot p\"><\/span><b>P<\/b> Pressure<\/span>\n <span class=\"tag\"><span class=\"dot k\"><\/span><b>\u00bd\u03c1v\u00b2<\/b> Kinetic<\/span>\n <span class=\"tag\"><span class=\"dot u\"><\/span><b>\u03c1gh<\/b> Potential<\/span>\n <\/div>\n <div class=\"bars\" aria-label=\"stacked bars for term magnitudes\">\n <div class=\"bar p\"><label>P<\/label><div id=\"barP\" style=\"height:50%\"><\/div><\/div>\n <div class=\"bar k\"><label>\u00bd\u03c1v\u00b2<\/label><div id=\"barK\" style=\"height:20%\"><\/div><\/div>\n <div class=\"bar u\"><label>\u03c1gh<\/label><div id=\"barU\" style=\"height:30%\"><\/div><\/div>\n <\/div>\n <small class=\"hint\">Bar heights are proportional to each term\u2019s magnitude. Total energy per unit volume stays constant.<\/small>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"sliders\">\n <div class=\"slider-row\">\n <label for=\"v\">Velocity v (m\/s)<\/label>\n <input id=\"v\" type=\"range\" min=\"0.1\" max=\"10\" step=\"0.1\" value=\"3\" \/>\n <output id=\"vOut\" class=\"mono\">3.0<\/output>\n <\/div>\n <div class=\"slider-row\">\n <label for=\"h\">Height h (m)<\/label>\n <input id=\"h\" type=\"range\" min=\"0\" max=\"10\" step=\"0.1\" value=\"2\" \/>\n <output id=\"hOut\" class=\"mono\">2.0<\/output>\n <\/div>\n <\/div>\n\n <div class=\"eqn\" aria-live=\"polite\" aria-atomic=\"true\">\n <div class=\"row\"><div><b>Bernoulli:<\/b> <span class=\"mono\">P + \u00bd\u03c1v\u00b2 + \u03c1gh = <span id=\"constVal\" class=\"val\">\u2014<\/span> <span class=\"unit\">Pa<\/span><\/span><\/div><\/div>\n <hr style=\"border:none;border-top:1px solid rgba(255,255,255,.08); margin:8px 0\">\n <div class=\"row\">\n <div><span class=\"bump\" id=\"pLabel\"><b>P<\/b> (pressure)<\/span><\/div>\n <div class=\"mono\"><span id=\"pVal\" class=\"val\">0<\/span> <span class=\"unit\">Pa<\/span><\/div>\n <\/div>\n <div class=\"row\">\n <div><span class=\"bump\" id=\"kLabel\"><b>\u00bd\u03c1v\u00b2<\/b> (kinetic)<\/span><\/div>\n <div class=\"mono\"><span id=\"kVal\" class=\"val\">0<\/span> <span class=\"unit\">Pa<\/span><\/div>\n <\/div>\n <div class=\"row\">\n <div><span class=\"bump\" id=\"uLabel\"><b>\u03c1gh<\/b> (potential)<\/span><\/div>\n <div class=\"mono\"><span id=\"uVal\" class=\"val\">0<\/span> <span class=\"unit\">Pa<\/span><\/div>\n <\/div>\n <p class=\"note mono\" id=\"note\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ --- Physical constants ---\n const rho = 1000; \/\/ kg\/m^3 (water)\n const g = 9.81; \/\/ m\/s^2\n\n \/\/ --- Elements ---\n const vSlider = document.getElementById('v');\n const hSlider = document.getElementById('h');\n const vOut = document.getElementById('vOut');\n const hOut = document.getElementById('hOut');\n\n const pVal = document.getElementById('pVal');\n const kVal = document.getElementById('kVal');\n const uVal = document.getElementById('uVal');\n const constVal = document.getElementById('constVal');\n const note = document.getElementById('note');\n\n const pLabel = document.getElementById('pLabel');\n const kLabel = document.getElementById('kLabel');\n const uLabel = document.getElementById('uLabel');\n\n const barP = document.getElementById('barP');\n const barK = document.getElementById('barK');\n const barU = document.getElementById('barU');\n\n const pipe = document.getElementById('pipe');\n const fluid = document.getElementById('fluid');\n const particle = document.getElementById('particle');\n\n \/\/ --- Helpers ---\n const fmt = x => x.toLocaleString(undefined,{maximumFractionDigits:0});\n\n \/\/ Smoothly animated numeric displays\n function makeAnimatedValue(el){\n let current = 0; let target = 0; let lastTime = performance.now();\n const speed = 8; \/\/ larger = faster catch-up\n function step(t){\n const dt = Math.min(1\/30, (t - lastTime)\/1000); \/\/ frame clamp\n lastTime = t;\n const diff = target - current;\n current += diff * Math.min(1, speed*dt);\n el.textContent = fmt(current);\n requestAnimationFrame(step);\n }\n requestAnimationFrame(step);\n return {\n set: (v)=>{target = v}\n };\n }\n\n const animP = makeAnimatedValue(pVal);\n const animK = makeAnimatedValue(kVal);\n const animU = makeAnimatedValue(uVal);\n\n \/\/ Bump animation on label when its value changes noticeably\n function bump(el){\n el.classList.remove('bumped');\n void el.offsetWidth; \/\/ reflow to restart animation\n el.classList.add('bumped');\n setTimeout(()=>el.classList.remove('bumped'), 280);\n }\n\n \/\/ Compute initial constant using baseline P0 plus initial sliders\n let v0 = parseFloat(vSlider.value);\n let h0 = parseFloat(hSlider.value);\n let P0 = 200000; \/\/ Pa baseline (keeps P positive over slider range)\n\n const K0 = 0.5 * rho * v0*v0;\n const U0 = rho * g * h0;\n const Econst = P0 + K0 + U0; \/\/ total energy per unit volume (constant)\n\n constVal.textContent = fmt(Econst);\n\n \/\/ Update visuals + numbers\n function update(){\n const v = parseFloat(vSlider.value);\n const h = parseFloat(hSlider.value);\n vOut.textContent = Number(v).toFixed(1);\n hOut.textContent = Number(h).toFixed(1);\n\n const K = 0.5 * rho * v*v;\n const U = rho * g * h;\n let P = Econst - K - U; \/\/ Bernoulli rearranged\n if(P < 0){ P = 0; note.textContent = '\u26a0\ufe0f Maxed out kinetic + potential; pressure floored at 0 for visualization.'; }\n else { note.textContent = ''; }\n\n \/\/ Animated counters\n animP.set(P); animK.set(K); animU.set(U);\n bump(pLabel); bump(kLabel); bump(uLabel);\n\n \/\/ Bars relative to constant\n const pH = Math.max(0, 100 * P \/ Econst);\n const kH = Math.max(0, 100 * K \/ Econst);\n const uH = Math.max(0, 100 * U \/ Econst);\n barP.style.height = pH + '%';\n barK.style.height = kH + '%';\n barU.style.height = uH + '%';\n\n \/\/ Pipe diameter ~ 1\/sqrt(v) to hint at continuity (qualitative)\n const baseH = 80; \/\/ px base pipe height\n const scale = Math.min(1.4, Math.max(0.45, 1\/Math.sqrt(v\/3))); \/\/ normalized around v0=3\n const pipeH = baseH * scale;\n pipe.style.height = pipeH + 'px';\n fluid.style.inset = Math.max(6, pipeH*0.1) + 'px';\n\n \/\/ Particle speed proportional to v\n targetSpeedPxPerSec = 80 + v*60; \/\/ px\/s\n }\n\n vSlider.addEventListener('input', update);\n hSlider.addEventListener('input', update);\n\n \/\/ Particle animation along the pipe\n let x = 0; \/\/ 0..1 across pipe width\n let targetSpeedPxPerSec = 80 + v0*60;\n let lastT = performance.now();\n\n function loop(t){\n const dt = Math.min(0.05, (t - lastT)\/1000);\n lastT = t;\n\n \/\/ move particle\n const pipeRect = pipe.getBoundingClientRect();\n const usable = pipeRect.width - 24; \/\/ margins so it stays inside\n const speed = targetSpeedPxPerSec; \/\/ px\/s\n x += (speed * dt) \/ usable;\n if(x>1) x -= 1;\n\n const px = pipeRect.left + 12 + x*usable;\n const py = pipeRect.top + pipeRect.height\/2;\n\n \/\/ position particle (using transform for performance)\n const localX = 12 + x*usable;\n particle.style.left = localX + 'px';\n\n requestAnimationFrame(loop);\n }\n\n \/\/ Kick things off\n update();\n requestAnimationFrame(loop);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bernoulli\u2019s Equation \u2014 Interactive Slider Bernoulli\u2019s Equation \u2014 Interactive Slider Steady flow of an ideal fluid: P + \u00bd \u03c1 v\u00b2 + \u03c1 g h = constant. Move the sliders and watch the particle, the bar chart, and each term update in real-time. P Pressure \u00bd\u03c1v\u00b2 Kinetic \u03c1gh Potential P \u00bd\u03c1v\u00b2 \u03c1gh Bar heights are […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-321","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=321"}],"version-history":[{"count":4,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/321\/revisions"}],"predecessor-version":[{"id":327,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/321\/revisions\/327"}],"wp:attachment":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}