From c9af7bb67bfefc3f37b4cdd4a066a29138f202b3 Mon Sep 17 00:00:00 2001 From: piernov Date: Thu, 13 Mar 2014 16:48:55 +0100 Subject: Importation du projet --- Html/Agenda.html | 26 ++++++++ Html/AlexBrush-Regular.ttf | Bin 0 -> 49020 bytes Html/Capture-1.png | Bin 0 -> 136531 bytes Html/Capture.png | Bin 0 -> 21231 bytes Html/Cercle.png | Bin 0 -> 12460 bytes Html/Distance.png | Bin 0 -> 13096 bytes Html/Distance.tex | 25 ++++++++ "Html/Finalit\303\251.html" | 20 +++++++ "Html/R\303\251alisation.html" | 133 +++++++++++++++++++++++++++++++++++++++++ Html/Style.css | 51 ++++++++++++++++ 10 files changed, 255 insertions(+) create mode 100644 Html/Agenda.html create mode 100644 Html/AlexBrush-Regular.ttf create mode 100644 Html/Capture-1.png create mode 100644 Html/Capture.png create mode 100644 Html/Cercle.png create mode 100644 Html/Distance.png create mode 100644 Html/Distance.tex create mode 100644 "Html/Finalit\303\251.html" create mode 100644 "Html/R\303\251alisation.html" create mode 100644 Html/Style.css (limited to 'Html') 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 @@ + + + + + + + + + Synthétiseur 3000 + + + +

Mettre le son...

+

Présentation du projet

+

L'agenda :

+

Jeudi 23 Janvier : 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.

+

Jeudi 30 Janvier : 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.

+

Jeudi 6 Février : 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.

+ + + diff --git a/Html/AlexBrush-Regular.ttf b/Html/AlexBrush-Regular.ttf new file mode 100644 index 0000000..58c43a9 Binary files /dev/null and b/Html/AlexBrush-Regular.ttf differ diff --git a/Html/Capture-1.png b/Html/Capture-1.png new file mode 100644 index 0000000..da16e49 Binary files /dev/null and b/Html/Capture-1.png differ diff --git a/Html/Capture.png b/Html/Capture.png new file mode 100644 index 0000000..e18a85c Binary files /dev/null and b/Html/Capture.png differ diff --git a/Html/Cercle.png b/Html/Cercle.png new file mode 100644 index 0000000..fa32803 Binary files /dev/null and b/Html/Cercle.png differ diff --git a/Html/Distance.png b/Html/Distance.png new file mode 100644 index 0000000..bb0382d Binary files /dev/null and b/Html/Distance.png 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\303\251.html" "b/Html/Finalit\303\251.html" new file mode 100644 index 0000000..c8637cb --- /dev/null +++ "b/Html/Finalit\303\251.html" @@ -0,0 +1,20 @@ + + + + + + + + + Synthétiseur 3000 + + + +

Mettre le son...

+

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.

+ + + diff --git "a/Html/R\303\251alisation.html" "b/Html/R\303\251alisation.html" new file mode 100644 index 0000000..c51ebc2 --- /dev/null +++ "b/Html/R\303\251alisation.html" @@ -0,0 +1,133 @@ + + + + + + + + + Synthétiseur 3000 + + + +

Mettre le son...

+

Touches Blanches

+ + + + + + + + + + + + + + + + +
Code interne (note, blanche)Code de la noteNote associée
1, 160D34
2, 162Ré3
3, 164Mi3
4, 165Fa3
5, 167Sol3
6, 169La3
7, 171Si3
8, 172Do4
9, 174Ré4
10, 176Mi4
11, 177Fa4
12, 179Sol4
13, 181La4
14, 183Si4
+ +

Touches Noires

+ + + + + + + + + + + + +
Code interne (note, noire)Code de la noteNote associée
1, 261Do3#
2, 263Ré3#
3, 266Fa3#
4, 268Sol3#
5, 270La3#
6, 273Do4#
7, 275Ré4#
8, 278Fa4#
9, 280Sol4#
10, 282La4#
+ +

Touches Blanches

+ + + + + + + + + + + + + + + + +
Touche du clavierCode de la toucheNote associée
Tab9Do3
A65Ré3
Z90Mi3
E69Fa3
R82Sol3
T84La3
Y89Si3
U85Do4
I73Ré4
O79Mi4
P80Fa4
^130/514/160Sol4
$515/164La4
Enter10Si4
+ +

Touches Noires

+ + + + + + + + + + + + +
Touche du clavierCode de la toucheNote associée
&49Do3#
é50Ré3#
'52Fa3#
(53Sol3#
-54La3#
_56Do4#
ç57Ré4#
)522/169Fa4#
=61Sol4#
←8La4#
+ +

Évènements

+ + + + + + + + + + +
NomCodeDescription
MOUSEPRESSED0Clic sur un bouton de l'interface
KEYPRESSED1Appuie d'une touche du clavier
PLAYPRESSED2Clic sur le bouton lecture
MUSICSTARTED3Démarrage de la musique après un PLAYPRESSED
MUSICFINISHED4Fin de la musique
RECORDINGSTARTED5Début de l'enregistrement lors du clic sur le bouton enregistrer
RECORDINGSTOPPED6Fin de l'enregistrement après un clic sur le bouton enregistrer si RECORDINGSTARTED
MUSICPLAYED7La musique a déjà été jouée une fois
+ + + +

Le synthétiseur

+

Le synthétiseur en lui même utilise les fonctions de javax.sound.midi. Il est initialisé grâce à la fonction initSynth() puis les notes sont jouées dans la fonction playNotes().

+

Différentes variables permettent de configurer le comportement du synthétiseur : +

+ +

playNotes() parcourt le tableau des notes après avoir définit l'horodatage de lancement à la variable timer. 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 numnote 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 notes, 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.

+

La fonction channel.noteOn() permet de jouer la note.

+

La fonction channel.noteOff() la désactive par la suite.

+

Le projet Processing.js utilise une autre bibliothèque MIDI, MIDI.js s'utilisant de manière assez similaire avec les fonctions MIDI.noteOn() et MIDI.noteOff().

+ +

L'interface

+

Coordonnées relatives

+

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 (1;1) correspond au point en bas à droite de la fenêtre, et un point de coordonnées (0;0) au point en haut à gauche. Toutes ces valeurs sont donc des nombres à virgule flottante, stockées dans des float.

+

windowSize[] 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 size()

+

En outre, windowSize[] 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.

+

Enfin, les fonctions rect(), triangle(), ellipse(), text(), image() ont été redéfinies afin de faciliter leur utilisation avec des coordonnées relatives. super n'existant pas en JavaScript, le projet Processing.js utilise ces mêmes noms de fonctions précédés d'un d. + +

Détection d'un clic sur un élément

+

Touches du clavier

+

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 (mouseY >= keyboardYCoordinate*windowSize[1]), puis si une touche noire est cliquée (à l'aide de blackKeys()). Si la première condition est validée, et que blackKeys() 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. whiteKeys() permet de détecter laquelle a été cliquée. +

Boutons circulaires

+

Afin de détecter un clic sur un bouton circulaire (créé avec ellipse()) 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 :

+ +

Ici, windowSize[] est utilisé puisque les coordonnées mouseX et mouseY sont en pixel par rapport à la largeur et la hauteur de la fenêtre.

+

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 :

+ + + + + 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; +} -- cgit v1.2.3-54-g00ecf