The Gas Party: Interactive Physics<\/title>\n <style>\n \/* --- Basic Setup & Fonts --- *\/\n .gas-party-body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: flex-start; \/* Align to top *\/\n min-height: 100vh;\n background-color: #f0f2f5;\n color: #333;\n margin: 0;\n padding: 15px;\n box-sizing: border-box;\n font-size: 14px; \/* Reduced base font size *\/\n }\n\n \/* Single-column content wrapper *\/\n .content-wrapper {\n max-width: 600px; \/* Narrower for single column *\/\n width: 100%;\n background: #fff;\n padding: 20px; \/* Reduced padding *\/\n border-radius: 12px;\n box-shadow: 0 6px 20px rgba(0,0,0,0.1);\n }\n\n .gas-party-h1 {\n color: #1a237e;\n border-bottom: 2px solid #3f51b5;\n padding-bottom: 8px; \/* Reduced padding *\/\n margin-top: 0;\n width: 100%;\n text-align: center;\n margin-bottom: 15px; \/* Reduced margin *\/\n font-size: 1.5em; \/* Reduced font size *\/\n }\n\n \/* --- The Main Stage --- *\/\n #animation-container {\n width: 100%;\n height: 250px; \/* Significantly reduced height *\/\n border: 2px solid #3f51b5;\n background-color: #e8eaf6;\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n margin-bottom: 15px;\n }\n h2 { \n color: #1a237e;\n margin-top: 0;\n margin-bottom: 10px;\n font-size: 1.2em; \/* Reduced font size *\/\n }\n\n \/* --- The Molecules & Atoms --- *\/\n .molecule { position: absolute; border-radius: 50%; }\n .helium { width: 8px; height: 8px; background-color: #e53935; }\n .hydrogen-couple { position: absolute; }\n .hydrogen-atom { position: absolute; width: 7px; height: 7px; background-color: #1e88e5; border-radius: 50%; }\n\n \/* --- Controls & Explanation --- *\/\n #controls {\n margin-bottom: 15px;\n }\n .slider-group {\n margin-bottom: 10px; \/* Reduced margin *\/\n }\n .slider-group label {\n display: block;\n font-weight: bold;\n margin-bottom: 4px;\n }\n input[type=\"range\"] {\n width: 100%;\n cursor: pointer;\n }\n .value-display {\n font-weight: bold;\n color: #d81b60;\n }\n #explanation-box {\n display: flex; \/* Flexbox to arrange boxes side-by-side if they fit *\/\n flex-wrap: wrap;\n gap: 15px;\n }\n .info-box {\n padding: 10px; \/* Reduced padding *\/\n border-radius: 5px;\n flex: 1; \/* Allow boxes to share space *\/\n min-width: 250px; \/* Prevent them from becoming too narrow *\/\n }\n .calculation-box {\n background-color: #f1f8e9;\n border-left: 4px solid #7cb342;\n }\n .formula-box {\n background-color: #e3f2fd;\n border-left: 4px solid #1976d2;\n }\n .info-box p {\n margin: 5px 0; \/* Reduced margin *\/\n line-height: 1.5; \/* Tighter line height *\/\n }\n hr {\n border: 0;\n border-top: 1px solid #ccc;\n margin: 8px 0; \/* Reduced margin *\/\n }\n code {\n background-color: #d1c4e9;\n padding: 2px 5px;\n border-radius: 4px;\n font-family: 'Courier New', Courier, monospace;\n }\n <\/style>\n<\/head>\n<body class=\"gas-party-body\">\n\n<div class=\"content-wrapper\">\n <h1 class=\"gas-party-h1\">The Gas Party Trick \ud83c\udf89<\/h1>\n\n <div id=\"controls\">\n <p style=\"margin-top:0; margin-bottom:10px;\">Adjust the gas amounts and the temperature change to see how much energy is needed to liven up the party!<\/p>\n <div class=\"slider-group\">\n <label for=\"hydrogen-slider\">Hydrogen (H\u2082): <span class=\"value-display\" id=\"h2-grams\">10<\/span> g<\/label>\n <input type=\"range\" id=\"hydrogen-slider\" min=\"0\" max=\"50\" value=\"10\" step=\"1\">\n <\/div>\n <div class=\"slider-group\">\n <label for=\"helium-slider\">Helium (He): <span class=\"value-display\" id=\"he-grams\">40<\/span> g<\/label>\n <input type=\"range\" id=\"helium-slider\" min=\"0\" max=\"100\" value=\"40\" step=\"1\">\n <\/div>\n <div class=\"slider-group\">\n <label for=\"temp-slider\">Temperature Increase: <span class=\"value-display\" id=\"temp-change\">50<\/span> \u00b0C<\/label>\n <input type=\"range\" id=\"temp-slider\" min=\"1\" max=\"100\" value=\"50\" step=\"1\">\n <\/div>\n <\/div>\n \n <h2>The Party Hall (Closed Vessel)<\/h2>\n <div id=\"animation-container\"><\/div>\n \n <div id=\"explanation-box\">\n <div class=\"info-box calculation-box\">\n <h2>Live Calculation<\/h2>\n <p><strong>Moles:<\/strong> H\u2082: <span id=\"h2-moles-calc\">5.00<\/span> | He: <span id=\"he-moles-calc\">10.00<\/span><\/p>\n <hr>\n <p><strong>Heat:<\/strong> H\u2082: <span id=\"h2-heat-calc\">1250<\/span> cal | He: <span id=\"he-heat-calc\">1500<\/span> cal<\/p>\n <hr>\n <p><strong>Total Energy Needed: <span class=\"value-display\" id=\"total-heat\">2750<\/span> cal<\/strong><\/p>\n <\/div>\n <div class=\"info-box formula-box\">\n <h2>The Physics<\/h2>\n <p><code>\u0394Q = n * Cv * \u0394T<\/code><\/p>\n <ul>\n <li style=\"margin-bottom:3px;\">H\u2082 (Diatomic): <code>Cv = 5 cal\/mol K<\/code><\/li>\n <li>He (Monatomic): <code>Cv = 3 cal\/mol K<\/code><\/li>\n <\/ul>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n(function() {\n \/\/ --- DOM Elements ---\n const h2Slider = document.getElementById('hydrogen-slider');\n const heSlider = document.getElementById('helium-slider');\n const tempSlider = document.getElementById('temp-slider');\n const canvas = document.getElementById('animation-container');\n\n \/\/ --- Display Spans ---\n const h2GramsDisplay = document.getElementById('h2-grams');\n const heGramsDisplay = document.getElementById('he-grams');\n const tempChangeDisplay = document.getElementById('temp-change');\n const totalHeatDisplay = document.getElementById('total-heat');\n \n \/\/ Calculation step spans\n const h2MolesCalc = document.getElementById('h2-moles-calc');\n const heMolesCalc = document.getElementById('he-moles-calc');\n const h2HeatCalc = document.getElementById('h2-heat-calc');\n const heHeatCalc = document.getElementById('he-heat-calc');\n\n \/\/ --- Constants ---\n const R = 2; \/\/ cal\/mole K\n const MOLAR_MASS_H2 = 2; \/\/ g\/mol\n const MOLAR_MASS_HE = 4; \/\/ g\/mol\n const CV_H2 = (5 \/ 2) * R; \/\/ Diatomic\n const CV_HE = (3 \/ 2) * R; \/\/ Monatomic\n\n let molecules = [];\n let animationSpeed = 1;\n\n function calculate() {\n const h2Grams = parseFloat(h2Slider.value);\n const heGrams = parseFloat(heSlider.value);\n const tempChange = parseFloat(tempSlider.value);\n\n const h2Moles = h2Grams \/ MOLAR_MASS_H2;\n const heMoles = heGrams \/ MOLAR_MASS_HE;\n const h2Heat = h2Moles * CV_H2 * tempChange;\n const heHeat = heMoles * CV_HE * tempChange;\n const totalHeat = h2Heat + heHeat;\n \n h2GramsDisplay.textContent = h2Grams;\n heGramsDisplay.textContent = heGrams;\n tempChangeDisplay.textContent = tempChange;\n totalHeatDisplay.textContent = Math.round(totalHeat);\n\n h2MolesCalc.textContent = `${h2Moles.toFixed(2)} moles`;\n heMolesCalc.textContent = `${heMoles.toFixed(2)} moles`;\n h2HeatCalc.textContent = `${Math.round(h2Heat)}`;\n heHeatCalc.textContent = `${Math.round(heHeat)}`;\n\n updateMoleculeCount(h2Moles, heMoles);\n animationSpeed = 1 + (totalHeat \/ 4000); \n }\n\n function createMolecule(type) {\n const canvasRect = canvas.getBoundingClientRect();\n let element;\n if (type === 'helium') {\n element = document.createElement('div');\n element.className = 'molecule helium';\n } else { \n element = document.createElement('div');\n element.className = 'hydrogen-couple';\n const atom1 = document.createElement('div');\n atom1.className = 'hydrogen-atom';\n atom1.style.top = '0px'; atom1.style.left = '-4px';\n const atom2 = document.createElement('div');\n atom2.className = 'hydrogen-atom';\n atom2.style.top = '0px'; atom2.style.left = '4px';\n element.appendChild(atom1);\n element.appendChild(atom2);\n }\n\n const molecule = {\n element: element,\n x: Math.random() * (canvasRect.width - 15),\n y: Math.random() * (canvasRect.height - 15),\n vx: (Math.random() - 0.5) * 2,\n vy: (Math.random() - 0.5) * 2,\n };\n \n canvas.appendChild(element);\n return molecule;\n }\n \n function updateMoleculeCount(h2Moles, heMoles) {\n const h2Count = Math.min(Math.round(h2Moles * 2), 50); \/\/ Scale down for visuals\n const heCount = Math.min(Math.round(heMoles * 2), 50); \/\/ Cap at 50 each\n \n canvas.innerHTML = '';\n molecules = [];\n \n for(let i=0; i<h2Count; i++) molecules.push(createMolecule('hydrogen'));\n for(let i=0; i<heCount; i++) molecules.push(createMolecule('helium'));\n }\n\n function animate() {\n const canvasRect = canvas.getBoundingClientRect();\n if (canvasRect.width === 0) { \/\/ Don't run if hidden\n requestAnimationFrame(animate);\n return;\n }\n \n molecules.forEach(m => {\n m.x += m.vx * animationSpeed;\n m.y += m.vy * animationSpeed;\n\n if (m.x <= 0 || m.x >= canvasRect.width - 15) m.vx *= -1;\n if (m.y <= 0 || m.y >= canvasRect.height - 15) m.vy *= -1;\n \n const jiggleX = (Math.random() - 0.5) * animationSpeed * 0.5;\n const jiggleY = (Math.random() - 0.5) * animationSpeed * 0.5;\n\n m.element.style.transform = `translate(${m.x + jiggleX}px, ${m.y + jiggleY}px)`;\n });\n\n requestAnimationFrame(animate);\n }\n\n \/\/ --- Event Listeners ---\n h2Slider.addEventListener('input', calculate);\n heSlider.addEventListener('input', calculate);\n tempSlider.addEventListener('input', calculate);\n\n \/\/ --- Initial Setup ---\n \/\/ Use a small delay to ensure layout is calculated, especially if in a dropdown\n setTimeout(() => {\n calculate();\n animate();\n }, 100);\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Gas Party: Interactive Physics The Gas Party Trick \ud83c\udf89 Adjust the gas amounts and the temperature change to see how much energy is needed to liven up the party! Hydrogen (H\u2082): 10 g Helium (He): 40 g Temperature Increase: 50 \u00b0C The Party Hall (Closed Vessel) Live Calculation Moles: H\u2082: 5.00 | He: 10.00 […]<\/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-213","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/213","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=213"}],"version-history":[{"count":6,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/213\/revisions"}],"predecessor-version":[{"id":248,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/213\/revisions\/248"}],"wp:attachment":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":213,"date":"2025-09-06T15:05:29","date_gmt":"2025-09-06T15:05:29","guid":{"rendered":"https:\/\/learn-by-animation.com\/?page_id=213"},"modified":"2025-09-08T14:29:23","modified_gmt":"2025-09-08T14:29:23","slug":"animationth1","status":"publish","type":"page","link":"https:\/\/learn-by-animation.com\/?page_id=213","title":{"rendered":"Animation for Thermodynamics Practise Q1"},"content":{"rendered":"\n\n\n\n\n \n \n The Gas Party: Interactive Physics<\/title>\n <style>\n \/* --- Basic Setup & Fonts --- *\/\n .gas-party-body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: flex-start; \/* Align to top *\/\n min-height: 100vh;\n background-color: #f0f2f5;\n color: #333;\n margin: 0;\n padding: 15px;\n box-sizing: border-box;\n font-size: 14px; \/* Reduced base font size *\/\n }\n\n \/* Single-column content wrapper *\/\n .content-wrapper {\n max-width: 600px; \/* Narrower for single column *\/\n width: 100%;\n background: #fff;\n padding: 20px; \/* Reduced padding *\/\n border-radius: 12px;\n box-shadow: 0 6px 20px rgba(0,0,0,0.1);\n }\n\n .gas-party-h1 {\n color: #1a237e;\n border-bottom: 2px solid #3f51b5;\n padding-bottom: 8px; \/* Reduced padding *\/\n margin-top: 0;\n width: 100%;\n text-align: center;\n margin-bottom: 15px; \/* Reduced margin *\/\n font-size: 1.5em; \/* Reduced font size *\/\n }\n\n \/* --- The Main Stage --- *\/\n #animation-container {\n width: 100%;\n height: 250px; \/* Significantly reduced height *\/\n border: 2px solid #3f51b5;\n background-color: #e8eaf6;\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n margin-bottom: 15px;\n }\n h2 { \n color: #1a237e;\n margin-top: 0;\n margin-bottom: 10px;\n font-size: 1.2em; \/* Reduced font size *\/\n }\n\n \/* --- The Molecules & Atoms --- *\/\n .molecule { position: absolute; border-radius: 50%; }\n .helium { width: 8px; height: 8px; background-color: #e53935; }\n .hydrogen-couple { position: absolute; }\n .hydrogen-atom { position: absolute; width: 7px; height: 7px; background-color: #1e88e5; border-radius: 50%; }\n\n \/* --- Controls & Explanation --- *\/\n #controls {\n margin-bottom: 15px;\n }\n .slider-group {\n margin-bottom: 10px; \/* Reduced margin *\/\n }\n .slider-group label {\n display: block;\n font-weight: bold;\n margin-bottom: 4px;\n }\n input[type=\"range\"] {\n width: 100%;\n cursor: pointer;\n }\n .value-display {\n font-weight: bold;\n color: #d81b60;\n }\n #explanation-box {\n display: flex; \/* Flexbox to arrange boxes side-by-side if they fit *\/\n flex-wrap: wrap;\n gap: 15px;\n }\n .info-box {\n padding: 10px; \/* Reduced padding *\/\n border-radius: 5px;\n flex: 1; \/* Allow boxes to share space *\/\n min-width: 250px; \/* Prevent them from becoming too narrow *\/\n }\n .calculation-box {\n background-color: #f1f8e9;\n border-left: 4px solid #7cb342;\n }\n .formula-box {\n background-color: #e3f2fd;\n border-left: 4px solid #1976d2;\n }\n .info-box p {\n margin: 5px 0; \/* Reduced margin *\/\n line-height: 1.5; \/* Tighter line height *\/\n }\n hr {\n border: 0;\n border-top: 1px solid #ccc;\n margin: 8px 0; \/* Reduced margin *\/\n }\n code {\n background-color: #d1c4e9;\n padding: 2px 5px;\n border-radius: 4px;\n font-family: 'Courier New', Courier, monospace;\n }\n <\/style>\n<\/head>\n<body class=\"gas-party-body\">\n\n<div class=\"content-wrapper\">\n <h1 class=\"gas-party-h1\">The Gas Party Trick \ud83c\udf89<\/h1>\n\n <div id=\"controls\">\n <p style=\"margin-top:0; margin-bottom:10px;\">Adjust the gas amounts and the temperature change to see how much energy is needed to liven up the party!<\/p>\n <div class=\"slider-group\">\n <label for=\"hydrogen-slider\">Hydrogen (H\u2082): <span class=\"value-display\" id=\"h2-grams\">10<\/span> g<\/label>\n <input type=\"range\" id=\"hydrogen-slider\" min=\"0\" max=\"50\" value=\"10\" step=\"1\">\n <\/div>\n <div class=\"slider-group\">\n <label for=\"helium-slider\">Helium (He): <span class=\"value-display\" id=\"he-grams\">40<\/span> g<\/label>\n <input type=\"range\" id=\"helium-slider\" min=\"0\" max=\"100\" value=\"40\" step=\"1\">\n <\/div>\n <div class=\"slider-group\">\n <label for=\"temp-slider\">Temperature Increase: <span class=\"value-display\" id=\"temp-change\">50<\/span> \u00b0C<\/label>\n <input type=\"range\" id=\"temp-slider\" min=\"1\" max=\"100\" value=\"50\" step=\"1\">\n <\/div>\n <\/div>\n \n <h2>The Party Hall (Closed Vessel)<\/h2>\n <div id=\"animation-container\"><\/div>\n \n <div id=\"explanation-box\">\n <div class=\"info-box calculation-box\">\n <h2>Live Calculation<\/h2>\n <p><strong>Moles:<\/strong> H\u2082: <span id=\"h2-moles-calc\">5.00<\/span> | He: <span id=\"he-moles-calc\">10.00<\/span><\/p>\n <hr>\n <p><strong>Heat:<\/strong> H\u2082: <span id=\"h2-heat-calc\">1250<\/span> cal | He: <span id=\"he-heat-calc\">1500<\/span> cal<\/p>\n <hr>\n <p><strong>Total Energy Needed: <span class=\"value-display\" id=\"total-heat\">2750<\/span> cal<\/strong><\/p>\n <\/div>\n <div class=\"info-box formula-box\">\n <h2>The Physics<\/h2>\n <p><code>\u0394Q = n * Cv * \u0394T<\/code><\/p>\n <ul>\n <li style=\"margin-bottom:3px;\">H\u2082 (Diatomic): <code>Cv = 5 cal\/mol K<\/code><\/li>\n <li>He (Monatomic): <code>Cv = 3 cal\/mol K<\/code><\/li>\n <\/ul>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n(function() {\n \/\/ --- DOM Elements ---\n const h2Slider = document.getElementById('hydrogen-slider');\n const heSlider = document.getElementById('helium-slider');\n const tempSlider = document.getElementById('temp-slider');\n const canvas = document.getElementById('animation-container');\n\n \/\/ --- Display Spans ---\n const h2GramsDisplay = document.getElementById('h2-grams');\n const heGramsDisplay = document.getElementById('he-grams');\n const tempChangeDisplay = document.getElementById('temp-change');\n const totalHeatDisplay = document.getElementById('total-heat');\n \n \/\/ Calculation step spans\n const h2MolesCalc = document.getElementById('h2-moles-calc');\n const heMolesCalc = document.getElementById('he-moles-calc');\n const h2HeatCalc = document.getElementById('h2-heat-calc');\n const heHeatCalc = document.getElementById('he-heat-calc');\n\n \/\/ --- Constants ---\n const R = 2; \/\/ cal\/mole K\n const MOLAR_MASS_H2 = 2; \/\/ g\/mol\n const MOLAR_MASS_HE = 4; \/\/ g\/mol\n const CV_H2 = (5 \/ 2) * R; \/\/ Diatomic\n const CV_HE = (3 \/ 2) * R; \/\/ Monatomic\n\n let molecules = [];\n let animationSpeed = 1;\n\n function calculate() {\n const h2Grams = parseFloat(h2Slider.value);\n const heGrams = parseFloat(heSlider.value);\n const tempChange = parseFloat(tempSlider.value);\n\n const h2Moles = h2Grams \/ MOLAR_MASS_H2;\n const heMoles = heGrams \/ MOLAR_MASS_HE;\n const h2Heat = h2Moles * CV_H2 * tempChange;\n const heHeat = heMoles * CV_HE * tempChange;\n const totalHeat = h2Heat + heHeat;\n \n h2GramsDisplay.textContent = h2Grams;\n heGramsDisplay.textContent = heGrams;\n tempChangeDisplay.textContent = tempChange;\n totalHeatDisplay.textContent = Math.round(totalHeat);\n\n h2MolesCalc.textContent = `${h2Moles.toFixed(2)} moles`;\n heMolesCalc.textContent = `${heMoles.toFixed(2)} moles`;\n h2HeatCalc.textContent = `${Math.round(h2Heat)}`;\n heHeatCalc.textContent = `${Math.round(heHeat)}`;\n\n updateMoleculeCount(h2Moles, heMoles);\n animationSpeed = 1 + (totalHeat \/ 4000); \n }\n\n function createMolecule(type) {\n const canvasRect = canvas.getBoundingClientRect();\n let element;\n if (type === 'helium') {\n element = document.createElement('div');\n element.className = 'molecule helium';\n } else { \n element = document.createElement('div');\n element.className = 'hydrogen-couple';\n const atom1 = document.createElement('div');\n atom1.className = 'hydrogen-atom';\n atom1.style.top = '0px'; atom1.style.left = '-4px';\n const atom2 = document.createElement('div');\n atom2.className = 'hydrogen-atom';\n atom2.style.top = '0px'; atom2.style.left = '4px';\n element.appendChild(atom1);\n element.appendChild(atom2);\n }\n\n const molecule = {\n element: element,\n x: Math.random() * (canvasRect.width - 15),\n y: Math.random() * (canvasRect.height - 15),\n vx: (Math.random() - 0.5) * 2,\n vy: (Math.random() - 0.5) * 2,\n };\n \n canvas.appendChild(element);\n return molecule;\n }\n \n function updateMoleculeCount(h2Moles, heMoles) {\n const h2Count = Math.min(Math.round(h2Moles * 2), 50); \/\/ Scale down for visuals\n const heCount = Math.min(Math.round(heMoles * 2), 50); \/\/ Cap at 50 each\n \n canvas.innerHTML = '';\n molecules = [];\n \n for(let i=0; i<h2Count; i++) molecules.push(createMolecule('hydrogen'));\n for(let i=0; i<heCount; i++) molecules.push(createMolecule('helium'));\n }\n\n function animate() {\n const canvasRect = canvas.getBoundingClientRect();\n if (canvasRect.width === 0) { \/\/ Don't run if hidden\n requestAnimationFrame(animate);\n return;\n }\n \n molecules.forEach(m => {\n m.x += m.vx * animationSpeed;\n m.y += m.vy * animationSpeed;\n\n if (m.x <= 0 || m.x >= canvasRect.width - 15) m.vx *= -1;\n if (m.y <= 0 || m.y >= canvasRect.height - 15) m.vy *= -1;\n \n const jiggleX = (Math.random() - 0.5) * animationSpeed * 0.5;\n const jiggleY = (Math.random() - 0.5) * animationSpeed * 0.5;\n\n m.element.style.transform = `translate(${m.x + jiggleX}px, ${m.y + jiggleY}px)`;\n });\n\n requestAnimationFrame(animate);\n }\n\n \/\/ --- Event Listeners ---\n h2Slider.addEventListener('input', calculate);\n heSlider.addEventListener('input', calculate);\n tempSlider.addEventListener('input', calculate);\n\n \/\/ --- Initial Setup ---\n \/\/ Use a small delay to ensure layout is calculated, especially if in a dropdown\n setTimeout(() => {\n calculate();\n animate();\n }, 100);\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Gas Party: Interactive Physics The Gas Party Trick \ud83c\udf89 Adjust the gas amounts and the temperature change to see how much energy is needed to liven up the party! Hydrogen (H\u2082): 10 g Helium (He): 40 g Temperature Increase: 50 \u00b0C The Party Hall (Closed Vessel) Live Calculation Moles: H\u2082: 5.00 | He: 10.00 […]<\/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-213","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/213","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=213"}],"version-history":[{"count":6,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/213\/revisions"}],"predecessor-version":[{"id":248,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/213\/revisions\/248"}],"wp:attachment":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}