-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
170 lines (163 loc) · 10.5 KB
/
index.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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="canonical" href="https://www.jusleg.com">
<script type="text/javascript">
var host = "www.jusleg.com";
if ((host == window.location.host) && (window.location.protocol != "https:")){
window.location.protocol = "https";
console.log("switching");
}
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--jQuery Import -->
<script src="js/libs/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/libs/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<title>Super Pendulum</title>
<!-- Optional theme -->
<link rel="stylesheet" href="css/libs/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="js/libs/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="js/libs/jquery.finger.js"></script>
<!-- All JS -->
<script src="js/Constant.js"></script>
<script src="js/Item.js"></script>
<script src="js/component/Location.js"></script>
<script src="js/component/Circle.js"></script>
<script src="js/component/Magnet.js"></script>
<script src="js/component/Pendulum.js"></script>
</head>
<body>
<div class="container">
<h2>Magnetic Pendulum Simulator</h2>
<h4 style="color:gray;">by Amir Bawab, Félix Léger and Justin Léger</h4>
<div class="row">
<div class="col-sm-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Simulation</h3>
</div>
<div class="panel-body" align="center">
<canvas id="canvas"></canvas>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Parameters</h3>
</div>
<div class="panel-body">
<p>Mass of pendulum: <span id="pendulumMass">0.01</span> kg</p>
<input type="range" id="sliderMass" min="1" max="200" value="1"/>
<br>
<p>Magnet strength: <span id="magnetStrength">1000000</span> A/m</p>
<input type="range" id="sliderStrength" min="0" max="1000" value="100"/>
<br>
<p>Friction: <span id="friction">0.1</span> kg/s</p>
<input type="range" id="sliderFriction" min="0" max="50" value="1"/>
<br>
<p>Gravity: <span id="gravity">9.8</span> m/s<sup>2</sup></p>
<input type="range" id="sliderGravity" min="0" max="300" value="98"/>
<br>
<p>Height of pendulum: <span id="pendulumHeight">0.01</span> m</p>
<input type="range" id="sliderHeight" min="0" max="100" value="1"/>
<br>
<p>Initial magnets: <span id="initialMagnets">5</span></p>
<input type="range" id="sliderMagnets" min="1" max="10" value="5"/>
<br>
<button type="button" id="addNorth" class="btn btn-danger col-xs-12">Add Magnet</button>
<br><br>
<button type="button" id="pendulumNum" class="btn btn-success col-xs-12">Add Second Pendulum</button>
<br><br>
<button type="button" id="start" class="btn btn-warning col-xs-12">Start</button>
<br><br>
<button type="button" id="pause" class="btn btn-primary col-xs-12">Pause</button>
<br><br>
<button type="button" id="reset" class="btn btn-default col-xs-12">Reset Trace</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h4>Instructions</h4>
<div class="row" style="padding-bottom:20px">
<div class="col-sm-9">
<ul>
<li>Red magnets are north poles. Blue magnets are south poles. Opposites attract!</li>
<li>Doublie click on a magnet (or the pendulum) to change its polarity</li>
<li>You can drag and drop both the magnets and the pendulum to your liking, even during the simulation.</li>
<li>You can add a second pendulum (this is a great way to show the butterfly effect!).</li>
<li>When ready, press Start!</li>
<li>(If the app gets too slow, try clicking Reset Trace)</li>
</ul>
<br>
<h4>The Magnetic Pendulum</h4><p>
Physicists have always been fascinated by pendulums, and with good reason.
They are very simple systems that can be easily understood, yet still have
applications in almost all fields of physics. While they might be nothing more than a
mass at the end of a string, modeling their movement has been
used to solve many problems, from keeping time inside clocks to understanding
quantum mechanics!
<br>
This all changes, however, when a magnet is applied at the end of such pendulums.
Indeed, this transforms an object that is otherwise completely understood
into a concrete example of the <b>butterfly effect</b>. This effect can be summarized
as "small causes can have large consequences". This idea ties into a much broader
and complex concept of mathematics: chaos theory.
<br>
This simulation features the physics behind a magnetic pendulum. Notice how
modifying any setting or initial magnet location (even slightly) might result in changing the magnet over
which the pendulum might end in an unpredictable manner. This is the butterfly effect!
Try adding other magnets and changing the polarities to simulate the interesting
motions of the pendulum. You can also include another pendulum to show how a slight change in the initial coordinates
of a pendulum can have a big impact on its trajectory.
</p>
<br>
<h4>Simplifications</h4>
<p>
In order to simulate this experiment, the following simplifications were made:
</p>
<ul>
<li>The pendulum is treated as a mass attached to a spring moving in a 2D plane. This is the small angle approximation: it mimicks closely the behavior of a pendulum with a very long string</li>
<li>The magnets are treated as magnetic monopoles. While such monopoles have never been observed experimentally in nature, they provide a great model to simulate magnetic forces. Indeed, they remove the need to know the magnets' geometry to compute the magnetic force.</li>
</ul>
<h4>Physical Formulas</h4>
This entire simulation is based on Newton's famous second law, which states that the acceleration of any part of a system is equal to the sum of the forces applied on it divided by its mass.
There are three forces at play here: Gravity, Friction, and Magnetic attraction/repulsion. These are respectively expressed by the following equations:<br>
<br>
<p style="text-align:center">
<img src="eq1.gif"><br><br>
<img src="eq2.gif"><br><br>
<img src="eq3.gif"><br>
</p>
<br>
</div>
<div class="col-sm-3" align="middle">
<img alt="A typical magnetic pendulum sold as a toy" src="magnetic_pendulum.jpeg" style="width:100%;max-width:250px;"/>
</div>
</div>
</div>
<div class="col-lg-12" style="padding-bottom:20px;">
<h4>The team</h4>
<ul>
<li><a href="https://www.linkedin.com/in/amirbawab">Amir Bawab</a>: 3rd year Undergraduate in Computer Science at Concordia University</li>
<li><a href="https://www.linkedin.com/in/felleg">Félix Léger</a>: 2nd year Masters student in Particle Physics at McGill University</li>
<li><a href="http://justinleger.ca">Justin Léger</a>: 2nd year Undergraduate in Software Engineering at Concordia University</li>
</ul>
<br>
<img src="group_photo_hackathon2016-2.jpg" style="width:100%;max-width:500px;" align="center">
</div>
</div>
</div>
<script src="js/Physics.js"></script>
<script src="js/Canvas.js"></script>
<script src="js/main.js"></script>
<script src="js/Buttons.js"></script>
<script src="js/Slider.js"></script>
</body>
</html>