summaryrefslogtreecommitdiffstats
path: root/Html
diff options
context:
space:
mode:
authorpiernov <piernov@piernov.org>2014-03-13 16:48:55 +0100
committerpiernov <piernov@piernov.org>2014-03-13 16:48:55 +0100
commitc9af7bb67bfefc3f37b4cdd4a066a29138f202b3 (patch)
tree93bbee2437b6f78fb7f46d1193d00279b6852c35 /Html
downloadSynthe3000-c9af7bb67bfefc3f37b4cdd4a066a29138f202b3.tar.gz
Synthe3000-c9af7bb67bfefc3f37b4cdd4a066a29138f202b3.tar.bz2
Synthe3000-c9af7bb67bfefc3f37b4cdd4a066a29138f202b3.tar.xz
Synthe3000-c9af7bb67bfefc3f37b4cdd4a066a29138f202b3.zip
Importation du projetHEADmaster
Diffstat (limited to 'Html')
-rw-r--r--Html/Agenda.html26
-rw-r--r--Html/AlexBrush-Regular.ttfbin0 -> 49020 bytes
-rw-r--r--Html/Capture-1.pngbin0 -> 136531 bytes
-rw-r--r--Html/Capture.pngbin0 -> 21231 bytes
-rw-r--r--Html/Cercle.pngbin0 -> 12460 bytes
-rw-r--r--Html/Distance.pngbin0 -> 13096 bytes
-rw-r--r--Html/Distance.tex25
-rw-r--r--Html/Finalité.html20
-rw-r--r--Html/Réalisation.html133
-rw-r--r--Html/Style.css51
10 files changed, 255 insertions, 0 deletions
diff --git a/Html/Agenda.html b/Html/Agenda.html
new file mode 100644
index 0000000..bcf7fcd
--- /dev/null
+++ b/Html/Agenda.html
@@ -0,0 +1,26 @@
+<?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>
+ <h1>Présentation du projet</h1>
+ <h2><u>L'agenda :</u></h2>
+ <p><b><u>Jeudi 23 Janvier :</b></u> Première idée de projet, ultiliser le digicode pour en faire un faiseur de son.
+ Le but étant de jouer "Au clair de la lune", on comparera la mélodie joué avec la mélodie attendu.
+ Pierre-Emmanuel s'occupe du synthétiseur utilisé afin d'avoir les sons. Arthur s'occupe des pages html ainsi que du début de la transformation du digicode.</p>
+ <p><b><u>Jeudi 30 Janvier :</b></u> Après maturation du projet, nous voulons créer un mini shyntétiseur composé de deux octaves. Le but est d'afficher une partition de musique et de la faire jouer à l'utilisateur. Un système de point pourra être mis en place afin de noter la préstation du joueur.</p>
+ <p><b><u>Jeudi 6 Février :</b></u> Le synthétiseur est terminé, la mise en forme des pages html est en cours ainsi que la conversion du projet réalisé en java script.</p>
+</body>
+
+</html>
diff --git a/Html/AlexBrush-Regular.ttf b/Html/AlexBrush-Regular.ttf
new file mode 100644
index 0000000..58c43a9
--- /dev/null
+++ b/Html/AlexBrush-Regular.ttf
Binary files differ
diff --git a/Html/Capture-1.png b/Html/Capture-1.png
new file mode 100644
index 0000000..da16e49
--- /dev/null
+++ b/Html/Capture-1.png
Binary files differ
diff --git a/Html/Capture.png b/Html/Capture.png
new file mode 100644
index 0000000..e18a85c
--- /dev/null
+++ b/Html/Capture.png
Binary files differ
diff --git a/Html/Cercle.png b/Html/Cercle.png
new file mode 100644
index 0000000..fa32803
--- /dev/null
+++ b/Html/Cercle.png
Binary files differ
diff --git a/Html/Distance.png b/Html/Distance.png
new file mode 100644
index 0000000..bb0382d
--- /dev/null
+++ b/Html/Distance.png
Binary files differ
diff --git a/Html/Distance.tex b/Html/Distance.tex
new file mode 100644
index 0000000..b562249
--- /dev/null
+++ b/Html/Distance.tex
@@ -0,0 +1,25 @@
+\documentclass[a3paper,oneside, landscape,12pt]{article}
+
+\usepackage{geometry}
+\usepackage{titlesec}
+\usepackage[utf8]{inputenc} % un package
+\usepackage[T1]{fontenc} % un second package
+\usepackage{lmodern}
+\usepackage[francais]{babel} % un troisième package
+\usepackage{amsmath}
+\usepackage{amsfonts}
+\usepackage{pstricks-add}
+
+%\color{blue}
+\geometry{margin={1in,1in}}
+%\setlength{\unitlength}{1mm}
+\renewcommand{\FrenchLabelItem}{\textbullet}
+\titlespacing*{\chapter}{0pt}{-70pt}{20pt}
+\titleformat{\chapter}[display]{\normalfont\huge\bfseries}{\chaptertitlename\ \thechapter}{20pt}{\Huge}
+
+\begin{document}
+\noindent
+\\
+$AB = \sqrt{(x_B-x_A)^2 + (y_B-y_A)^2} \leq r$\\
+$\sqrt{(recordButtonCoordinates[0]*windowSize[0] - (float)mouseX)^2 + (recordButtonCoordinates[1]*windowSize[1] - (float)mouseY)^2} \hspace{2mm} \leq \hspace{2mm} buttonRadius*windowSize[0]$
+\end{document}
diff --git a/Html/Finalité.html b/Html/Finalité.html
new file mode 100644
index 0000000..c8637cb
--- /dev/null
+++ b/Html/Finalité.html
@@ -0,0 +1,20 @@
+<?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>
+ <p>Finalement, nous avons réussit à faire ce que nous voulions, c'est à dire, un synthétiseur affichant une partition, la jouant et comportant un système de score comparant la musique jouée par le synthétiseur et celle jouée par l'utilisateur. </p>
+</body>
+
+</html>
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>
diff --git a/Html/Style.css b/Html/Style.css
new file mode 100644
index 0000000..9f72910
--- /dev/null
+++ b/Html/Style.css
@@ -0,0 +1,51 @@
+h1
+{
+ color: blue;
+}
+
+h2
+{
+ color: red;
+}
+
+@font-face
+{
+ font-family: 'OMGDatpolice';
+ src: url('AlexBrush-Regular.ttf');
+}
+
+body
+{
+ font-family: OMGDatpolice, Verdana;
+}
+
+body
+{
+ font-size: 1.3em;
+}
+
+
+body
+{
+ background-color: #FF69B4;
+}
+
+table {
+ border: 3px solid blue;
+}
+
+tr {
+ border: 1px solid blue;
+}
+
+td {
+ border: 3px solid blue;
+}
+
+th {
+ border: 3px solid blue;
+}
+
+pre {
+ white-space:nowrap;
+}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-21 23:37:38 +0000