-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (147 loc) · 10.7 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trébuchet</title>
<link rel="stylesheet" href="style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js" integrity="sha512-asxKqQghC1oBShyhiBwA+YgotaSYKxGP1rcSYTDrB0U6DxwlJjU59B67U8+5/++uFjcuVM8Hh5cokLjZlhm3Vg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<ul class="tabs" id="tabs">
<label style=" width: 2%; display: block;">
<input type="checkbox" id="darkModeSwitch" onchange="darkModeSwitchChange()" style="display: none; cursor: pointer;">
<svg xmlns="http://www.w3.org/2000/svg" for="darkModeSwitch" id="switchOff" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" for="darkModeSwitch" id="switchOn" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</label>
<li data-tab-target="#simulationTab" class="active tab">Simulation</li>
<li data-tab-target="#graphTab" class="tab">Graphiques</li>
<li data-tab-target="#aboutTab" class="tab">À propos</li>
</ul>
<div class="tab-content">
<div class="active" id="simulationTab" data-tab-content>
<div class="menu" id="menu">
<h1>Trébuchet</h1>
<br>
<form>
<label class="menuLabel" for="fronde">Longueur de la fronde [m]</label>
<input class="menuInput" type="number" id="fronde" value=5>
<label class="menuLabel" for="longArm">Longueur du bras long [m]</label>
<input class="menuInput" type="number" id="longArm" value=5.7>
<label class="menuLabel" for="shortArm">Longueur du bras court [m]</label>
<input class="menuInput" type="number" id="shortArm" value=1.2>
<label class="menuLabel" for="pivotHeight">Hauteur du pivot [m]</label>
<input class="menuInput" type="number" id="pivotHeight" value=4>
<label class="menuLabel" for="weightLength">Longueur du contrepoids [m]</label>
<input class="menuInput" type="number" id="weightLength" value=1.4>
<label class="menuLabel" for="m2">Masse du projectile [kg]</label>
<input class="menuInput" type="number" id="m2" value=15>
<label class="menuLabel" for="m1">Masse du contrepoids [kg]</label>
<input class="menuInput" type="number" id="m1" value=2000>
<label class="menuLabel" for="mb">Masse de la barre [kg]</label>
<input class="menuInput" type="number" id="mb" value=100>
<label class="menuLabel" for="a">Angle de libération [°]</label>
<input class="menuInput" type="number" id="a" value=45>
<label class="menuLabel" for="vvent">Vitesse du vent [m/s]</label>
<input class="menuInput" type="number" id="vvent" value=8>
<label class="menuLabel" for="ivent">Inclinaison du vent [°]</label>
<input class="menuInput" type="number" id="ivent" value=30>
<label class="menuLabel" for="w">Rotation du boulet [°/s]</label>
<input class="menuInput" type="number" id="w" value=0>
<label class="menuLabel" id="ralenti" for="ralenticurseur">Ralenti: 1x</label>
<input class="menuInput" id="ralenticurseur" value = 2 type="range" min="0.01" max="10" step="0.01" onchange="RalentiCursorFunction()">
<div class="menuInput" style="padding: 10px; display: flex; align-items: center; justify-items: center;">
<label class="menuLabel" for="focus" style="cursor: pointer; margin: 0; padding: 0;">Focalisation sur le trébuchet: <span id="focusModeLabel"> Off</span></label>
<input class="menuInput" type="checkbox" id="focus" onchange="focusModeChange()" style="display: none; width: 0; width: 0;">
</div>
<label class="menuLabel" for="resolutions">Méthode de calcul</label>
<select class="menuInput" name="resolutions" id="resolutions">
<option value="RungeKutta">Runge-Kutta (RK4)</option>
<option value="Euler">Euler (RK1)</option>
<option value="Heun">Heun (RK2)</option>
</select>
<br><br>
<input class="menuInput" id="btnStart" type="button" value="Simulation" onclick="startSim()">
<input class="menuInput" id="btnPause" disabled type="button" value="Pause" onclick="OnOff()">
<input class="menuInput" id="btnSlowMotion" disabled type="button" value="Ralenti" onclick="slowMotion()">
<input class="menuInput" id="btnStop" disabled type="button" value="Arrêt définitif" onclick="Stop()"><br>
<input class="menuInput" id="btnResize" type="button" value="Redimensionner" onclick="Resize()">
</form>
</div>
<div class="simulationContainer">
<div class="dataContainer" id="dataContainer">
<p class="dataLabel">x: <span id="xposLabel">0</span> [m]</p>
<p class="dataLabel">y: <span id="yposLabel">0</span> [m]</p>
<p class="dataLabel">t: <span id="timeLabel">0</span> [s]</p>
<p class="dataLabel" id="speedLabel2" style="color:DarkMagenta;">vitesse: <span id="speedLabel">0</span> [m/s]</p>
<p class="dataLabel" id="alphaLabel2" style="color:red;">αlpha: <span id="alphaLabel">0</span>°</p>
<p class="dataLabel" id="betaLabel2" style="color:blue;">βeta: <span id="betaLabel">0</span>°</p>
<p class="dataLabel" id="gammaLabel2" style="color:green;">γamma: <span id="gammaLabel">0</span>°</p>
<p class="dataLabel" id="energieLabel2" style="color:orange;">énergie: <span id="energieLabel">0</span> [J]</p>
<p class="dataLabel" id="RmaxLabel2" style="color:gold;">Rmax: <span id="RmaxLabel">0</span> [m]</p>
</div>
<canvas class="simulation" id = "simulation"></canvas>
</div>
</div>
<div id="graphTab" data-tab-content>
<h1>Graphiques</h1>
<p>Les graphiques sont mis à jour à la fin de la simulation.</p>
<div class="chartContainer">
<div class="chartRow">
<div class="chart">
<p class="chartTitle">αlpha en fonction du temps</p>
<canvas id="alphaChart"></canvas>
</div>
<div class="chart">
<p class="chartTitle">βeta en fonction du temps</p>
<canvas id="betaChart"></canvas>
</div>
</div>
<div class="chartRow">
<div class="chart">
<p class="chartTitle">γamma en fonction du temps</p>
<canvas id="gammaChart"></canvas>
</div>
<div class="chart">
<p class="chartTitle">x en fonction du temps</p>
<canvas id="xChart"></canvas>
</div>
</div>
<div class="chartRow">
<div class="chart">
<p class="chartTitle">y en fonction du temps</p>
<canvas id="yChart"></canvas>
</div>
<div class="chart">
<p class="chartTitle">vitesse du projectile en fonction du temps</p>
<canvas id="speedChart"></canvas>
</div>
</div>
<div class="chartRow">
<div class="chart">
<p class="chartTitle">énergie en fonction du temps</p>
<canvas id="energyChart"></canvas>
</div>
</div>
</div>
</div>
<div id="aboutTab" data-tab-content>
<h1>À propos</h1>
<p>Le projet consiste en la simulation 2D d’un trébuchet en utilisant le langage de programmation
JavaScript. L’objectif final étant de pouvoir paramétrer les caractéristiques physiques de l’engin et d’observer, en conséquence, une modification du mouvement. Pour ceci, nous utilisons
les équations de Lagrange, des outils d’intégration numérique ainsi que les lois du mouvement
énoncées par Newton. Ce site a été réalisé dans le cadre de notre travail de Maturité 2020-2021 au Gymnase de Renens.
<br> Vous pouvez consulter le rapport de ce travail <a href="TM_Rapport.pdf" target="_blank">ici</a>,
tandis que l'intégralité du code source est disponible au téléchargement <a href="https://github.com/AdrienB2/TM_trebuchet" target="_blank">là</a>.</p>
</div>
</div>
<script src="js/ui.js"></script>
<script src="js/app.js"></script>
<script src="js/graphs.js"></script>
</body>
</html>