spring-mass-system.html (9022B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Spring-Mass System Simulation</title> 6 <meta name="Description" content="Spring-Mass system 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="spring-mass-system.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>Spring-Mass System</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="0.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="initialPositionInput"><b>Initial Position:</b> {{ initialPosition.toFixed(1) }} m</label> 37 <input type="range" min="-10" max="10" step="0.1" v-model.number="initialPosition" @input="reset" @dblclick="initialPosition=0" :disabled="active" id="initialPositionInput"> 38 </section> 39 <section> 40 <label for="stiffnessInput"><b>Stiffness (k):</b> {{ stiffness.toFixed(0) }} N/m</label> 41 <input type="range" min="1" max="100" step="1" v-model.number="stiffness" @input="reset" @dblclick="stiffness=5" :disabled="active" id="stiffnessInput"> 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="800px" viewBox="-11 0 22 4"> 58 <!-- Point of equilibrium --> 59 <line x1="0" y1="0" :x2="0" y2="4" stroke="#808080" stroke-width="0.05" stroke-dasharray="0.1,0.1"></line> 60 61 <!-- Spring --> 62 <line x1="-11" y1="2" :x2="position" y2="2" stroke="#a0a0a0" stroke-width="0.1"></line> 63 <rect x="-11" y="1" width="0.25" height="2" fill="#606060"></rect> 64 65 <!-- Mass --> 66 <circle :cx="position" cy="2" :r="0.05*mass+0.1" 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>Amplitude:</b> {{ Math.abs(initialPosition) }} m</label> 74 <label><b>Position:</b> {{ position.toFixed(2) }} m</label> 75 <label><b>Velocity:</b> {{ velocity.toFixed(2) }} m/s</label> 76 <label><b>Force:</b> {{ force.toFixed(2) }} N</label> 77 <label><b>Acceleration:</b> {{ acceleration.toFixed(2) }} m/s<sup>2</sup></label> 78 </div> 79 </div> 80 81 <div id="info" v-show="infoVisible" hidden> 82 <h2>Simulation Information</h2> 83 <p>This simulation consists of an object attached to a spring that can stretch and contract.</p> 84 85 <p>You can control the simulation using these variables:</p> 86 <ul> 87 <li><b>Mass:</b> The mass of the object</li> 88 <li><b>Initial Position:</b> The initial displacement of the object relative to the point of equilibrium</li> 89 <li><b>Stiffness:</b> The stiffness coefficient of the spring</li> 90 </ul> 91 92 <p>The simulation also contains these output measurements:</p> 93 <ul> 94 <li><b>Time:</b> The time that has passed</li> 95 <li><b>Period:</b> The period of the spring-mass system</li> 96 <li><b>Amplitude:</b> The maximum displacement of the object relative to the point of equilibrium</li> 97 <li><b>Position:</b> The current displacement of the object relative to the point of equilibrium</li> 98 <li><b>Velocity:</b> The current velocity of the object</li> 99 <li><b>Force:</b> The force currently being exerted on the object by the spring</li> 100 <li><b>Acceleration:</b> The current acceleration of the object</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 \( T = { 2 \cdot \pi \cdot \sqrt{ m \over k } } \) 114 <ul> 115 <li>\(T\) is the period of the spring-mass system</li> 116 <li>\(m\) is the mass of the object</li> 117 <li>\(k\) is the stiffness coefficient of the spring</li> 118 </ul> 119 </li> 120 <li> 121 \( x = { x_0 \cdot cos{ t \cdot k \over m } } \) 122 <ul> 123 <li>\(x\) is the displacement of the object relative to the point of equilibrium</li> 124 <li>\(x_0\) is the initial displacement of the object relative to the point of equilibrium</li> 125 <li>\(t\) is the time that has passed</li> 126 <li>\(k\) is the stiffness coefficient of the spring</li> 127 <li>\(m\) is the mass of the object</li> 128 </ul> 129 </li> 130 <li> 131 \( v = { -2 \cdot \pi \cdot x_0 \cdot sin{ t \cdot k \over m } } \) 132 <ul> 133 <li>\(v\) is the velocity of the object</li> 134 <li>\(x_0\) is the initial displacement of the object relative to the point of equilibrium</li> 135 <li>\(t\) is the time that has passed</li> 136 <li>\(k\) is the stiffness coefficient of the spring</li> 137 <li>\(m\) is the mass of the object</li> 138 </ul> 139 </li> 140 <li> 141 \( F_s = { -k \cdot x } \) 142 <ul> 143 <li>\(F\) is the force exerted on the object by the spring</li> 144 <li>\(k\) is the stiffness coefficient of the spring</li> 145 <li>\(x\) is the displacement of the object relative to the point of equilibrium</li> 146 </ul> 147 </li> 148 </ul> 149 150 <p>Notes:</p> 151 <ul> 152 <li>The dotted line represents the point of equilibrium.</li> 153 </ul> 154 </div> 155 </div> 156 </body> 157 </html>