circular-motion.html (7334B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Circular Motion Simulation</title> 6 <meta name="Description" content="Circular 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="circular-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>Circular 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" @input="reset" @dblclick="mass=5" :disabled="active" id="massInput"> 34 </section> 35 <section> 36 <label for="forceInput"><b>Centripetal Force:</b> {{ force.toFixed(1) }} N</label> 37 <input type="range" min="1" max="10" step="0.1" v-model.number="force" @input="reset" @dblclick="force=5" :disabled="active" id="forceInput"> 38 </section> 39 <section> 40 <label for="radiusInput"><b>Radius:</b> {{ radius.toFixed(2) }} m</label> 41 <input type="range" min="0.1" max="1" step="0.01" v-model.number="radius" @input="reset" @dblclick="radius=1" :disabled="active" id="radiusInput"> 42 </section> 43 </div> 44 45 <div id="output" hidden> 46 <div id="simControls"> 47 <button @click="toggle" class="icon" :title="active ? 'Pause' : (time === 0 ? 'Start' : 'Resume')"> 48 <img alt="" :src="active ? '../images/pause.svg' : '../images/play.svg'"> 49 </button> 50 <button @click="update" class="icon" title="Step Forward" :disabled="active"> 51 <img alt="" src="../images/step-forward.svg"> 52 </button> 53 <button @click="reset" class="icon" title="Reset" :disabled="time === 0"> 54 <img alt="" src="../images/reset.svg"> 55 </button> 56 </div> 57 <svg width="400px" viewBox="-1.5 -1.5 3 3"> 58 <!-- Circle outline --> 59 <circle cx="0" cy="0" :r="radius" stroke="#808080" stroke-width="0.01" fill="none" stroke-dasharray="0.05,0.05"/> 60 <circle cx="0" cy="0" r="0.025" fill="currentColor"></circle> 61 62 <!-- Velocity vector--> 63 <line :x1="position[0]" :y1="position[1]" :x2="velocityVector[0]" :y2="velocityVector[1]" stroke="currentColor" stroke-width="0.025"/> 64 <path :d="`M${velocityVector[2]} ${velocityVector[3]} L${velocityVector[0]} ${velocityVector[1]} L${velocityVector[4]} ${velocityVector[5]} Z`" stroke="currentColor" stroke-width="0.025" fill="currentColor"/> 65 66 <!-- Centripetal force vector--> 67 <line :x1="position[0]" :y1="position[1]" :x2="forceVector[0]" :y2="forceVector[1]" stroke="gray" stroke-width="0.025"/> 68 <path :d="`M${forceVector[2]} ${forceVector[3]} L${forceVector[0]} ${forceVector[1]} L${forceVector[4]} ${forceVector[5]} Z`" stroke="#808080" stroke-width="0.025" fill="#808080"/> 69 70 <!-- Object --> 71 <circle :cx="position[0]" :cy="position[1]" :r="(0.005*mass)+0.025" fill="#ff0000"/> 72 </svg> 73 </div> 74 75 <div id="data" hidden> 76 <label><b>Time:</b> {{ time.toFixed(2) }} s</label> 77 <label><b>Speed:</b> {{ speed.toFixed(2) }} m/s</label> 78 <label><b>Period:</b> {{ period.toFixed(2) }} s</label> 79 </div> 80 </div> 81 82 <div id="info" v-show="infoVisible" hidden> 83 <h2>Simulation Information</h2> 84 <p>This simulation consists of an object that is spun in a circle by a centripetal force.</p> 85 86 <p>You can control the simulation using these variables:</p> 87 <ul> 88 <li><b>Mass:</b> The mass of the object</li> 89 <li><b>Centripetal Force:</b> The magnitude of the centripetal force</li> 90 <li><b>Radius:</b> The radius of the circle</li> 91 </ul> 92 93 <p>The simulation also contains these output measurements:</p> 94 <ul> 95 <li><b>Time:</b> The time that has passed</li> 96 <li><b>Speed:</b> The current speed of the object</li> 97 <li><b>Period:</b> The period of the object</li> 98 </ul> 99 100 <p>Controls:</p> 101 <ul> 102 <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> 103 <li>Use the step <img alt="" src="../images/step-forward.svg"> button to advance the simulation by 0.01 seconds</li> 104 <li>Use the reset <img alt="" src="../images/reset.svg"> button to restore the simulation to its initial state</li> 105 </ul> 106 107 <p>Equations:</p> 108 <ul> 109 <li> 110 \( v = { \sqrt{ F \cdot r \over m } } \) 111 <ul> 112 <li>\(v\) is the speed of the object</li> 113 <li>\(F\) is the magnitude of the centripetal force</li> 114 <li>\(r\) is the radius of the circle</li> 115 <li>\(m\) is the mass of the object</li> 116 </ul> 117 </li> 118 <li> 119 \( T = { 2 \cdot \pi \cdot r \over v } \) 120 <ul> 121 <li>\(T\) is the period of the object</li> 122 <li>\(r\) is the radius of the circle</li> 123 <li>\(v\) is the speed of the object</li> 124 </ul> 125 </li> 126 </ul> 127 </div> 128 </div> 129 </body> 130 </html>