-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpotential-to-kinetic-energy.html
202 lines (202 loc) · 17.9 KB
/
potential-to-kinetic-energy.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
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
<title>NBPSP - Potential to Kinetic Energy</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, energy conversion, energy, potential energy, kinetic energy">
<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>
<h1 class="blue">Potential to Kinetic Energy</h1>
<article>
<p><b><i>Potential Energy</i></b> is the energy that something has within it that can allow it to move later on. This energy is stored, like in a stretched rubber band.</p>
<p><b><i>Kinetic Energy</i></b> is energy that creates movement.</p>
<p>In order for anything to move, its potential energy must be converted to kinetic energy. For example, when a stretched rubber band is released, the potential energy that it once held is immediately converted to kinetic energy, which thrusts its movement. This conversion from potential to kinetic energy is what this page is all about!</p>
</article>
</section>
<section>
<h1 class="orange">How Does This Apply to Skateboarding?</h1>
<article>
<p>When you are at the top of a ramp, you have the <b>potential energy</b> to go down. When you roll over the side of the ramp, this <b>potential energy</b> is converted to <b>kinetic energy</b>.</p>
<img class="demo" type="image/svg+xml" src="./images/sketches/potential-kinetic.svg?v=1" alt="Diagram showing person on skateboard on top of ramp with potential energy and person going down ramp with kinetic energy.">
<p>With a little bit of physics, you can determine exactly how much potential gravitational energy you have at the top of the ramp and how much kinetic energy you will have once you reach the bottom.</p>
<p>And here's the best part: When you know how much kinetic energy you have at the bottom of the ramp, you can find out exactly how fast you will be moving!</p>
</article>
</section>
<section>
<h1>Finding Your Potential Energy</h1>
<article>
<p>This equation is used to determine potential gravitational energy:</p>
<div class="equation"><var title="Gravitational Energy (In Joules)">GE</var> = <var title="Mass (In Kilograms)">m</var><var title="Gravity (In Newtons per Kilogram) [On Earth, this is always approximately equal to 9.81]">g</var><var title="Height / Distance to floor (In meters)">h</var></div>
<p>With the potential energy calculator on this page, you can easily use this formula to determine your potential gravitational energy at the top of the ramp!</p>
<p>First, you will need to find your mass. <b>Mass is very different from weight.</b> Unlike weight, mass doesn't change in different gravitational fields. But you can find out what your mass is from how much you weigh on Earth. The Weight-to-Mass calculator on this page will easily allow you to do this.</p>
</article>
</section>
<section>
<h1>Finding Your Kinetic Energy and Speed</h1>
<article>
<p>Since <b>ALL</b> of your potential energy will be converted to kinetic energy when you go down the ramp, your kinetic energy at the bottom of the ramp will be <b>EQUAL</b> to your potential gravitational energy at the top of the ramp.</p>
<p>Okay, so you have this amount of energy after you go down the side of the ramp. So what? Isn't it the <i>SPEED</i> that matters? Believe it or not, you can find out <i>exactly</i> how fast you will be moving by using another formula, with your gravitational energy as an input!</p>
<div class="equation"><var title="Kinetic Energy (In Joules)">KE</var> = ½<var title="Mass (In Kilograms)">m</var><var title="Velocity (In Meters per Second)">v</var><sup>2</sup></div>
<p>Go ahead and try it out! You can easily find your speed at the bottom of the ramp by using the Final Velocity Calculator on this page.</p>
</article>
</section>
</div>
<div class="col" id="col2">
<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>
<h1>Gravitational Potential Energy Calculator</h1><br>
<fieldset>
<legend>Find your potential energy:</legend>
<label for="mass">Your Mass:</lablel>
<input id="mass" type="number" value="81.65" min="0" max="10000" oninput="potentialCalculator.calculate()"/>
<label for="mass"><b><abbr title="Kilograms">Kg</abbr></b></label><br><br>
<label for="gForce">Gravitational Force:</lablel>
<input id="gForce" type="number" value="9.81" min="0" max="10000" oninput="potentialCalculator.calculate()"/>
<label for="gForce"><abbr title="Newtons per Kilogram">N/Kg</abbr></label><br><br>
<label for="height">Height of Ramp:</lablel>
<input id="height" type="number" value="1.524" min="0" max="10000" oninput="potentialCalculator.calculate()"/>
<select id="height_units" oninput="potentialCalculator.calculate()">
<option value="m" title="Meters">m</option>
<option value="cm" title="Centimeters">cm</option>
<option value="mm" title="Millimeters">mm</option>
<option value="ft" title="Feet">ft</option>
<option value="in" title="Inches">in</option>
<option value="mi" title="Miles">mi</option>
<option value="km" title="Kilometers">km</option>
</select><br><br>
<label for="out2">Your Potential Energy in Joules:</label><br>
<div class="output" id="out2">1342.77</div>
</fieldset>
</section>
<section>
<h1>Final Velocity Calculator</h1><br>
<fieldset>
<legend>Find your velocity at the bottom of the ramp:</legend>
<label for="KE">Kinetic Energy:</lablel>
<input id="KE" type="number" value="1342.77" min="0" max="100000000" oninput="finalVelocityCalculator.calculate()"/>
<label for="KE"><b><abbr title="Joules">J</abbr></b></label><br><br>
<label for="Mass">Your Mass:</lablel>
<input id="Mass" type="number" value="81.65" min="0" max="10000" oninput="finalVelocityCalculator.calculate()"/>
<label for="Mass"><b><abbr title="Kilograms">Kg</abbr></b></label><br><br>
<label for="out3">Your Velocity:</label><br>
<div class="output" id="out3">............</div>
</fieldset>
</section>
<section>
<h1>Wait A Minute....</h1>
<article>
<p>Notice anything weird about the Final Velocity Calculator? If you don't, try changing the mass in the Potential Energy Calculator. This will automatically update the inputs to the Final Velocity Calculator and recalculate the final velocity. Try watching the final velocity output as you change the mass in the Potential Energy Calculator. You will notice that it doesn't change.</p>
<p>No, the calculator is not broken. The fact is that mass has no relevance to how fast you will be traveling after going down the ramp.</p>
<details>
<summary>Explanation</summary>
<p>Take a look at the two equations we talked about earlier:</p>
<div class="equation"><var title="Gravitational Energy (In Joules)">GE</var> = <var title="Mass (In Kilograms)">m</var><var title="Gravity (In Newtons per Kilogram) [On Earth, this is always approximately equal to 9.81]">g</var><var title="Height / Distance to floor (In meters)">h</var></div>
<div class="equation"><var title="Kinetic Energy (In Joules)">KE</var> = ½<var title="Mass (In Kilograms)">m</var><var title="Velocity (In Meters per Second)">v</var><sup>2</sup></div>
<p>Since <abbr title="Gravitational Energy">GE</abbr> = <abbr title="Kinetic Energy">KE</abbr> on the ramp, we can replace <abbr title="Gravitational Energy">GE</abbr> with the value of <abbr title="Kinetic Energy">KE</abbr>. This is called substitution.</p>
<div class="equation"><var title="Mass (In Kilograms)">m</var><var title="Gravity (In Newtons per Kilogram) [On Earth, this is always approximately equal to 9.81]">g</var><var title="Height / Distance to floor (In meters)">h</var> = ½<var title="Mass (In Kilograms)">m</var><var title="Velocity (In Meters per Second)">v</var><sup>2</sup></div>
<p>Divide both sides of the equation by <abbr title="Mass">m</abbr> and you will get:</p>
<div class="equation"><var title="Gravity (In Newtons per Kilogram) [On Earth, this is always approximately equal to 9.81]">g</var><var title="Height / Distance to floor (In meters)">h</var> = ½<var title="Velocity (In Meters per Second)">v</var><sup>2</sup></div>
<p>Notice that <i>mass isn't involved in the equation at all</i>. That is why a change in mass will not will not affect the final velocity.</p>
</details>
</article>
</section>
</div>
<div class="col" id="col3">
<section>
<h1>About This Element</h1><br>
<img class="demo" type="image/svg+xml" src="./images/sketches/vert-ramp.svg?v=1" alt="Diagram of ramp showing 5-foot-radius quarter-of-a-circle cutout into cement">
<article>
<p>The skate<wbr>park element you may have found this QR code on is a Vert Ramp that is 5 feet (1.524 meters) tall and stretches out 5 feet (1.524 meters) horizontally. It is one of the tallest and most dangerous elements in the skatepark.</p>
</article>
</section>
<section>
<h1 class="red noticable">CHALLENGE!</h1>
<article>
<p>Your challenge is to convert your potential gravitational energy on the top of the vert ramp to kinetic energy that will bring you down the ramp. To do this, you must perform the daring task of riding your skateboard (or other form of transportation) over the edge of the ramp and, fueled with the newly converted energy, glide down the vert ramp at full velocity!</p>
<p>There's a catch, though: You have to do this <b class="red">WITHOUT GETTING HURT!</b></p>
<p>Good luck!</p>
</article>
</section>
<section>
<h1 class="green">What's Next?</h1>
<p>After you go down the ramp, your mass and velocity will combine to form <b><i>MOMENTUM</i>....</b></p>
<a href="./momentum.html"><button>Go to Momentum Page</button></a>
</section>
</div>
</div>
</body>
<script src="./scripts/skateboard.js?v=1" type="text/javascript"></script>
<script src="./scripts/calculators.js?v=2" type="text/javascript"></script>
<script type="text/javascript">
weightCalculator.setup();
potentialCalculator.setup();
finalVelocityCalculator.setup();
</script>
</html>