atwood-machine.html (8349B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Atwood Machine Simulation</title> 6 <meta name="Description" content="Atwood machine 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="atwood-machine.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>Atwood Machine</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="mass1Input"><b>Mass 1:</b> {{ mass1.toFixed(1) }} Kg</label> 33 <input type="range" min="1" max="10" step="0.1" v-model.number="mass1" @input="reset" @dblclick="mass1=1" :disabled="active" id="mass1Input"> 34 </section> 35 <section> 36 <label for="mass2Input"><b>Mass 2:</b> {{ mass2.toFixed(1) }} Kg</label> 37 <input type="range" min="1" max="10" step="0.1" v-model.number="mass2" @input="reset" @dblclick="mass2=10" :disabled="active" id="mass2Input"> 38 </section> 39 <section> 40 <label for="angleInput"><b>Angle:</b> {{ angle.toFixed(0) }}<sup>o</sup></label> 41 <input type="range" min="0" max="90" step="1" v-model.number="angle" @input="reset" @dblclick="angle=90" :disabled="active" id="angleInput"> 42 </section> 43 <section> 44 <label for="gravityInput"><b>Gravity:</b> {{ gravity.toFixed(1) }} m/s<sup>2</sup></label> 45 <input type="range" min="1" max="10" step="0.1" v-model.number="gravity" @input="reset" @dblclick="gravity=9.8" :disabled="active" id="gravityInput"> 46 </section> 47 </div> 48 49 <div id="output" hidden> 50 <div id="simControls"> 51 <button @click="toggle" class="icon" :title="active ? 'Pause' : (time === 0 ? 'Start' : 'Resume')" :disabled="Math.abs(displacement) === 3"> 52 <img alt="" :src="active ? '../images/pause.svg' : '../images/play.svg'"> 53 </button> 54 <button @click="update" class="icon" title="Step Forward" :disabled="Math.abs(displacement) === 3 || active"> 55 <img alt="" src="../images/step-forward.svg"> 56 </button> 57 <button @click="reset" class="icon" title="Reset" :disabled="time === 0"> 58 <img alt="" src="../images/reset.svg"> 59 </button> 60 </div> 61 <svg width="400px" viewBox="-0.1 -0.1 8.3 8.1"> 62 <!-- Pulley --> 63 <circle cx="1.5" cy="1.5" r="1" stroke-width="0.1" stroke="#a0a0a0" fill="#606060"></circle> 64 65 <!-- 1st weight --> 66 <line x1="0.5" y1="1.5" x2="0.5" :y2="4.5 + displacement" stroke-width="0.1" stroke="#a0a0a0"></line> 67 <circle cx="0.5" :cy="4.5 + displacement" :r="0.03*mass1+0.2" fill="#ff0000"></circle> 68 69 <!-- 2nd weight --> 70 <line :x1="positionVector[0] + 1.5" :y1="positionVector[1] + 1.5" :x2="positionVector[2] + 1.5" :y2="positionVector[3] + 1.5" stroke-width="0.1" stroke="#a0a0a0"></line> 71 <circle :cx="positionVector[2] + 1.5" :cy="positionVector[3] + 1.5" :r="0.03*mass2+0.2" fill="#0000ff"></circle> 72 </svg> 73 </div> 74 75 <div id="data" hidden> 76 <label><b>Time:</b> {{ time.toFixed(2) }} s</label> 77 <label><b>Displacement:</b> {{ Math.abs(displacement).toFixed(2) }} m</label> 78 <label><b>Velocity:</b> {{ velocity.toFixed(2) }} m/s</label> 79 <label><b>Acceleration:</b> {{ acceleration.toFixed(2) }} m/s<sup>2</sup></label> 80 </div> 81 </div> 82 83 <div id="info" v-show="infoVisible" hidden> 84 <h2>Simulation Information</h2> 85 <p>This simulation consists of two weights connected by a massless string over an ideal massless pulley.</p> 86 87 <p>You can control the simulation using these variables:</p> 88 <ul> 89 <li><b>Mass 1:</b> The mass of the red weight</li> 90 <li><b>Mass 2:</b> The mass of the blue weight</li> 91 <li><b>Angle:</b> The angle of the incline that the blue weight sits on</li> 92 <li><b>Gravity:</b> The acceleration due to gravity</li> 93 </ul> 94 95 <p>The simulation also contains these output measurements:</p> 96 <ul> 97 <li><b>Time:</b> The time that has passed</li> 98 <li><b>Displacement:</b> The current displacement of the blue weight</li> 99 <li><b>Velocity:</b> The current velocity of the blue weight</li> 100 <li><b>Acceleration:</b> The current acceleration of the blue weight</li> 101 </ul> 102 103 <p>Controls:</p> 104 <ul> 105 <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> 106 <li>Use the step <img alt="" src="../images/step-forward.svg"> button to advance the simulation by 0.01 seconds</li> 107 <li>Use the reset <img alt="" src="../images/reset.svg"> button to restore the simulation to its initial state</li> 108 </ul> 109 110 <p>Equations:</p> 111 <ul> 112 <li> 113 \( a = { F_{net} \over m_1 + m_2 } = { m_1 \cdot g - m_2 \cdot g \cdot sin{ \theta } \over m_1 + m_2 } \) 114 <ul> 115 <li>\(a\) is the acceleration of the blue weight</li> 116 <li>\(F_{net}\) is the net force on the blue weight</li> 117 <li>\(m_1\) is the mass of the red weight</li> 118 <li>\(m_2\) is the mass of the blue weight</li> 119 <li>\(g\) is the acceleration due to gravity</li> 120 <li>\(\theta\) is the angle of the incline that the blue weight sits on</li> 121 </ul> 122 </li> 123 <li> 124 \( v = { a \cdot t } \) 125 <ul> 126 <li>\(v\) is the velocity of the blue weight</li> 127 <li>\(a\) is the acceleration of the blue weight</li> 128 <li>\(t\) is the time that has passed</li> 129 </ul> 130 </li> 131 <li> 132 \( x = { {1 \over 2} \cdot a \cdot t^2 } \) 133 <ul> 134 <li>\(x\) is the displacement of the blue weight</li> 135 <li>\(a\) is the acceleration of the blue weight</li> 136 <li>\(t\) is the time that has passed</li> 137 </ul> 138 </li> 139 </ul> 140 </div> 141 </div> 142 </body> 143 </html>