commit 099373c8c0215bba2b8ed61ecdafacd5dcf55fe6
parent 03dd97a034227481236b907cf2b823f6be9c075d
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date: Thu, 15 Jul 2021 13:10:16 -0700
Add equations to simulation information pages
Diffstat:
6 files changed, 201 insertions(+), 2 deletions(-)
diff --git a/simulations/atwood-machine.html b/simulations/atwood-machine.html
@@ -10,6 +10,8 @@
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.6"></script>
<link rel="stylesheet" href="styles.css">
<script src="atwood-machine.js"></script>
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+ <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body onload="createApp()">
<div id="app">
@@ -104,6 +106,37 @@
<li>Use the step <img alt="" src="../images/step-forward.svg"> button to advance the simulation by 0.01 seconds</li>
<li>Use the reset <img alt="" src="../images/reset.svg"> button to restore the simulation to its initial state</li>
</ul>
+
+ <p>Equations:</p>
+ <ul>
+ <li>
+ \( a = { F_{net} \over m_1 + m_2 } = { m_1 \cdot g - m_2 \cdot g \cdot sin{ \theta } \over m_1 + m_2 } \)
+ <ul>
+ <li>\(a\) is the acceleration of the blue weight</li>
+ <li>\(F_{net}\) is the net force on the blue weight</li>
+ <li>\(m_1\) is the mass of the red weight</li>
+ <li>\(m_2\) is the mass of the blue weight</li>
+ <li>\(g\) is the acceleration due to gravity</li>
+ <li>\(\theta\) is the angle of the incline that the blue weight sits on</li>
+ </ul>
+ </li>
+ <li>
+ \( v = { a \cdot t } \)
+ <ul>
+ <li>\(v\) is the velocity of the blue weight</li>
+ <li>\(a\) is the acceleration of the blue weight</li>
+ <li>\(t\) is the time that has passed</li>
+ </ul>
+ </li>
+ <li>
+ \( x = { {1 \over 2} \cdot a \cdot t^2 } \)
+ <ul>
+ <li>\(x\) is the displacement of the blue weight</li>
+ <li>\(a\) is the acceleration of the blue weight</li>
+ <li>\(t\) is the time that has passed</li>
+ </ul>
+ </li>
+ </ul>
</div>
</div>
</body>
diff --git a/simulations/circular-motion.html b/simulations/circular-motion.html
@@ -10,6 +10,8 @@
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.6"></script>
<link rel="stylesheet" href="styles.css">
<script src="circular-motion.js"></script>
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+ <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body onload="createApp()">
<div id="app">
@@ -101,6 +103,27 @@
<li>Use the step <img alt="" src="../images/step-forward.svg"> button to advance the simulation by 0.01 seconds</li>
<li>Use the reset <img alt="" src="../images/reset.svg"> button to restore the simulation to its initial state</li>
</ul>
+
+ <p>Equations:</p>
+ <ul>
+ <li>
+ \( v = { \sqrt{ F \cdot r \over m } } \)
+ <ul>
+ <li>\(v\) is the speed of the object</li>
+ <li>\(F\) is the magnitude of the centripetal force</li>
+ <li>\(r\) is the radius of the circle</li>
+ <li>\(m\) is the mass of the object</li>
+ </ul>
+ </li>
+ <li>
+ \( T = { 2 \cdot \pi \cdot r \over v } \)
+ <ul>
+ <li>\(T\) is the period of the object</li>
+ <li>\(r\) is the radius of the circle</li>
+ <li>\(v\) is the speed of the object</li>
+ </ul>
+ </li>
+ </ul>
</div>
</div>
</body>
diff --git a/simulations/horizontal-motion.html b/simulations/horizontal-motion.html
@@ -10,6 +10,8 @@
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.6"></script>
<link rel="stylesheet" href="styles.css">
<script src="horizontal-motion.js"></script>
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+ <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body onload="createApp()">
<div id="app">
@@ -90,7 +92,7 @@
<p>You can control the simulation using these variables:</p>
<ul>
<li><b>Mass:</b> The mass of the object</li>
- <li><b>Applied Force:</b> The force applied on the ball</li>
+ <li><b>Applied Force:</b> The applied force on the object</li>
<li><b>Static Friction:</b> The coefficient of static friction</li>
<li><b>Kinetic Friction:</b> The coefficient of kinetic friction</li>
<li><b>Gravity:</b> The acceleration due to gravity</li>
@@ -110,6 +112,29 @@
<li>Use the step <img alt="" src="../images/step-forward.svg"> button to advance the simulation by 0.01 seconds</li>
<li>Use the reset <img alt="" src="../images/reset.svg"> button to restore the simulation to its initial state</li>
</ul>
+
+ <p>Equations:</p>
+ <ul>
+ <li>
+ \( | F_f | = { | \mu_k \cdot m \cdot g | } \)
+ <ul>
+ <li>\(F_f\) is the force of kinetic friction on the object</li>
+ <li>\(\mu_k\) is the coefficient of kinetic friction</li>
+ <li>\(m\) is the mass of the object</li>
+ <li>\(g\) is the acceleration due to gravity</li>
+ </ul>
+ </li>
+ <li>
+ \( a = { F_{net} \over m } = { F_a + F_f \over m } \)
+ <ul>
+ <li>\(a\) is the acceleration of the object</li>
+ <li>\(F_{net}\) is the net force on the object</li>
+ <li>\(F_a\) is the applied force on the object</li>
+ <li>\(F_f\) is the force of kinetic friction on the object</li>
+ <li>\(m\) is the mass of the object</li>
+ </ul>
+ </li>
+ </ul>
</div>
</div>
</body>
diff --git a/simulations/projectile-motion.html b/simulations/projectile-motion.html
@@ -12,6 +12,8 @@
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="projectile-motion.js"></script>
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+ <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body onload="createApp()">
<div id="app">
@@ -120,6 +122,48 @@
<li>Use the zoom in <img alt="" src="../images/zoom-in.svg"> and zoom out <img alt="" src="../images/zoom-out.svg"> buttons or the mouse wheel to zoom in and out</li>
<li>Use the reset zoom <img alt="" src="../images/home.svg"> button to undo all zooming and panning</li>
</ul>
+
+ <p>Equations:</p>
+ <ul>
+ <li>
+ \( x = { t \cdot v_0 \cdot cos{ \theta } } \)
+ <ul>
+ <li>\(x\) is the horizontal position of the projectile</li>
+ <li>\(t\) is the time that has passed</li>
+ <li>\(v_0\) is the initial velocity of the projectile</li>
+ <li>\(\theta\) is the angle that the projectile was launched at</li>
+ </ul>
+ </li>
+ <li>
+ \( y = { y_0 + t \cdot v_0 \cdot sin{ \theta } - {1 \over 2} \cdot g \cdot t^2 } \)
+ <ul>
+ <li>\(y\) is the vertical position of the projectile</li>
+ <li>\(y_0\) is the initial height of the projectile</li>
+ <li>\(t\) is the time that has passed</li>
+ <li>\(v_0\) is the initial velocity of the projectile</li>
+ <li>\(\theta\) is the angle that the projectile was launched at</li>
+ <li>\(g\) is the acceleration due to gravity</li>
+ </ul>
+ </li>
+ <li>
+ \( v_x = { v_0 \cdot cos{ \theta } } \)
+ <ul>
+ <li>\(v_x\) is the horizontal velocity of the projectile</li>
+ <li>\(v_0\) is the initial velocity of the projectile</l>
+ <li>\(\theta\) is the angle that the projectile was launched at</li>
+ </ul>
+ </li>
+ <li>
+ \( v_y = { v_0 \cdot sin{ \theta } - g \cdot t } \)
+ <ul>
+ <li>\(v_y\) is the vertical velocity of the projectile</li>
+ <li>\(v_0\) is the initial velocity of the projectile</l>
+ <li>\(\theta\) is the angle that the projectile was launched at</li>
+ <li>\(g\) is the acceleration due to gravity</li>
+ <li>\(t\) is the time that has passed</li>
+ </ul>
+ </li>
+ </ul>
</div>
</div>
</body>
diff --git a/simulations/simple-pendulum.html b/simulations/simple-pendulum.html
@@ -10,6 +10,8 @@
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.6"></script>
<link rel="stylesheet" href="styles.css">
<script src="simple-pendulum.js"></script>
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+ <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body onload="createApp()">
<div id="app">
@@ -79,7 +81,7 @@
<p>You can control the simulation using these variables:</p>
<ul>
- <li><b>Radius:</b> The length of the string</li>
+ <li><b>Radius:</b> The length of the pendulum</li>
<li><b>Initial Angle:</b> The initial angle of the pendulum</li>
<li><b>Gravity:</b> The acceleration due to gravity</li>
</ul>
@@ -98,6 +100,36 @@
<li>Use the step <img alt="" src="../images/step-forward.svg"> button to advance the simulation by 0.01 seconds</li>
<li>Use the reset <img alt="" src="../images/reset.svg"> button to restore the simulation to its initial state</li>
</ul>
+
+ <p>Equations:</p>
+ <ul>
+ <li>
+ \( T = { 2 \cdot \pi \cdot \sqrt{ \ell \over g } } \)
+ <ul>
+ <li>\(T\) is the period of the pendulum</li>
+ <li>\(\ell\) is the length of the pendulum</li>
+ <li>\(g\) is the acceleration due to gravity</li>
+ </ul>
+ </li>
+ <li>
+ \( \theta = { \theta_0 \cdot cos{ t \cdot g \over \ell } } \)
+ <ul>
+ <li>\(\theta\) is the angle of the pendulum</li>
+ <li>\(\theta_0\) is the initial angle of the pendulum</li>
+ <li>\(t\) is the time that has passed</li>
+ <li>\(g\) is the acceleration due to gravity</li>
+ <li>\(\ell\) is the length of the pendulum</li>
+ </ul>
+ </li>
+ <li>
+ \( a = { g \cdot sin{ \theta } } \)
+ <ul>
+ <li>\(a\) is the acceleration of the mass</li>
+ <li>\(g\) is the acceleration due to gravity</li>
+ <li>\(\theta\) is the angle of the pendulum</li>
+ </ul>
+ </li>
+ </ul>
</div>
</div>
</body>
diff --git a/simulations/spring-mass-system.html b/simulations/spring-mass-system.html
@@ -10,6 +10,8 @@
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.6"></script>
<link rel="stylesheet" href="styles.css">
<script src="spring-mass-system.js"></script>
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+ <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body onload="createApp()">
<div id="app">
@@ -105,6 +107,46 @@
<li>Use the reset <img alt="" src="../images/reset.svg"> button to restore the simulation to its initial state</li>
</ul>
+ <p>Equations:</p>
+ <ul>
+ <li>
+ \( T = { 2 \cdot \pi \cdot \sqrt{ m \over k } } \)
+ <ul>
+ <li>\(T\) is the period of the spring-mass system</li>
+ <li>\(m\) is the mass of the object</li>
+ <li>\(k\) is the stiffness coefficient of the spring</li>
+ </ul>
+ </li>
+ <li>
+ \( x = { x_0 \cdot cos{ t \cdot k \over m } } \)
+ <ul>
+ <li>\(x\) is the displacement of the object relative to the point of equilibrium</li>
+ <li>\(x_0\) is the initial displacement of the object relative to the point of equilibrium</li>
+ <li>\(t\) is the time that has passed</li>
+ <li>\(k\) is the stiffness coefficient of the spring</li>
+ <li>\(m\) is the mass of the object</li>
+ </ul>
+ </li>
+ <li>
+ \( v = { -2 \cdot \pi \cdot x_0 \cdot sin{ t \cdot k \over m } } \)
+ <ul>
+ <li>\(v\) is the velocity of the object</li>
+ <li>\(x_0\) is the initial displacement of the object relative to the point of equilibrium</li>
+ <li>\(t\) is the time that has passed</li>
+ <li>\(k\) is the stiffness coefficient of the spring</li>
+ <li>\(m\) is the mass of the object</li>
+ </ul>
+ </li>
+ <li>
+ \( F_s = { -k \cdot x } \)
+ <ul>
+ <li>\(F\) is the force exerted on the object by the spring</li>
+ <li>\(k\) is the stiffness coefficient of the spring</li>
+ <li>\(x\) is the displacement of the object relative to the point of equilibrium</li>
+ </ul>
+ </li>
+ </ul>
+
<p>Notes:</p>
<ul>
<li>The dotted line represents the point of equilibrium.</li>
