Force Decomposition Demonstration Tool<\/title>\n <style>\n body {\n font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;\n background-color: #f0f2f5;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px;\n margin: 0;\n }\n\n .container {\n background: white;\n padding: 30px;\n border-radius: 12px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n max-width: 800px;\n width: 100%;\n }\n\n h1 {\n color: #1a1a1a;\n text-align: center;\n margin-top: 0;\n }\n\n canvas {\n background: #fafafa;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n display: block;\n margin: 0 auto 20px;\n }\n\n .controls {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin-bottom: 20px;\n }\n\n .control-group {\n display: flex;\n flex-direction: column;\n }\n\n label {\n font-weight: bold;\n margin-bottom: 8px;\n color: #444;\n }\n\n input[type=\"range\"] {\n width: 100%;\n cursor: pointer;\n }\n\n .results {\n background: #f8f9ff;\n padding: 20px;\n border-radius: 8px;\n border-left: 4px solid #3b82f6;\n }\n\n .formula {\n font-family: 'Times New Roman', serif;\n font-style: italic;\n font-size: 1.1em;\n margin: 10px 0;\n }\n\n .value-display {\n font-weight: bold;\n color: #3b82f6;\n }\n <\/style>\n<\/head>\n\n<body>\n\n <div class=\"container\">\n <h1>Force Decomposition Demonstration<\/h1>\n\n <canvas id=\"canvas\" width=\"600\" height=\"400\"><\/canvas>\n\n <div class=\"controls\">\n <div class=\"control-group\">\n <label>Force Magnitude (F): <span id=\"f-val\" class=\"value-display\">100<\/span> N<\/label>\n <input type=\"range\" id=\"f-slider\" min=\"0\" max=\"200\" value=\"100\">\n <\/div>\n <div class=\"control-group\">\n <label>Angle (\u03b8): <span id=\"theta-val\" class=\"value-display\">30<\/span>\u00b0<\/label>\n <input type=\"range\" id=\"theta-slider\" min=\"0\" max=\"90\" value=\"30\">\n <\/div>\n <\/div>\n\n <div class=\"results\">\n <div class=\"formula\">\n Horizontal Component: F<sub>x<\/sub> = F \u00b7 cos(\u03b8) = <span id=\"fx-calc\">100 \u00b7 cos(30\u00b0)<\/span> = <span id=\"fx-result\"\n class=\"value-display\">86.60<\/span> N\n <\/div>\n <div class=\"formula\">\n Vertical Component: F<sub>y<\/sub> = F \u00b7 sin(\u03b8) = <span id=\"fy-calc\">100 \u00b7 sin(30\u00b0)<\/span> = <span id=\"fy-result\"\n class=\"value-display\">50.00<\/span> N\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const canvas = document.getElementById('canvas');\n const ctx = canvas.getContext('2d');\n const fSlider = document.getElementById('f-slider');\n const thetaSlider = document.getElementById('theta-slider');\n\n const fValDisp = document.getElementById('f-val');\n const thetaValDisp = document.getElementById('theta-val');\n const fxResult = document.getElementById('fx-result');\n const fyResult = document.getElementById('fy-result');\n const fxCalc = document.getElementById('fx-calc');\n const fyCalc = document.getElementById('fy-calc');\n\n function draw() {\n const F = parseFloat(fSlider.value);\n const thetaDeg = parseFloat(thetaSlider.value);\n const thetaRad = (thetaDeg * Math.PI) \/ 180;\n\n \/\/ Calculate components\n const Fx = F * Math.cos(thetaRad);\n const Fy = F * Math.sin(thetaRad);\n\n \/\/ Update UI text\n fValDisp.textContent = F;\n thetaValDisp.textContent = thetaDeg;\n fxCalc.textContent = `${F} \u00b7 cos(${thetaDeg}\u00b0)`;\n fyCalc.textContent = `${F} \u00b7 sin(${thetaDeg}\u00b0)`;\n fxResult.textContent = Fx.toFixed(2);\n fyResult.textContent = Fy.toFixed(2);\n\n \/\/ Clear canvas\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n const originX = 100;\n const originY = 300;\n const scale = 1.5; \/\/ Scale for better observation\n\n \/\/ Draw coordinate axes\n ctx.strokeStyle = '#ccc';\n ctx.lineWidth = 1;\n \/\/ X-axis\n ctx.beginPath();\n ctx.moveTo(50, originY);\n ctx.lineTo(550, originY);\n ctx.stroke();\n \/\/ Y-axis\n ctx.beginPath();\n ctx.moveTo(originX, 50);\n ctx.lineTo(originX, 350);\n ctx.stroke();\n\n \/\/ Draw component Fx (Horizontal)\n ctx.setLineDash([5, 5]);\n ctx.strokeStyle = '#94a3b8';\n drawArrow(ctx, originX, originY, originX + Fx * scale, originY, 'Fx');\n\n \/\/ Draw component Fy (Vertical)\n drawArrow(ctx, originX, originY, originX, originY - Fy * scale, 'Fy');\n ctx.setLineDash([]);\n\n \/\/ Draw resultant force F\n ctx.strokeStyle = '#3b82f6';\n ctx.lineWidth = 3;\n drawArrow(ctx, originX, originY, originX + Fx * scale, originY - Fy * scale, 'F');\n\n \/\/ Draw angle arc\n ctx.beginPath();\n ctx.strokeStyle = '#f59e0b';\n ctx.lineWidth = 2;\n ctx.arc(originX, originY, 40, 0, -thetaRad, true);\n ctx.stroke();\n ctx.fillStyle = '#f59e0b';\n ctx.fillText('\u03b8', originX + 45, originY - 15);\n }\n\n function drawArrow(ctx, fromX, fromY, toX, toY, label) {\n const headLength = 10;\n const angle = Math.atan2(toY - fromY, toX - fromX);\n\n ctx.beginPath();\n ctx.moveTo(fromX, fromY);\n ctx.lineTo(toX, toY);\n ctx.stroke();\n\n \/\/ Arrow head\n ctx.beginPath();\n ctx.moveTo(toX, toY);\n ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI \/ 6), toY - headLength * Math.sin(angle - Math.PI \/ 6));\n ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI \/ 6), toY - headLength * Math.sin(angle + Math.PI \/ 6));\n ctx.closePath();\n ctx.fill();\n\n \/\/ Label\n ctx.font = '16px Arial';\n ctx.fillStyle = ctx.strokeStyle;\n if (label === 'Fx') ctx.fillText(label, toX - 20, toY + 20);\n else if (label === 'Fy') ctx.fillText(label, toX - 30, toY + 20);\n else ctx.fillText(label, toX + 5, toY - 5);\n }\n\n fSlider.addEventListener('input', draw);\n thetaSlider.addEventListener('input', draw);\n\n \/\/ Initial drawing\n draw();\n <\/script>\n\n<\/body>\n\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Real-time interactive visualization of force decomposition and vector mechanics.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-74","post","type-post","status-publish","format-standard","hentry","category-visual-learning-tools"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/posts\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":2,"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"predecessor-version":[{"id":77,"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/posts\/74\/revisions\/77"}],"wp:attachment":[{"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":74,"date":"2026-05-20T17:24:25","date_gmt":"2026-05-20T17:24:25","guid":{"rendered":"https:\/\/flowxiom.com\/?p=74"},"modified":"2026-05-20T17:27:54","modified_gmt":"2026-05-20T17:27:54","slug":"force-decomposition","status":"publish","type":"post","link":"https:\/\/flowxiom.com\/index.php\/2026\/05\/20\/force-decomposition\/","title":{"rendered":"Force Decomposition"},"content":{"rendered":"\n\n\n\n\n \n Force Decomposition Demonstration Tool<\/title>\n <style>\n body {\n font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;\n background-color: #f0f2f5;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px;\n margin: 0;\n }\n\n .container {\n background: white;\n padding: 30px;\n border-radius: 12px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n max-width: 800px;\n width: 100%;\n }\n\n h1 {\n color: #1a1a1a;\n text-align: center;\n margin-top: 0;\n }\n\n canvas {\n background: #fafafa;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n display: block;\n margin: 0 auto 20px;\n }\n\n .controls {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin-bottom: 20px;\n }\n\n .control-group {\n display: flex;\n flex-direction: column;\n }\n\n label {\n font-weight: bold;\n margin-bottom: 8px;\n color: #444;\n }\n\n input[type=\"range\"] {\n width: 100%;\n cursor: pointer;\n }\n\n .results {\n background: #f8f9ff;\n padding: 20px;\n border-radius: 8px;\n border-left: 4px solid #3b82f6;\n }\n\n .formula {\n font-family: 'Times New Roman', serif;\n font-style: italic;\n font-size: 1.1em;\n margin: 10px 0;\n }\n\n .value-display {\n font-weight: bold;\n color: #3b82f6;\n }\n <\/style>\n<\/head>\n\n<body>\n\n <div class=\"container\">\n <h1>Force Decomposition Demonstration<\/h1>\n\n <canvas id=\"canvas\" width=\"600\" height=\"400\"><\/canvas>\n\n <div class=\"controls\">\n <div class=\"control-group\">\n <label>Force Magnitude (F): <span id=\"f-val\" class=\"value-display\">100<\/span> N<\/label>\n <input type=\"range\" id=\"f-slider\" min=\"0\" max=\"200\" value=\"100\">\n <\/div>\n <div class=\"control-group\">\n <label>Angle (\u03b8): <span id=\"theta-val\" class=\"value-display\">30<\/span>\u00b0<\/label>\n <input type=\"range\" id=\"theta-slider\" min=\"0\" max=\"90\" value=\"30\">\n <\/div>\n <\/div>\n\n <div class=\"results\">\n <div class=\"formula\">\n Horizontal Component: F<sub>x<\/sub> = F \u00b7 cos(\u03b8) = <span id=\"fx-calc\">100 \u00b7 cos(30\u00b0)<\/span> = <span id=\"fx-result\"\n class=\"value-display\">86.60<\/span> N\n <\/div>\n <div class=\"formula\">\n Vertical Component: F<sub>y<\/sub> = F \u00b7 sin(\u03b8) = <span id=\"fy-calc\">100 \u00b7 sin(30\u00b0)<\/span> = <span id=\"fy-result\"\n class=\"value-display\">50.00<\/span> N\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const canvas = document.getElementById('canvas');\n const ctx = canvas.getContext('2d');\n const fSlider = document.getElementById('f-slider');\n const thetaSlider = document.getElementById('theta-slider');\n\n const fValDisp = document.getElementById('f-val');\n const thetaValDisp = document.getElementById('theta-val');\n const fxResult = document.getElementById('fx-result');\n const fyResult = document.getElementById('fy-result');\n const fxCalc = document.getElementById('fx-calc');\n const fyCalc = document.getElementById('fy-calc');\n\n function draw() {\n const F = parseFloat(fSlider.value);\n const thetaDeg = parseFloat(thetaSlider.value);\n const thetaRad = (thetaDeg * Math.PI) \/ 180;\n\n \/\/ Calculate components\n const Fx = F * Math.cos(thetaRad);\n const Fy = F * Math.sin(thetaRad);\n\n \/\/ Update UI text\n fValDisp.textContent = F;\n thetaValDisp.textContent = thetaDeg;\n fxCalc.textContent = `${F} \u00b7 cos(${thetaDeg}\u00b0)`;\n fyCalc.textContent = `${F} \u00b7 sin(${thetaDeg}\u00b0)`;\n fxResult.textContent = Fx.toFixed(2);\n fyResult.textContent = Fy.toFixed(2);\n\n \/\/ Clear canvas\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n const originX = 100;\n const originY = 300;\n const scale = 1.5; \/\/ Scale for better observation\n\n \/\/ Draw coordinate axes\n ctx.strokeStyle = '#ccc';\n ctx.lineWidth = 1;\n \/\/ X-axis\n ctx.beginPath();\n ctx.moveTo(50, originY);\n ctx.lineTo(550, originY);\n ctx.stroke();\n \/\/ Y-axis\n ctx.beginPath();\n ctx.moveTo(originX, 50);\n ctx.lineTo(originX, 350);\n ctx.stroke();\n\n \/\/ Draw component Fx (Horizontal)\n ctx.setLineDash([5, 5]);\n ctx.strokeStyle = '#94a3b8';\n drawArrow(ctx, originX, originY, originX + Fx * scale, originY, 'Fx');\n\n \/\/ Draw component Fy (Vertical)\n drawArrow(ctx, originX, originY, originX, originY - Fy * scale, 'Fy');\n ctx.setLineDash([]);\n\n \/\/ Draw resultant force F\n ctx.strokeStyle = '#3b82f6';\n ctx.lineWidth = 3;\n drawArrow(ctx, originX, originY, originX + Fx * scale, originY - Fy * scale, 'F');\n\n \/\/ Draw angle arc\n ctx.beginPath();\n ctx.strokeStyle = '#f59e0b';\n ctx.lineWidth = 2;\n ctx.arc(originX, originY, 40, 0, -thetaRad, true);\n ctx.stroke();\n ctx.fillStyle = '#f59e0b';\n ctx.fillText('\u03b8', originX + 45, originY - 15);\n }\n\n function drawArrow(ctx, fromX, fromY, toX, toY, label) {\n const headLength = 10;\n const angle = Math.atan2(toY - fromY, toX - fromX);\n\n ctx.beginPath();\n ctx.moveTo(fromX, fromY);\n ctx.lineTo(toX, toY);\n ctx.stroke();\n\n \/\/ Arrow head\n ctx.beginPath();\n ctx.moveTo(toX, toY);\n ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI \/ 6), toY - headLength * Math.sin(angle - Math.PI \/ 6));\n ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI \/ 6), toY - headLength * Math.sin(angle + Math.PI \/ 6));\n ctx.closePath();\n ctx.fill();\n\n \/\/ Label\n ctx.font = '16px Arial';\n ctx.fillStyle = ctx.strokeStyle;\n if (label === 'Fx') ctx.fillText(label, toX - 20, toY + 20);\n else if (label === 'Fy') ctx.fillText(label, toX - 30, toY + 20);\n else ctx.fillText(label, toX + 5, toY - 5);\n }\n\n fSlider.addEventListener('input', draw);\n thetaSlider.addEventListener('input', draw);\n\n \/\/ Initial drawing\n draw();\n <\/script>\n\n<\/body>\n\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Real-time interactive visualization of force decomposition and vector mechanics.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-74","post","type-post","status-publish","format-standard","hentry","category-visual-learning-tools"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/posts\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":2,"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"predecessor-version":[{"id":77,"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/posts\/74\/revisions\/77"}],"wp:attachment":[{"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flowxiom.com\/index.php\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}