-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
81 lines (78 loc) · 3.97 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./stylesheet.css">
</head>
<body>
<div id="animationWrapper">
<div id="indicator" style="position:absolute;left:47.5vw;top:0.5vw;width:5vw;height:12vw;background-color:grey;z-index:0;"></div>
<div class="red block" id="redBlock"></div>
<div class="green block" id="greenBlock"></div>
</div>
<!--Proportional-->
<div class="flexrow" id="pControls">
<div class="sliderwrapper" id="pRed"></div>
<h1 class="fourth">Proportional</h1>
<div class="sliderwrapper" id="pGreen"></div>
</div>
<!--Integral-->
<div class="flexrow" id="iControls">
<div class="sliderwrapper" id="iRed"></div>
<h1 class="fourth">Integral</h1>
<div class="sliderwrapper" id="iGreen"></div>
</div>
<!--Derivative-->
<div class="flexrow" id="dControls">
<div class="sliderwrapper" id="dRed"></div>
<h1 class="fourth">Derivative</h1>
<div class="sliderwrapper" id="dGreen"></div>
</div>
<div class="flexrow">
<!--Start/Stop controls-->
<div>
<button id="start">Restart/New options</button>
<button id="pause">Pause (press k)</button>
</div>
</div>
<div class="flexrow" id="graphs">
<div style="width:50%">
<h1 class="fourth">About the Simulation</h1>
<p>
This simulation demonstrates what various parts of a PID loop does, and how they interact. PID stands for Proportional Integral
Derivitve, and is a method of motion control or responsive systems. Each component is very complicated, and there
are many
<a href="https://en.wikipedia.org/wiki/PID_controller">sources</a> availible for in-depth information, but here is a short summary:
</p>
<ul>
<li>P: Proportional gain directs system output to be against and directly proportional to system error (error is
the difference between desired position and current position). This makes it great for moving toward the
target, but can overshoot. Another problem is since the output approachs zero as error aproaches zero, friction
or gravity can cause it to stop far away from the target (steady state error).</li>
<li>I: Integral gain directs the system against the integral of error since the desired position was set. This is
very good for decreasing steady state error, but decreases system stability (causes oscilations).</li>
<li>D: Derivitve gain directs the system poroprtional to the change in error, and has the effect of dampening/stabilizing
the system.</li>
</ul>
<p>Total system output is found by assigining specific multipliers to these values, and summing it up.</p>
<p>The following variables were included in the simulation: </p>
<ul>
<li>Accleration and momentum. Systems cannot stop instantly, and carry through after motor output is set to zero.
Similarily, it takes time for motors to accelerate.</li>
<li>Friction. For this simulation, there is both a constant friction (resistant to movement at any velocity) and
a proportional friction (resistant to movement scaling with velocity). This stabilizes the system, but contributes
to steady state error.</li>
<li>Gravity. This simulation includes gravity, or a spring or some other force, pulling the system to the left, contributing
to steady state error.</li>
</ul>
</div>
<div id="greenGraph"></div>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="machine.js"></script>
</body>
</html>