CircularMotion/index.html at master · nwager/CircularMotion · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<DOCTYPE HTML>
<html lang="en">
<head>
    <title>SL Circular Motion</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

	<script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>

        MathJax.Hub.Config({
            jax: ["input/TeX","output/HTML-CSS"],
            displayAlign: "left"
        });

    </script>
    <!-- https://www.mathjax.org/ -->
</head>
<body>
    <h1 class="banner">Uniform Circular Motion</h1>

    <p id="p1"><span style="color:lemonchiffon;">Uniform circular motion.</span> The moving object travels in a circular path.
        The magnitude of linear velocity, acceleration, and centripetal force stays constant, but their direction changes.
        The red arrow represents the direction of the linear velocity and the black arrow represents the direction of the
        acceleration and resultant force.
        <br>
        Useful equations: <br>
        $$
        \begin{equation}
        F_c = {m v^2 \over r}
        v = \omega r
        \end{equation}
        $$
    </p>

    <table>
        <tr>
            <td>Mass (\(m\))</td>
            <td><input type="text" id="mass1" value="1"> kg</td>
        </tr>
        <tr>
            <td>Radius (\(r\))</td>
            <td><input type="text" id="radius1" value="4"> m</td>
        </tr>
        <tr>
            <td>Angular velocity (\(\omega\))</td>
            <td><input type="text" id="angularVelocity1" value="3.14"> rad/s</td>
        </tr>
        <tr>
            <td>Linear velocity (\(v\))</td>
            <td><span class="display" id="linVelText1">number</span> m/s</td>
        </tr>
        <tr>
            <td>Centripetal force (\(F_c\))</td>
            <td><span class="display" id="cenForceText1">number</span> N</td>
        </tr>
    </table>

    <p></p>

    <canvas id="canvas1" width="600" height="300">
        Your browser doesn't support canvas.
    </canvas>

    <p></p>
    <p id="p2"><span style="color:lemonchiffon;">Maximum friction force.</span> An object is resting on a spinning surface.
        In this scenario, the centripetal force is the force of friction holding the object to the surface.
        <br>
        Useful equations: <br>
        $$
        \begin{equation}
        F_f = \mu F_N = \mu m g \\
        F_c = {m v^2 \over r}
        \end{equation}
        $$
    </p>
    <table>
            <tr>
                <td>Mass (\(m\))</td>
                <td><input type="text" id="mass2" value="1"> kg</td>
            </tr>
            <tr>
                <td>Radius (\(r\))</td>
                <td><input type="text" id="radius2" value="4"> m</td>
            </tr>
            <tr>
                <td>Angular velocity (\(\omega\))</td>
                <td><input type="text" id="angularVelocity2" value="3.14"> rad/s</td>
            </tr>
            <tr>
                <td><span id="coefLabel2">Coefficient of static friction (\(\mu\))</span></td>
                <td><input type="text" id="coef2" value="0.5"></td>
            </tr>
            <tr>
                <td>Centripetal force (\(F_c\))</td>
                <td><span class="display" id="cenForceText2">number</span> N</td>
            </tr>
            <tr>
                <td>Frictional force (\(F_f\))</td>
                <td><span class="display" id="fricForceText2">number</span> N</td>
            </tr>
        </table>
    <p></p>
    <canvas id="canvas2" width="600" height="300">
        Your browser doesn't support canvas.
    </canvas>

    <p></p>
    <p><span style="color:lemonchiffon;">Angled string tension.</span> An object is connected to a point above it
    by a string, similarly to a tetherball. The object moves around the post in uniform circular motion,
    resulating in a tension force being exerted by the string at an angle \(\theta\). The horizontal component
        of the tension force \(F_{Tx}\) is equal to the centripetal force and the vertical component \(F_{Ty}\) is equal
        to \(F_g\).
        <br>
        Useful equations: <br>
        $$
        \begin{equation}
        F_{Tx} = {mv^2 \over r} \\
        F_{Ty} = mg \\
        F_T = \sqrt{{F_{Tx}}^2 + {F_{Ty}}^2} \\
        \theta = {\tan}^{-1}({F_{Tx} \over F_{Ty}})
        \end{equation}
        $$
    </p>
    <table>
            <tr>
                <td>Mass (\(m\))</td>
                <td><input type="text" id="mass3" value="1"> kg</td>
            </tr>
            <tr>
                <td>Radius (\(r\))</td>
                <td><input type="text" id="radius3" value="4"> m</td>
            </tr>
            <tr>
                <td>Angular velocity (\(\omega\))</td>
                <td><input type="text" id="angularVelocity3" value="3.14"> rad/s</td>
            </tr>
            <tr>
                <td>Linear velocity (\(v\))</td>
                <td><span class="display" id="linearVelocity3">number</span> m/s</td>
            </tr>
            <tr>
                <td>Tension force (\(F_T\))</td>
                <td><span class="display" id="tenForceText3">number</span> N</td>
            </tr>
            <tr>
                <td>Angle (\(\theta\))</td>
                <td><span class="display" id="angleText3">number</span> degrees</td>
            </tr>
        </table>
    <canvas id="canvas3" width="600" height="300">
        Your browser doesn't support canvas.
    </canvas>

    <script src="democanvas.js"></script>

    <p id="equations"><strong>Uniform Circular Motion Equations</strong><br>
    $$
    \begin{equation}
    a_c = {v^2 \over r} = \omega^2 r \\
    F_c = m a_c = {m v^2 \over r} \\[16pt]
    F_f = \mu F_N \\
    \omega = {2 \pi \over T} \\
    v = \omega r \\[16pt]
    T = {1 \over f} \\
    f = {1 \over T} \\
    \end{equation}
    $$
    </p>

    <div class="footer">
        <a href="https://github.com/nwager/CircularMotion">Github Repository</a>
    </div>

</body>
</html>