-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
153 lines (147 loc) · 8.95 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Labo 4 - Algo num</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" >
</head>
<body>
<body>
<div class="container">
<div class="page-header">
<h1>2231.3 - Algorithme numérique : Laboratoire n°4</h1>
<i>Groupe B1</i>
<p>Auteurs :</p>
<ul>
<li>Raphael Margueron</li>
<li>Damian Petroff</li>
<li>Bastien Wermeille</li>
</ul>
<p>Dernière mise à jour : 16 avril 2018</p>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<h2>Utilisation</h2>
<p>
Le programme s'utilise en faisant varier les 4 paramètres ci-dessous.
Le graphique se met automatiquement à jours et zoom sur la portée des points à afficher.
</p>
<p>
A noter que si des asymptotes sont présentes (due par exemple à un nombre de termes de Taylor trop faible) le graphique ne va pas être zoom de manière précise.
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 col-sm-12">
<h2>Résultats</h2>
<label for='nbTermsTaylor'>Nombre de termes pour Taylor : <span id='nbTermsTaylor-value'></span></label>
<input type='range' min='1' max='1000' value='10' id='nbTermsTaylor' oninput="settingsChanged();" onchange="settingsChanged();"/>
<label for='nbSamplePerPeriod'>Nombre d'échantillons par periode : <span id='nbSamplePerPeriod-value'></span></label>
<input type='range' min='5' max='100' value='15' id='nbSamplePerPeriod' oninput="settingsChanged();" onchange="settingsChanged();"/>
<label for='nbPeriods'>Nombre de periodes : <span id='nbPeriods-value'></span></label>
<input type='range' min='1' max='20' value='3' id='nbPeriods' oninput="settingsChanged();" onchange="settingsChanged();"/>
<label for='h'>h (deltaX) des derivées : <span id='h-value'></span></label>
<input type='range' min='-20' max='0' value='-3' id='h' oninput="settingsChanged();" onchange="settingsChanged();"/>
<div id="result">
<div id='graph' style="width:100%;height:400px"></div>
<span class='legend' style='color:blue'>\(y = cos(x)\)</span>
<span class='legend' style='color:red'>\(y = cos'(x)\)</span>
<span class='legend' style='color:green'>\(y = cos''(x)\)</span>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6 col-sm-12">
<h2>Problème Bonus</h2>
<label for='nbTermsTaylor'>Angle de départ : <span id='AngleStart'></span>°</label>
<input type='range' min='0' max='90' value='45' title="45" id='angle-boat' data-toggle="popover" data-placement="top" data-content="45" />
<hr>
<form>
<div class="form-group row">
<label for="diameterLac" class="col-sm-4 col-form-label">Diamètre du lac [m]</label>
<div class="col-sm-8">
<input type="number" class="form-control" id="diameterLac" min="1" value="400">
</div>
</div>
<div class="form-group row">
<label for="navigationSpeed" class="col-sm-4 col-form-label">Vitesse de navigation [m/s]</label>
<div class="col-sm-8">
<input type="number" min="1" class="form-control" id="navigationSpeed" value="2">
</div>
</div>
<div class="form-group row">
<label for="towingSpeed" class="col-sm-4 col-form-label">Vitesse de remorquage [m/s]</label>
<div class="col-sm-8">
<input type="number" min="1" class="form-control" id="towingSpeed" value="4">
</div>
</div>
</form>
<h2>Résultats</h2>
<p>Temps effectif : <span id="time-std"></span> secondes</p>
<h2>Optimisation</h2>
<p>Meilleur angle : <span id="best-angle"></span>°</p>
<p>Temps correspondant : <span id="best-time"></span> secondes</p>
<p>Conclusion: <span id="conclusion-bonus"></span> du début à la fin</p>
</div>
<div class="col-md-6 col-sm-12">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 410 410">
<path id="arc1" fill="#ff0000" stroke="#ff0000" stroke-width="1" />
<ellipse ry="200" rx="200" id="svg_1" cy="205" cx="205" stroke-width="1.5" fill="#9ACEE6"/>
<line stroke-linecap="null" stroke-linejoin="null" id="line-boat" y2="4" x2="205" y1="205" x1="4" stroke-width="1.5" stroke="#ff0000" fill="none"/>
</svg>
</div>
<div class="col-md-12 col-sm-12">
<div id="graph-boat"></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<center>
<p>___________________________________________________</p>
<h1>Rapport</h1>
</center>
<h3>Contextualisation</h3>
<p>Ce laboratoire a pour but la représentation du cosinus avec les séries de Taylor ainsi que la dérivation numérique première et seconde de cette même function.</p>
<h3>Méthodologie et développement</h3>
<p>Nous avons commencé par poser le développement de Taylor des fonctions \(cos\) et \(sin\) en 0 et avons facilement pu en déduire les formule suivantes:</p>
<p>\[cos(θ)=\sum\limits_{n=0}^∞ \frac{(-1)^n}{(2n)!}θ^{2n} \quad\mathrm{et}\quad\ sin(θ)=\sum\limits_{n=0}^∞ \frac{(-1)^n}{(2n+1)!}θ^{2n+1}\]
La fonction \(sin\) n'est utile que pour le bonus.</p>
<p><b>Un problème s'est présenté lors de l'implémentation de cette formule :</b> Le numérateur et le dénominateur représentent des nombres très grands relativement rapidement, ce qui pose un problème d'overflow si on souhaite les stocker séparément.
Nous avons donc du réfléchir afin d'éviter ces overflows. Pour ce faire, nous stockons directement le quotient de la division dans une variable, ce qui évite un overflow en stockant séparément le diviseur et le dividande, vu que ce dernier tend rapidement vers l'infini.</p>
<p>Une fois cette étape effectuée, nous sommes passé à la réalisation de la fonction de dérivée et dérivée seconde. Nous avons utilisé les formules suivantes :</p>
<ul>
<li>Pour la dérivée : \[f'(x) = \frac{8(f(x+\frac{h}{2})-f(x-\frac{h}{2}))-f(x+h)+f(x-h)}{6h}+O(h^4)\]</li>
<li>Pour la dérivée seconde : \[f"(x) = \frac{f(x+h)+f(x-h)-2f(x)}{h^2}+O(h)\]</li>
</ul>
<p>Nous somme conscients que la formule de la dérivée seconde est relativement médiocre à cause de son ordre d'erreur en \(O(h)\) mais au lieu d'en utiliser "bêtement" une autre, nous avons préféré l'utiliser quand même afin de nous rendre compte du rendu de cette formule et en observer la fragilité.</p>
<p>Grâce aux formules des dérivées, nous avons pu approximer la fonction \(cosinus\) et \(sinus\)(utilisé dans le bonus).</p>
<h3>Tests</h3>
<p>Nous avons testé notre code avec différents paramètres notemment pour la partie bonus afin de vérifier que les données étaient cohérentes.</p>
<h3>Conclusion et perspective</h3>
<p>Il serait intéressant de pouvoir permettre la saisie d'une fonction quelconque, et ainsi pouvoir l'évaluer.</p>
<p>Notre code est pleinement fonctionnel et permet de calculer le \(cos\) en utilisant le développement de Taylor. Notre programme permet également de résoudre le programme Bonus avec un schéma dynamique offrant la possibilité de voir l'évolution du temps selon les différents paramètres.</p>
<p>En sachant que notre fonction est périodique sur \(2π\), nous avons améliorer notre function cos de Taylor et transformer l'angle Theta passé en paramètre afin qu'il se trouve dans la première période.</p>
</div>
</div>
<hr>
<footer>
<h3>Références de développement</h3>
<ul class="a-autoFill">
<li><a href="https://stackoverflow.com/questions/11313414/html5-drag-and-drop-load-text-file-in-a-textbox-with-javascript"></a></li>
<li><a href="https://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle"></a></li>
</ul>
</footer>
</div>
<script src="script.external/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML' async></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="script.external/d3.min.js"></script>
<script src="script.external/function-plot.js"></script>
<script src="script.js"></script>
</body>
</html>