simple-pendulum.html (7387B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Simple Pendulum Simulation</title> 6 <meta name="Description" content="Simple pendulum 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="simple-pendulum.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>Simple Pendulum</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="radiusInput"><b>Radius:</b> {{ radius.toFixed(1) }} m</label> 33 <input type="range" min="1" max="10" step="0.1" v-model.number="radius" @input="reset" @dblclick="radius=5" :disabled="active" id="radiusInput"> 34 </section> 35 <section> 36 <label for="angleInput"><b>Initial Angle:</b> {{ initialAngle.toFixed(0) }}<sup>o</sup></label> 37 <input type="range" min="-45" max="45" step="1" v-model.number="initialAngle" @input="reset" @dblclick="initialAngle=0" :disabled="active" id="angleInput"> 38 </section> 39 <section> 40 <label for="gravityInput"><b>Gravity:</b> {{ gravity.toFixed(1) }} m/s<sup>2</sup></label> 41 <input type="range" min="0.1" max="10" step="0.1" v-model.number="gravity" @input="reset" @dblclick="gravity=9.8" :disabled="active" id="gravityInput"> 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="-8 -3 16 16"> 58 <!-- String --> 59 <circle cx="0" c1="0" r="0.1" fill="#a0a0a0"></circle> 60 <line x1="0" y1="0" :x2="position.x" :y2="-position.y" stroke="#a0a0a0" stroke-width="0.2"></line> 61 62 <!-- Box --> 63 <rect x="-2" y="-0.5" width="4" height="0.5" fill="#606060"></rect> 64 65 <!-- Mass --> 66 <circle :cx="position.x" :cy="-position.y" r="0.5" fill="#ff0000"></circle> 67 </svg> 68 </div> 69 70 <div id="data" hidden> 71 <label><b>Time:</b> {{ time.toFixed(2) }} s</label> 72 <label><b>Period:</b> {{ period.toFixed(2) }} s</label> 73 <label><b>Angle:</b> {{ angle.toFixed(0) }}<sup>o</sup></label> 74 <label><b>Acceleration:</b> {{ acceleration.toFixed(2) }} m/s<sup>2</sup></label> 75 </div> 76 </div> 77 78 <div id="info" v-show="infoVisible" hidden> 79 <h2>Simulation Information</h2> 80 <p>This simulation consists of a mass suspended from a frictionless pivot by a massless string.</p> 81 82 <p>You can control the simulation using these variables:</p> 83 <ul> 84 <li><b>Radius:</b> The length of the pendulum</li> 85 <li><b>Initial Angle:</b> The initial angle of the pendulum</li> 86 <li><b>Gravity:</b> The acceleration due to gravity</li> 87 </ul> 88 89 <p>The simulation also contains these output measurements:</p> 90 <ul> 91 <li><b>Time:</b> The time that has passed</li> 92 <li><b>Period:</b> The period of the pendulum</li> 93 <li><b>Angle:</b> The current angle of the pendulum</li> 94 <li><b>Acceleration:</b> The current acceleration of the mass</li> 95 </ul> 96 97 <p>Controls:</p> 98 <ul> 99 <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> 100 <li>Use the step <img alt="" src="../images/step-forward.svg"> button to advance the simulation by 0.01 seconds</li> 101 <li>Use the reset <img alt="" src="../images/reset.svg"> button to restore the simulation to its initial state</li> 102 </ul> 103 104 <p>Equations:</p> 105 <ul> 106 <li> 107 \( T = { 2 \cdot \pi \cdot \sqrt{ \ell \over g } } \) 108 <ul> 109 <li>\(T\) is the period of the pendulum</li> 110 <li>\(\ell\) is the length of the pendulum</li> 111 <li>\(g\) is the acceleration due to gravity</li> 112 </ul> 113 </li> 114 <li> 115 \( \theta = { \theta_0 \cdot cos{ t \cdot g \over \ell } } \) 116 <ul> 117 <li>\(\theta\) is the angle of the pendulum</li> 118 <li>\(\theta_0\) is the initial angle of the pendulum</li> 119 <li>\(t\) is the time that has passed</li> 120 <li>\(g\) is the acceleration due to gravity</li> 121 <li>\(\ell\) is the length of the pendulum</li> 122 </ul> 123 </li> 124 <li> 125 \( a = { g \cdot sin{ \theta } } \) 126 <ul> 127 <li>\(a\) is the acceleration of the mass</li> 128 <li>\(g\) is the acceleration due to gravity</li> 129 <li>\(\theta\) is the angle of the pendulum</li> 130 </ul> 131 </li> 132 </ul> 133 </div> 134 </div> 135 </body> 136 </html>