-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathforce-normal.html
195 lines (195 loc) · 19.4 KB
/
force-normal.html
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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
<title>NBPSP - Force Normal</title>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="UTF-8">
<meta name="description" content="The New Buffalo Physics Skatepark's official website, with lots to learn about science, math, and fun.">
<meta name="keywords" content="NBPSP, New Buffalo, physics, skateboard, skatepark, interactive physics, force normal">
<meta name="author" content="Wesley McGinn">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/svg" href="./images/logo.svg">
<link rel="shortcut icon" href="./images/logo.png">
<link rel="stylesheet" type="text/css" href="./style.css?v=4">
<script src="./scripts/main.js?v=4603039019916211" type="text/javascript"></script>
<script src="./scripts/menu.js?v=4" type="text/javascript"></script>
</head>
<body onresize="resize()" onload="setupMenu();setup()" onunload="teardown()">
<ul id="menu">
<li id="logo" onclick="location.assign('./home.html')">
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g transform="scale(0.125 0.125)">
<g>
<ellipse cx="128" cy="138" fill-opacity="0" rx="27.79154" ry="130" stroke="#0000ff" stroke-width="5"/>
<ellipse cx="115" cy="128" fill-opacity="0" rx="25" ry="120" stroke="#0000ff" stroke-width="5" transform="matrix(0.555831 0.938194 -0.962727 0.541667 187.309 -39.2257)"/>
<ellipse cx="115" cy="128" fill-opacity="0" rx="25" ry="120" stroke="#0000ff" stroke-width="5" transform="matrix(-0.555831 0.938194 -0.962727 -0.541667 315.15 99.441)"/>
<circle cx="128.00001" cy="138" fill="#ffb200" r="8.77" stroke="#ffb200" stroke-width="8"/>
</g>
<g>
<line fill="none" stroke="#7f7f7f" stroke-width="10" transform="rotate(-32.7619 95.4205 374.694)" x1="88.60321" x2="102.23786" y1="361.87425" y2="387.514"/>
<line fill="none" stroke="#7f7f7f" stroke-width="12" transform="rotate(-32.7619 106.938 365.105)" x1="117.47342" x2="96.40168" y1="349.23268" y2="380.97714"/>
<line fill="none" stroke="#7f7f7f" stroke-width="12" transform="rotate(-32.7619 323.884 226.949)" x1="315.20727" x2="332.56047" y1="212.29725" y2="241.59982"/>
<line fill="none" stroke="#7f7f7f" stroke-width="10" transform="rotate(-32.7619 337.243 219.077)" x1="341.58175" x2="332.90516" y1="207.47842" y2="230.67629"/>
<circle cx="111.25488" cy="385.55703" fill="#0000bf" r="10" stroke="#ffb200" stroke-width="8" transform="rotate(-32.7619 111.255 385.557)"/>
<circle cx="340.56973" cy="237.9894" fill="#0000bf" r="10" stroke="#ffb200" stroke-width="8" transform="rotate(-32.7619 340.57 237.989)"/>
<rect fill="#000000" height="7.32" stroke="#0000ff" stroke-width="0" transform="rotate(-32.7619 327.076 214.731)" width="52.05958" x="301.04664" y="211.06795"/>
<rect fill="#000000" height="7.32" stroke="#0000ff" stroke-width="0" transform="rotate(-32.7619 95.6769 363.64)" width="52.05958" x="69.6471" y="359.97709"/>
<path d="m-28.58107,268.38868l83.66719,17.09317l34.70639,-3.66282l234.26813,0l30.98785,4.88376l80.5684,-17.09317" fill-opacity="0" stroke="#0000ff" stroke-width="12" transform="rotate(-32.7619 203.518 277.546)"/>
</g>
</g>
</svg>
</li>
<li id="title" onclick="location.assign('./home.html')">
<h2><abbr title="New Buffalo Physics Skatepark">NBPSP</abbr></h2>
</li>
<li id="ham" onclick="ham()">
<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g transform="scale(0.75 0.75)">
<rect fill="white" height="10" rx="5" ry="5" stroke-width="0" width="40" x="0" y="0"/>
<rect fill="white" height="10" rx="5" ry="5" stroke-width="0" width="40" x="0" y="30"/>
<rect fill="white" height="10" rx="5" ry="5" stroke-width="0" width="40" x="0" y="15"/>
</g>
</svg>
</li>
<li class="ham" onclick="location.assign('./friction.html')">Friction</li>
<li class="ham" onclick="location.assign('./force-normal.html')">Force Normal</li>
<li class="ham" onclick="location.assign('./centripetal-acceleration.html')">Centripetal Acceleration</li>
<li class="ham" onclick="location.assign('./momentum.html')">Momentum</li>
<li class="ham" onclick="location.assign('./potential-to-kinetic-energy.html')">Potential to Kinetic Energy</li>
</ul>
<div class="box" height="60px"></div>
<div id="content" onmouseenter="unselectHam()">
<div class="col" id="col1">
<section>
<details>
<summary onclick="this.innerHTML='Introduction to Forces'"><small>Tap Here for a Brief Introduction To Forces</small></summary>
<article>
<p>Forces create acceleration. When a force is applied to an object, the acceleration of that object changes to either slow down or to speed up in a particular direction. Because acceleration is necessary for all movement, forces are very important to the functioning of the universe.</p>
<p>There are many different kinds of forces, including gravitational force, lift force, buoyancy force, applied force, tension force, friction force, and normal force. These forces are usually referred to with the word "force" coming first; for example, gravitational force is referred to as "force gravitational" or "force of gravity".</p>
<p>This page specifically focuses on <em>force normal</em>. This may sound a bit strange at first. After all, most of the other forces refer to something specific, such as gravity, tension, or friction. Force normal, on the other hand, is a normal force? Aren't gravity and friction also normal? What does "force normal" refer to?</p>
<p>Keep reading to find out....</p>
</article>
</details>
</section>
<section>
<h1 class="blue">Force Normal</h1>
<article>
<p>Force normal is the force of a surface not letting an object go through it. Wouldn't it be abnormal if gravity pulled you through the ground, despite the ground being there to hold you up? Thanks to force normal, this doesn't happen to anybody.</p>
<p>Take a look at the force diagram below:</p>
<img class="demo" type="image/svg+xml" src="./images/sketches/forces.svg" alt="Diagram showing force normal pushing up equal with force gravitational pushing down">
<p>You will see that force normal is countering the force of gravity by accelerating the person in the opposite direction with an equal force. (The two little red lines across each of the two vectors mean that the magnitudes are equal.) This creates a net force, or "final force", of zero, so the person isn't accelerating or decelerating in any direction.</p>
<p>But force normal doesn't always push upwards; instead, it always works perpendicular to the surface, as shown in the diagram below:</p>
<img class="demo clickme" type="image/svg+xml" onclick="this.src='./images/sketches/perpendicular_net.svg'" src="./images/sketches/perpendicular.svg" alt="Diagram showing force normal coming out from slope while gravity still points down; click diagram to reveal the net force arrow to show the final direction of acceleration">
<p>When you combine the two force vectors, you end up with a net force vector, revealing the final direction of acceleration. You can tap the picture above to reveal the net force arrow (in orange).</p>
</article>
</section>
<section>
<h1 class="orange">How Does This Apply to Skateboarding?</h1>
<article>
<p>Everything in the skatepark that you ride on with your skateboard applies force normal to you. And now that you understand force normal, you can use it to do some cool stuff with your skateboard!</p>
<p>In the <a href="./centripetal-acceleration.html">previous physics tutorial</a>, the challenge was to take as sharp a turn as possible. Now, with the help of force normal, you should be able to make much sharper turns. See the <i class="red">challenge</i> on this page for more information.</p>
</article>
</section>
</div>
<div class="col" id="col2">
<section>
<h1>How Much Force Normal Is Holding You Up?</h1>
<article>
<p>How much normal force is holding you up right now? To start, if you are standing still on a flat slope, the force normal holding you up will be equal to the gravitational force pulling you down. Since a force is measured as mass times acceleration, the gravitational force pulling you down is equal to your mass times the constant acceleration of gravity:</p>
<div class="equation"><var title="Gravitational Force (in Newtons)">F<sub>G</sub></var> = <var title="Mass (in Kilograms)">m</var><var title="Graviatonal acceleration constant (in meters per second per second) [On earth, this is always approximately equal to 9.81]">g</var></div>
<p>If you aren't sure of your mass in kilograms, you can enter your weight into the calculator below to find it.</p>
</article>
</section>
<section>
<h1>Weight-to-Mass Calculator</h1><br>
<fieldset title='"Mass" and "Weight" are very different terms. If you do not know your mass, this field will help you to figure it out based on your weight on earth.'>
<legend>Find your mass in kilograms:</legend>
<label for="weight">Your Weight: </lablel>
<input id="weight" type="number" value="180" min="0" max="10000" oninput="weightCalculator.calculate(this.value, true)" onclick="weightCalculator.calculate(this.value, true)"/>
<label for="weight"><abbr title="Pounds">lbs.</abbr></label><br><br>
<label for="out1">Your Mass in Kilograms:</label><br>
<div class="output" id="out1">81.65</div>
</fieldset>
</section>
<section>
<p>The gravitational acceleration on earth is entered in a blank below. Simply enter your mass (calculated above) to find the exact amount of force normal holding you up.</p>
</section>
<section>
<h1>Force Normal 0° Calculator</h1><br>
<fieldset>
<legend>Find the amount of force normal applied to you:</legend>
<label for="normal0_gravity">Gravitational Acceleration:</label>
<input id="normal0_gravity" type="number" value="9.81" min="0" max="10000" oninput="normal0Calculator.calculate()" onclick="normal0Calculator.calculate()">
<label for="normal0_gravity"><abbr title="Meters per second per second">m/s<sup>2</sup></abbr></label><br><br>
<label for="normal0_mass">Your Mass:</label>
<input id="normal0_mass" type="number" value="81.65" min="0" max="10000" oninput="normal0Calculator.calculate()" onclick="normal0Calculator.calculate()">
<label for="normal0_mass"><b><abbr title="Kilograms">Kg</abbr></b></label><br><br>
<label for="normal0_out">Force Normal:</label><br>
<div class="output" id="normal0_out">800.99 <abbr title="Newtons">N</abbr></div>
</fieldset>
</section>
<section>
<h1>Angled Force Normal</h1>
<p>But what if you aren't on a flat surface? How much force normal is applied to you then? This question can be easily solved with the following formula:</p>
<div class="equation"><var title="Force Normal (in Newtons)">F<sub>N</sub></var> = <var title="Mass (in Kilograms)">m</var><var title="Gravitational Acceleration (in Meters per second per second)">g</var> <b style="font-family:sans-serif">cos(</b><var title="Angle of ground (in degrees)">θ</var><b style="font-family:sans-serif">)</b></div>
<p>You can easily use this formula by entering information in the calculator below. If the browser you are currently using allows access to the gyroscopes within your phone, the angle blank will automatically match the angle of your phone.</p>
</section>
<section>
<h1>Angled Force Normal Calculator</h1>
<fieldset>
<legend>Find the amount of force normal applied to you:</legend>
<label for="normal_gravity">Gravitational Acceleration:</label>
<input id="normal_gravity" type="number" value="9.81" min="0" max="10000" oninput="normalCalculator.calculate()" onclick="normalCalculator.calculate()">
<label for="normal_gravity"><abbr title="Meters per second per second">m/s<sup>2</sup></abbr></label><br><br>
<label for="normal_mass">Your Mass:</label>
<input id="normal_mass" type="number" value="81.65" min="0" max="10000" oninput="normalCalculator.calculate()" onclick="normalCalculator.calculate()">
<label for="normal_mass"><b><abbr title="Kilograms">Kg</abbr></b></label><br><br>
<label for="normal_theta">Angle of Ground:</label>
<input id="normal_theta" type="number" value="0" min="-180" max="180" oninput="normalCalculator.calculate()" onclick="normalCalculator.calculate()">
<label for="normal_theta"><abbr title="Degrees">°</abbr></label><br><br>
<label for="normal_out">Force Normal:</label><br>
<div class="output" id="normal_out">800.99 <abbr title="Newtons">N</abbr></div>
</fieldset>
</section>
</div>
<div class="col" id="col3">
<section>
<h1>About This Element</h1>
<article>
<p>The QR code you may have used to access this page is located near a large dish-shaped quarter-circle bank.</p>
<img class="demo" src="./images/photos/dish.jpg" alt="Image of this skatepark element" loading="lazy">
<p>This skatepark element is meant to help you make sharp turns at high speeds. Another such element is located in the northernmost back corner of the skatepark. With two dishes along one edge of the skatepark, you can sweep around the majority of the perimeter without having to stop or slow down much.</p>
</article>
</section>
<section>
<h1 class="noticable red">CHALLENGE!</h1>
<article>
<p>If you visited the <a href="./centripetal-acceleration.html">Centripetal Acceleration Page</a>, you may know that the challenge was to make the sharpest and fastest turn possible on a <i>flat surface</i>. You may have been surprised to discover that you really can't turn very sharp with the force of friction working alone to create your centripetal acceleration. But now that you know about force normal, you can use it to gain even more centripetal acceleration!</p>
<p>What you want is acceleration — specifically centripetal acceleration, which you can acquire through forces, since forces create the acceleration of a mass. Frictional force was previously the only contributor to your centripetal acceleration, but now you have the great and powerful FORCE NORMAL working for you too!</p>
<p>Your challenge is to make a quick and sharp turn with the help of force normal. Experience as much centripetal acceleration as possible by driving on the dish element near the enterance to the skatepark. <b class="red">DON'T</b> fly over the edge of it and <b class="red">DON'T</b> get hurt! Good luck!</p>
<details>
<summary onclick="this.innerHTML='<b>BETTER CHALLENGE!</b>'">Challenge too <i class="green">easy</i>? Tap here for a <b>harder</b> one!</summary>
<p>TRY THIS:</p>
<p>Start in the southernmost back corner of the skatepark, where there is the small ramp discussed in the <a href="./momentum.html">momentum page</a> on this website. With one great kick, roll down the side of the ramp, accross the back of the skatepark, around the dish at the other back corner, toward the front of the skatepark, around the main dish, and to the large ramp you will find right in front of you — all without touching the ground!</p>
<p>Use your <a href="./potential-to-kinetic-energy.html">potential-to-kinetic-energy conversion</a> from the top of the ramp to the bottom to gain <a href="./momentum.html">momentum</a>, which will propel you to the finish with steering help from <a href="./centripetal-acceleration.html">centripetal acceleration</a>, which is driven by forces such as <a href="./force-normal.html">force normal</a> and the force of <a href="./friction.html">friction</a>. If you read all the first four tutorials on this site, you probably understood all that. <img alt="" width="17px" src="./images/logo.svg"></p>
</details>
</article>
</section>
<section>
<h1 class="green">What's Next?</h1>
<p>Wouldn't it be nice if you could just keep gliding on your skateboard forever, without having to do anything to keep yourself moving? Unfortunately, one thing makes this impossible — one thing that you can learn about and manipulate to actually <i>help</i> you do even better skateboarding. That thing is <b><i>FRICTION</i>....</b></p>
<a href="./friction.html"><button>Go to Friction Page</button></a>
</section>
</div>
</div>
</body>
<script src="./scripts/skateboard.js?v=1" type="text/javascript"></script>
<script src="./scripts/calculators.js?v=3" type="text/javascript"></script>
<script type="text/javascript">
weightCalculator.setup();
normal0Calculator.setup();
normalCalculator.setup();
</script>
</html>