1 files changed, 133 insertions, 0 deletions
diff --git a/Html/Réalisation.html b/Html/Réalisation.html
new file mode 100644
index 0000000..c51ebc2
--- /dev/null
+++ b/Html/Réalisation.html
@@ -0,0 +1,133 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
+
+<head>
+<style type="text/css" media="all">
+	@import url(Style.css);
+	</style> 
+    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
+    <title>Synthétiseur 3000</title>
+</head>
+
+<body>
+	<center><i><b><p>Mettre le son...</p></b></i></center>
+	<h2>Touches Blanches</h2>
+		<table>
+			<tr><th>Code interne (note, blanche)</th><th>Code de la note</th><th>Note associée</th></tr>
+			<tr><td>1, 1</td><td>60</td><td>D34</td></tr>
+			<tr><td>2, 1</td><td>62</td><td>Ré3</td></tr>
+			<tr><td>3, 1</td><td>64</td><td>Mi3</td></tr>
+			<tr><td>4, 1</td><td>65</td><td>Fa3</td></tr>
+			<tr><td>5, 1</td><td>67</td><td>Sol3</td></tr>
+			<tr><td>6, 1</td><td>69</td><td>La3</td></tr>
+			<tr><td>7, 1</td><td>71</td><td>Si3</td></tr>
+			<tr><td>8, 1</td><td>72</td><td>Do4</td></tr>
+			<tr><td>9, 1</td><td>74</td><td>Ré4</td></tr>
+			<tr><td>10, 1</td><td>76</td><td>Mi4</td></tr>
+			<tr><td>11, 1</td><td>77</td><td>Fa4</td></tr>
+			<tr><td>12, 1</td><td>79</td><td>Sol4</td></tr>
+			<tr><td>13, 1</td><td>81</td><td>La4</td></tr>
+			<tr><td>14, 1</td><td>83</td><td>Si4</td></tr>
+		</table>
+
+	<h2>Touches Noires</h2>
+		<table>
+			<tr><th>Code interne (note, noire)</th><th>Code de la note</th><th>Note associée</th></tr>
+			<tr><td>1, 2</td><td>61</td><td>Do3#</td></tr>
+			<tr><td>2, 2</td><td>63</td><td>Ré3#</td></tr>
+			<tr><td>3, 2</td><td>66</td><td>Fa3#</td></tr>
+			<tr><td>4, 2</td><td>68</td><td>Sol3#</td></tr>
+			<tr><td>5, 2</td><td>70</td><td>La3#</td></tr>
+			<tr><td>6, 2</td><td>73</td><td>Do4#</td></tr>
+			<tr><td>7, 2</td><td>75</td><td>Ré4#</td></tr>
+			<tr><td>8, 2</td><td>78</td><td>Fa4#</td></tr>
+			<tr><td>9, 2</td><td>80</td><td>Sol4#</td></tr>
+			<tr><td>10, 2</td><td>82</td><td>La4#</td></tr>
+		</table>
+
+	<h2>Touches Blanches</h2>
+		<table>
+			<tr><th>Touche du clavier</th><th>Code de la touche</th><th>Note associée</th></tr>
+			<tr><td>Tab</td><td>9</td><td>Do3</td></tr>
+			<tr><td>A</td><td>65</td><td>Ré3</td></tr>
+			<tr><td>Z</td><td>90</td><td>Mi3</td></tr>
+			<tr><td>E</td><td>69</td><td>Fa3</td></tr>
+			<tr><td>R</td><td>82</td><td>Sol3</td></tr>
+			<tr><td>T</td><td>84</td><td>La3</td></tr>
+			<tr><td>Y</td><td>89</td><td>Si3</td></tr>
+			<tr><td>U</td><td>85</td><td>Do4</td></tr>
+			<tr><td>I</td><td>73</td><td>Ré4</td></tr>
+			<tr><td>O</td><td>79</td><td>Mi4</td></tr>
+			<tr><td>P</td><td>80</td><td>Fa4</td></tr>
+			<tr><td>^</td><td>130/514/160</td><td>Sol4</td></tr>
+			<tr><td>$</td><td>515/164</td><td>La4</td></tr>
+			<tr><td>Enter</td><td>10</td><td>Si4</td></tr>
+		</table>
+
+	<h2>Touches Noires</h2>
+		<table>
+			<tr><th>Touche du clavier</th><th>Code de la touche</th><th>Note associée</th></tr>
+			<tr><td>&</td><td>49</td><td>Do3#</td></tr>
+			<tr><td>é</td><td>50</td><td>Ré3#</td></tr>
+			<tr><td>'</td><td>52</td><td>Fa3#</td></tr>
+			<tr><td>(</td><td>53</td><td>Sol3#</td></tr>
+			<tr><td>-</td><td>54</td><td>La3#</td></tr>
+			<tr><td>_</td><td>56</td><td>Do4#</td></tr>
+			<tr><td>ç</td><td>57</td><td>Ré4#</td></tr>
+			<tr><td>)</td><td>522/169</td><td>Fa4#</td></tr>
+			<tr><td>=</td><td>61</td><td>Sol4#</td></tr>
+			<tr><td>←</td><td>8</td><td>La4#</td></tr>
+		</table>
+
+	<h2>Évènements</h2>
+		<table>
+			<tr><th>Nom</th><th>Code</th><th>Description</th></tr>
+			<tr><td>MOUSEPRESSED</td><td>0</td><td>Clic sur un bouton de l'interface</td></tr>
+			<tr><td>KEYPRESSED</td><td>1</td><td>Appuie d'une touche du clavier</td></tr>
+			<tr><td>PLAYPRESSED</td><td>2</td><td>Clic sur le bouton lecture</td></tr>
+			<tr><td>MUSICSTARTED</td><td>3</td><td>Démarrage de la musique après un PLAYPRESSED</td></tr>
+			<tr><td>MUSICFINISHED</td><td>4</td><td>Fin de la musique</td></tr>
+			<tr><td>RECORDINGSTARTED</td><td>5</td><td>Début de l'enregistrement lors du clic sur le bouton enregistrer</td></tr>
+			<tr><td>RECORDINGSTOPPED</td><td>6</td><td>Fin de l'enregistrement après un clic sur le bouton enregistrer si RECORDINGSTARTED</td></tr>
+			<tr><td>MUSICPLAYED</td><td>7</td><td>La musique a déjà été jouée une fois</td></tr>
+		</table>
+
+
+
+	<h2>Le synthétiseur</h2>
+		<p>Le synthétiseur en lui même utilise les fonctions de <code>javax.sound.midi</code>. Il est initialisé grâce à la fonction <code>initSynth()</code> puis les notes sont jouées dans la fonction <code>playNotes()</code>.</p>
+		<p>Différentes variables permettent de configurer le comportement du synthétiseur :
+		<ul>
+		 <li> <code>bpm</code> = tempo de la musique</li>
+		 <li> <code>nVelocity</code> = volume de la musique</li>
+		</ul>
+
+		<p><code>playNotes()</code> parcourt le tableau des notes après avoir définit l'horodatage de lancement à la variable <code>timer</code>. C'est à dire que si le nombre de millisecondes écoulées depuis le lancement du programme est supérieur à la valeur enregistrée dans timer, additionée de la durée d'une note, le curseur <code>numnote</code> passe à la note suivante.
+		La durée d'une note est définie par rapport à la seconde valeur qui lui est attribuée dans le tableau <code>notes</code>, qui est sa durée relative par rapport aux autres multipliée de la durée d'une note, c'est à dire une minute divisée par le tempo. Nous sommes en millisecondes, donc 1 minute = 60 000 millisecondes.</p>
+		<p>La fonction <code>channel.noteOn()</code> permet de jouer la note.</p>
+		<p>La fonction <code>channel.noteOff()</code> la désactive par la suite.</p>
+		<p>Le projet <code>Processing.js</code> utilise une autre bibliothèque MIDI, <code>MIDI.js</code> s'utilisant de manière assez similaire avec les fonctions <code>MIDI.noteOn()</code> et <code>MIDI.noteOff()</code>.</p>
+
+	<h2>L'interface</h2>
+		<h3>Coordonnées relatives</h3>
+<p>Afin de faciliter les ajustements de l'interface (changement de résolution, ajout d'octaves, etc…), toutes les coordonnées, qui correspondent à l'origine à une valeur en pixel, ont été converties en coordonnées relatives par rapport à la taille de la fenêtre. Ainsi, un point de coordonnées <code>(1;1)</code> correspond au point en bas à droite de la fenêtre, et un point de coordonnées <code>(0;0)</code> au point en haut à gauche. Toutes ces valeurs sont donc des nombres à virgule flottante, stockées dans des <code>float</code>.</p>
+<p><code>windowSize[]</code> est un tableau indiquant la largeur et la hauteur de la fenêtre. Cependant, avec Processing.js, il n'est pas possible de définir dynamiquement la taille de la fenêtre, ces valeurs sont donc ecrites directement dans <code>size()</code></p>
+<p>En outre, <code>windowSize[]</code> est utilisé à chaque affichage d'un élément sur l'interface, étant donné l'utilisation de coordonnées relatives par rapport à la taille de la fenêtre, il faut donc les multiplier par la largeur et la hauteur puisque Processing utilise des coordonnées absolues en pixel.</p>
+<p>Enfin, les fonctions <code>rect()</code>, <code>triangle()</code>, <code>ellipse()</code>, <code>text()</code>, <code>image()</code> ont été redéfinies afin de faciliter leur utilisation avec des coordonnées relatives. <code>super</code> n'existant pas en JavaScript, le projet <code>Processing.js</code> utilise ces mêmes noms de fonctions précédés d'un <code>d</code>.
+
+		<h3>Détection d'un clic sur un élément<h3>
+			<h4>Touches du clavier</h4>
+<p>Puisque les touches ne sont que de simples rectangles et que les touches noires sont dessinées au dessus des touches blanches, on cherche tout d'abord à détecter si le clic a été effectué au niveau du clavier (<code>mouseY >= keyboardYCoordinate*windowSize[1]</code>), puis si une touche noire est cliquée (à l'aide de <code>blackKeys()</code>). Si la première condition est validée, et que <code>blackKeys()</code> retourne 0, cela signifie qu'un clic a été effectué sur le clavier, mais pas sur un touche noire. On a donc cliqué sur une touche blanche. <code>whiteKeys()</code> permet de détecter laquelle a été cliquée.
+			<h4>Boutons circulaires</h4>
+<p>Afin de détecter un clic sur un bouton circulaire (créé avec <code>ellipse()</code>) plutôt que rectangle, le mode de calcul des coordonées n'est pas le même. On utilise ici la formule de calcul de distance entre deux points :</p>
+<img src="Distance.png" />
+<p>Ici, <code>windowSize[]</code> est utilisé puisque les coordonnées <code>mouseX</code> et <code>mouseY</code> sont en pixel par rapport à la largeur et la hauteur de la fenêtre.</p>
+<p>La distance entre le point A (le centre du cercle) et le point B (le point cliqué) doit alors être inférieure au rayon du cercle :</p>
+<img src="Cercle.png" />
+
+</body>
+
+</html>