horizontal-motion.html (8512B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Horizontal Motion Simulation</title> 6 <meta name="Description" content="Horizontal motion physics simulation and calculator"> 7 <meta name="viewport" content="width=device-width"> 8 <link rel="manifest" href="../manifest.json"> 9 <link rel="icon" type="image/png" href="../images/favicon-32.png"> 10 <link rel="apple-touch-icon" href="../images/favicon-180.png"> 11 <script src="../vendor/vue.js"></script> 12 <link rel="stylesheet" href="styles.css"> 13 <script src="horizontal-motion.js"></script> 14 <script id="MathJax-script" async src="../vendor/mathjax.js"></script> 15 </head> 16 <body onload="createApp()"> 17 <div id="app"> 18 <header> 19 <a title="Home" href="../" class="icon"><img alt="" src="../images/home.svg"></a> 20 <button v-show="!infoVisible" title="About" class="icon" @click="infoVisible=true"><img alt="" src="../images/info.svg"></button> 21 <button v-show="infoVisible" title="Close" class="icon" @click="infoVisible=false"><img alt="" src="../images/x.svg"></button> 22 <h1>Horizontal Motion</h1> 23 </header> 24 25 <noscript> 26 <p>This simulation requires JavaScript</p> 27 </noscript> 28 29 <div id="simulation" v-show="!infoVisible"> 30 <div id="input" hidden> 31 <section> 32 <label for="massInput"><b>Mass:</b> {{ mass.toFixed(1) }} Kg</label> 33 <input type="range" min="1" max="10" step="0.1" v-model.number="mass" @dblclick="mass=5" id="massInput"> 34 </section> 35 <section> 36 <label for="forceInput"><b>Applied Force:</b> {{ force.toFixed(1) }} N</label> 37 <input type="range" min="-10" max="10" step="0.1" v-model.number="force" @dblclick="force=0" id="forceInput"> 38 </section> 39 <section> 40 <label for="staticFrictionInput"><b>Static Friction:</b> {{ staticFriction.toFixed(2) }}</label> 41 <input type="range" min="0" max="1" step="0.01" v-model.number="staticFriction" @dblclick="staticFriction=0" id="staticFrictionInput"> 42 </section> 43 <section> 44 <label for="kineticFrictionInput"><b>Kinetic Friction:</b> {{ kineticFriction.toFixed(2) }}</label> 45 <input type="range" min="0" max="1" step="0.01" v-model.number="kineticFriction" @dblclick="kineticFriction=0" id="kineticFrictionInput"> 46 </section> 47 <section> 48 <label for="gravityInput"><b>Gravity:</b> {{ gravity.toFixed(1) }} m/s<sup>2</sup></label> 49 <input type="range" min="0" max="10" step="0.1" v-model.number="gravity" @dblclick="gravity=9.8" id="gravityInput"> 50 </section> 51 </div> 52 53 <div id="output" hidden> 54 <div id="simControls"> 55 <button @click="toggle" class="icon" :title="active ? 'Pause' : (time === 0 ? 'Start' : 'Resume')"> 56 <img alt="" :src="active ? '../images/pause.svg' : '../images/play.svg'"> 57 </button> 58 <button @click="update" class="icon" title="Step Forward" :disabled="active"> 59 <img alt="" src="../images/step-forward.svg"> 60 </button> 61 <button @click="reset" class="icon" title="Reset" :disabled="time === 0"> 62 <img alt="" src="../images/reset.svg"> 63 </button> 64 </div> 65 <svg width="800px" viewBox="0 0 10 2"> 66 <!-- Ruler marks --> 67 <line v-for="(_,n) in 101" :x1="references[1] + n*0.1" y1="1.7" :x2="references[1] + n*0.1" y2="1.9" stroke-width="0.01" stroke="currentColor"></line> 68 <line v-for="(_,n) in 11" :x1="references[0] + n" y1="1.6" :x2="references[0] + n" y2="2.0" stroke-width="0.02" stroke="currentColor"></line> 69 70 <!-- Force vector --> 71 <line x1="5" :y1="1.2 - 0.05*mass+0.1" :x2="5+0.3*force" :y2="1.2 - 0.05*mass+0.1" stroke-width="0.1" stroke="#808080"></line> 72 <path v-show="force>0" :d="`M${5+0.3*force} ${1.3 - 0.05*mass+0.1} L${5.1+0.3*force} ${1.2 - 0.05*mass+0.1} L${5+0.3*force} ${1.1 - 0.05*mass+0.1} Z`" stroke="#808080" stroke-width="0.025" fill="#808080"/> 73 <path v-show="force<0" :d="`M${5+0.3*force} ${1.3 - 0.05*mass+0.1} L${4.9+0.3*force} ${1.2 - 0.05*mass+0.1} L${5+0.3*force} ${1.1 - 0.05*mass+0.1} Z`" stroke="#808080" stroke-width="0.025" fill="#808080"/> 74 75 <!-- Object --> 76 <circle cx="5" :cy="1.2 - 0.05*mass+0.1" :r="0.05*mass+0.1" fill="#ff0000"></circle> 77 </svg> 78 </div> 79 80 <div id="data" hidden> 81 <label><b>Time:</b> {{ time.toFixed(2) }} s</label> 82 <label><b>Position:</b> {{ position.toFixed(2) }} m</label> 83 <label><b>Velocity:</b> {{ velocity.toFixed(2) }} m/s</label> 84 <label><b>Acceleration:</b> {{ acceleration.toFixed(2) }} m/s<sup>2</sup></label> 85 </div> 86 </div> 87 88 <div id="info" v-show="infoVisible" hidden> 89 <h2>Simulation Information</h2> 90 <p>This simulation consists an object that can be accelerated horizontally along a surface.</p> 91 92 <p>You can control the simulation using these variables:</p> 93 <ul> 94 <li><b>Mass:</b> The mass of the object</li> 95 <li><b>Applied Force:</b> The applied force on the object</li> 96 <li><b>Static Friction:</b> The coefficient of static friction</li> 97 <li><b>Kinetic Friction:</b> The coefficient of kinetic friction</li> 98 <li><b>Gravity:</b> The acceleration due to gravity</li> 99 </ul> 100 101 <p>The simulation also contains these output measurements:</p> 102 <ul> 103 <li><b>Time:</b> The time that has passed</li> 104 <li><b>Position:</b> The current displacement of the object</li> 105 <li><b>Velocity:</b> The current velocity of the object</li> 106 <li><b>Acceleration:</b> The current acceleration of the object</li> 107 </ul> 108 109 <p>Controls:</p> 110 <ul> 111 <li>Use the start <img alt="" src="../images/play.svg"> and stop <img alt="" src="../images/pause.svg"> buttons to start and stop the simulation</li> 112 <li>Use the step <img alt="" src="../images/step-forward.svg"> button to advance the simulation by 0.01 seconds</li> 113 <li>Use the reset <img alt="" src="../images/reset.svg"> button to restore the simulation to its initial state</li> 114 </ul> 115 116 <p>Equations:</p> 117 <ul> 118 <li> 119 \( | F_f | = { | \mu_k \cdot m \cdot g | } \) 120 <ul> 121 <li>\(F_f\) is the force of kinetic friction on the object</li> 122 <li>\(\mu_k\) is the coefficient of kinetic friction</li> 123 <li>\(m\) is the mass of the object</li> 124 <li>\(g\) is the acceleration due to gravity</li> 125 </ul> 126 </li> 127 <li> 128 \( a = { F_{net} \over m } = { F_a + F_f \over m } \) 129 <ul> 130 <li>\(a\) is the acceleration of the object</li> 131 <li>\(F_{net}\) is the net force on the object</li> 132 <li>\(F_a\) is the applied force on the object</li> 133 <li>\(F_f\) is the force of kinetic friction on the object</li> 134 <li>\(m\) is the mass of the object</li> 135 </ul> 136 </li> 137 </ul> 138 </div> 139 </div> 140 </body> 141 </html>