SI28 - Rapport de Projet - Harmonia
Quentin RICHARD
Antony KRAAIJENBRINK
Source du projet
Notre production
Remerciements
Nous tenons à remercier l’ensemble des personnes nous ayant aidé dans la réalisation de cette application, que ce soit en terme de développement, pour des apports artistiques ou dans la réalisation de tests de fonctionnement.
Merci à Clément Gulbierz pour sa collaboration dans l’application en ayant créé les différentes musiques ainsi que réalisé leur design visuel.
Merci à Mr Serge Bouchardon pour son enthousiasme à l’égard de notre projet et sa participation à nos tests techniques.
Introduction
Dans le cadre de l’UV SI28 du semestre P20, nous avons eu l’idée de créer une application synéstésique liant, technologie, collaboration, son et image.
Notre idée principale est de permettre à différents utilisateurs de travailler ensemble sur une même musique et de réussir à créer un ensemble mélodieux qui génère également un tableau de formes géométriques dynamiques. L’utilisateur doit ressentir une synesthésie pendant sa composition avec les autres.
Afin d’utiliser notre application, le (les) joueur(s) n’a(ont) besoin que d’un smartphone et d’un ordinateur accédant à internet (et ayant du son).
Le principe d’utilisation de l’application sera détaillé par la suite.
Note d’intention
I. Le concept
Le projet Harmonia est une application interactive collaborative permettant de créer une ambiance sonore et visuelle relaxante et décontractante. Chaque joueur utilise l’écran de son smartphone afin de générer différents échantillons sonores.
Ces sons générés créent au même moment une ambiance lumineuse sur un écran ternaire.
L’écran génère différentes ambiances lumineurs selon l’endroit tapé sur le smartphone.
Tous les sons générés par les utilisateurs se retrouvent fusionnées sur un écran commun et génère une musique. Les smartphones agissent comme un controleur de cet écran. Nous voulons que l’utilisateur ressente son implication dans l’harmonie.
II. Les objectifs
L’objectif de ce projet est de pouvoir mêler ambiance sonore et lumineuse en permettant au joueur d’agir avec son smartphone. L’application existe à des fins relaxantes et permettant aux joueurs de participer ensemble à l’élaboration d’une oeuvre commune, qui soit à la fois sonore et lumineuse.
Nous avons pour but de permettre au joueur de jouer seul et ainsi de générer les effets lumineux et sonores sur son écran ternaire, que ce soit en jouant seul ou en collaboratif.
Pour réussir l’effet d’interaction commune il faut que les utilisateurs se sentent impliqués dans le rendu commun et aient l’impression de participer à l’oeuvre globale en identifiant ses impacts sur l’interface centrale.
III. Le public ciblé
Cette application s’adresse à tous les âges et peut même être utilisée simultanément par des personnes d’âges différents si tant est que la personne possède un smartphone. Nous cherchons avant tout à créer une expérience sensorielle collaborative. Amateurs et confirmés de musique pourront s’essayer à l’exercice de création musicale. L’application doit être intuitive d’utilisation et donner envie aux personnes de cliquer dessus pour qu’ils puissent tester des harmonies sans vraiment maitriser le son ou le visuel.
Cahier des Charges
I. Description fonctionnelle
Il est nécessaire de posséder un téléphone servant d’instrument (on le nommera Pad), ainsi qu’un écran ternaire (nommé Interface). Lorsque l’utilisateur tape sur l’écran, un carré de couleur est affiché et une boucle musicale dépendant de la position de la pression est jouée sur l’interface. Les utilisateurs doivent pouvoir jouer avec leur téléphone pour générer un pattern sonore et visuel sur l’interface. Le lancement d’une boucle musicale entraine également un effet visuel sur l’interface.
Il faut synchronisé les actions de l’utilisateur avec l’interface et faire en sorte que le rendu audio comme visuel soit agréable. Nous voulions dans un premier temps avoir une multitude d’interaction sur le pad et également la possibilité de pouvoir enregistrer ses compositions. Nous n’avons pas réalisé ces deux dernières fonctionnalités pour des raisons techniques.
II. Technologies utilisées
Notre application possède un Serveur et un application client.
Serveur:
Nous avons développé notre backend en node.js en utilisant différentes librairies:
Le but de ce backend permet trois choses:
- créer des salons musicaux
- communiquer les instruments joués via socket
- réccupérer les différentes musiques
Le smartphone se charge d’envoyer un message à chaque interaction faite. Ce message esttraité par le backend et envoyé à l’interface principale.
Client:
L’objectif est de construire une interface client web pouvant générer des effets visuels et sonores pour l’interface, ainsi que le l’interface de gestion pour les Pad.
Nous utilisons donc différentes technologies web comme:
Client-Serveur:
Pour communiquer entre le serveur et l’application en temps réelle nous avons opter pour une tecnologie de socket en node.js efficace pour envoyer des informations en réponse à des événements précis.
III. Interface, Animation et Sons
Pour réaliser notre application nous décidons de nous inspirer de plusieurs application / musiques existantes. Pour le visuel nous voulions des sortes de pulseur qui réagirait à la musique:
Nous sommes passé par plusieurs idées différentes avant de nous pencher plus sérieusement sur les idées suivantes.
Sons
Nous avons décidé de créer nos propres sons avec l’aide d’un collaborateur compositeur de musique.
Nous voulions des sons qui puissent facilement se mélanger et qui permettaient de créer différentes ambiances musicales selon les mixes effectués.
Nous nous sommes donc inspiré largment des sons d’électro dance et également des musiques de Kavinski. Il nous faudra insérer ces sons dans un tempo pour harmoniser le mix
Images
Nous voulions que notre application ait un aspect hypnotisant quant aux effets visuels. Il est primordial que ces effets soient en rythmes avec la musique et que l’utilisateur sache qu’il a le controle dessus.
Nous avions d’abord pensé à la génération d’un mandala mais le temps manquant nous avons finalement décidé de créer des formes géométriques à l’aspect épileptique. Ces formes se déclenchent dans la zone ou elles ont été activées sur le PAD. Etant donnée l’aspect assymétrique des courbes nous avons décidé de les faire pulser sur le rythme de la musique. Ces formes non conventionnelles attirent l’oeil de l’utilisateur.
Actions
Le Pad permet de nombreuses interactions différentes. Néanmoins, par manque de temps nous n’avons pas pu réaliser l’ensemble des actions que nous voulions car les informations que nous pouvons recevoir de l’ecran diffèrent selon téléphones, peuvent être imprécises ou encore erronées.
Nous avons donc décidé de réduire les interactions à:
- simple touch > va bloquer la boucle et la jouer tant qu’il est actif
- long touch > va jouer la boucle une seule fois
Afin de garder une cohérence et une musicalité nous avons décidé brider la liberté de l’utilisateur en ne mettant à jour les nouvelles actions que sur des des phases en rythme avec le tempo. Ainsi l’utilisateur ne pourra jamais déclencher un son totalement en dehors du rythme. Pour eviter un effet de frustration chez l’utilisateur à cause de l’asynchonité des actions nous avons mis en place une animation douce et progressive avant le lancement de la musique. L’utilisateur comprendra qu’il vient de lancer un son. Cete animaton sera elle totalement synchrone.
Réalisation
Etapes de configuration
La première chose à faire pour jouer est d’accéder à l’interface en allant sur le site
Nous pouvons ensuite choisir:
- Ecran Principal (l’Interface)
- Ecran Interactif (le Pad)
Sur notre smarphone nous choisissons “Ecran Interactif” et pouvons personnaliser notre utilisateur en:
- choisissant un username
- changeant sa couleur
Nous pouvons par la suite décider de créer ou de rejoindre un salon.
en cliquant sur le lien affiché nous le copions dans notre presse-papier.
Nous pouvons par la suite cliquersur “Créer salon”, et accédons à notre interface de Pad.
Sur notre écran principal nous sélectionnons “Ecran Principal” et rejoignons notre salon créé.
La configuration est terminée, nous pouvons maintenant jouer. Tout autre joueur peut rejoindre le salon depuis son propre pad en entrant simplement le nom du salon en question (exemple de salon: synthwave~qrichard, happyhouse~antony)
Phase de composition
Depuis notre pad, nous pouvons selectionner certains instruments qui seront marqué d’un carré rempli.
l’interface principale affichera par la suite différentes formes géométriques à l’emplacement cliqué par l’utilisateur, le tout à la couleur donnée par celui-ci.
Ainsi, Le spectacle peut commencer, et vous pouvez admirer et écouter l’oeuvre musicale et visuelle que vous êtes en train de créer.
Obstacle dans la réalisation
Durant la réalisation de ce projet nous avons rencontré des obstacles d’ordre technique et esthétique.
Dans un premier temps aucun des binômes de notre groupe n’avait déja fais de la composition c’est pourquoi nous avons fais appel à une aide extérieur pour la réalisation des musiques. Nous avons du nous renseigner sur les notions de tempos et boucles musicales. Nous avons travaillé uniquement avec des boucles de 4 secondes dans l’application.
Ensuite il a été difficile de synchroniser l’audio et la vidéo car les sons étaient lancés sur des intervales de temps alors que les animations se faisait par système de frame. Il fallu instaurer un système de communication et de convertion entre ses deux parties
Visuellement, au départ, les animations donnaient un semtiment d’incomfort quand on les regardait. Nous avons basé les transitions sur le BPM de la musique pour enlever ce ressenti. Pour ce qui est de la beauté visuel nous avons essayé de nombreuses animations pour voir ce qu’il allait le mieux. Nous voulions a tout pris garder un sentiment de desordre au sein d’un instrument mais également pouvoir distinguer clairement deux instruments.
Enfin lors de la réalisation de la communication application - serveur, nous avons rapidement repérér un phénomène de surenvoie d’information qui innondait le serveur. Cela conduisait à un plantage de l’application, nous avons donc limité les informations envoyés et selectionné les événements les plus adéquat pour déclencher l’envoie.
Pour aller plus loin
Bien que notre application est utilisable et offre l’expérience que nous attendions, certaines fonctionnalités chronophages et difficiles techniquements pourrait être implémentées:
- Augmenter le nombre d’intéractions sur le pad, et créer un effet visuel pour ceux ci. Par exemple lorqu’un utilisateur pose son doigt sur le pad on pourrait le réprésenter sur l’interface avec ou sans son.
- Avoir la possibilité d’enregistrer ses compositions
- Pouvoir ajouter ses propres samples, ou avoir des samples différents sur chaque PAD
- D’un point de vue ressource, l’application est assez gourmande, une optimisation du rendu visuel pourrait être fait.
Conclusion
Ce projet nous a permis de lier nos connaissances en informatique avec l’idée d’un activité ludique et synéstésique. Nous regrettons néanmoins le manque de temps au cours du semestre car de nombreuses idées étaient à approfondir mais la maquette présentée permet d’ors et déjà de mettre en évidence notre idée.
Nous voulions une application web permettant de lier smartphone, ordinateur musique et image et de ce point de vue, notre réaliser répond tout à fait à nos attentes.
Nous esperons que les futurs utilisateurs apprécieront de jouer sur notre interface ensemble.
Annexes
Planning
| Date |
Activité Principal |
Activité secondaire |
| 24/03 |
Création du système de communication inter-appareils |
architecture de données, travail musical (conception des boucles musicales) |
| 31/03 |
Création de l’interface PAD |
liaison avec le serveur |
| 07/04 |
Création du main screen |
Conception des effets visuels sur la main screen en fonction des différentes actions |
| 14/04 |
Mise en place d’effet de couleurs |
Conception des effets visuels en synchronisation avec les sons |
| 21/04 |
Amélioration du rendu combiné |
Il faut accorder le rendu visuel sur le rythme et améliorer le visuel, encore trop simpliste. (svg , courbe , particules…) |
| 28/04 |
Avoir une classe d’effets visuels |
Avoir des salons et une liste de sons allant bien ensemble |
Notice de devellopement de l’application
Available Scripts
In the app directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
In the server directory, you can run:
node server.js
Start the server on localhost:4000
Warning
- Be careful to change the config.js and put your correct server and app url
- Don’t forget
npm install in app and server directory
SI28 - Rapport de Projet - Harmonia
tags:
si28p20Source du projet
Notre production
Remerciements
Nous tenons à remercier l’ensemble des personnes nous ayant aidé dans la réalisation de cette application, que ce soit en terme de développement, pour des apports artistiques ou dans la réalisation de tests de fonctionnement.
Merci à Clément Gulbierz pour sa collaboration dans l’application en ayant créé les différentes musiques ainsi que réalisé leur design visuel.
Merci à Mr Serge Bouchardon pour son enthousiasme à l’égard de notre projet et sa participation à nos tests techniques.
Introduction
Dans le cadre de l’UV SI28 du semestre P20, nous avons eu l’idée de créer une application synéstésique liant, technologie, collaboration, son et image.
Notre idée principale est de permettre à différents utilisateurs de travailler ensemble sur une même musique et de réussir à créer un ensemble mélodieux qui génère également un tableau de formes géométriques dynamiques. L’utilisateur doit ressentir une synesthésie pendant sa composition avec les autres.
Afin d’utiliser notre application, le (les) joueur(s) n’a(ont) besoin que d’un smartphone et d’un ordinateur accédant à internet (et ayant du son).
Le principe d’utilisation de l’application sera détaillé par la suite.
Note d’intention
I. Le concept
Le projet Harmonia est une application interactive collaborative permettant de créer une ambiance sonore et visuelle relaxante et décontractante. Chaque joueur utilise l’écran de son smartphone afin de générer différents échantillons sonores.
Ces sons générés créent au même moment une ambiance lumineuse sur un écran ternaire.
L’écran génère différentes ambiances lumineurs selon l’endroit tapé sur le smartphone.
Tous les sons générés par les utilisateurs se retrouvent fusionnées sur un écran commun et génère une musique. Les smartphones agissent comme un controleur de cet écran. Nous voulons que l’utilisateur ressente son implication dans l’harmonie.
II. Les objectifs
L’objectif de ce projet est de pouvoir mêler ambiance sonore et lumineuse en permettant au joueur d’agir avec son smartphone. L’application existe à des fins relaxantes et permettant aux joueurs de participer ensemble à l’élaboration d’une oeuvre commune, qui soit à la fois sonore et lumineuse.
Nous avons pour but de permettre au joueur de jouer seul et ainsi de générer les effets lumineux et sonores sur son écran ternaire, que ce soit en jouant seul ou en collaboratif.
Pour réussir l’effet d’interaction commune il faut que les utilisateurs se sentent impliqués dans le rendu commun et aient l’impression de participer à l’oeuvre globale en identifiant ses impacts sur l’interface centrale.
III. Le public ciblé
Cette application s’adresse à tous les âges et peut même être utilisée simultanément par des personnes d’âges différents si tant est que la personne possède un smartphone. Nous cherchons avant tout à créer une expérience sensorielle collaborative. Amateurs et confirmés de musique pourront s’essayer à l’exercice de création musicale. L’application doit être intuitive d’utilisation et donner envie aux personnes de cliquer dessus pour qu’ils puissent tester des harmonies sans vraiment maitriser le son ou le visuel.
Cahier des Charges
I. Description fonctionnelle
Il est nécessaire de posséder un téléphone servant d’instrument (on le nommera Pad), ainsi qu’un écran ternaire (nommé Interface). Lorsque l’utilisateur tape sur l’écran, un carré de couleur est affiché et une boucle musicale dépendant de la position de la pression est jouée sur l’interface. Les utilisateurs doivent pouvoir jouer avec leur téléphone pour générer un pattern sonore et visuel sur l’interface. Le lancement d’une boucle musicale entraine également un effet visuel sur l’interface.
Il faut synchronisé les actions de l’utilisateur avec l’interface et faire en sorte que le rendu audio comme visuel soit agréable. Nous voulions dans un premier temps avoir une multitude d’interaction sur le pad et également la possibilité de pouvoir enregistrer ses compositions. Nous n’avons pas réalisé ces deux dernières fonctionnalités pour des raisons techniques.
II. Technologies utilisées
Notre application possède un Serveur et un application client.
Serveur:
Nous avons développé notre backend en node.js en utilisant différentes librairies:
Le but de ce backend permet trois choses:
Le smartphone se charge d’envoyer un message à chaque interaction faite. Ce message esttraité par le backend et envoyé à l’interface principale.
Client:
L’objectif est de construire une interface client web pouvant générer des effets visuels et sonores pour l’interface, ainsi que le l’interface de gestion pour les Pad.
Nous utilisons donc différentes technologies web comme:
Client-Serveur:
Pour communiquer entre le serveur et l’application en temps réelle nous avons opter pour une tecnologie de socket en node.js efficace pour envoyer des informations en réponse à des événements précis.
III. Interface, Animation et Sons
Pour réaliser notre application nous décidons de nous inspirer de plusieurs application / musiques existantes. Pour le visuel nous voulions des sortes de pulseur qui réagirait à la musique:
Nous sommes passé par plusieurs idées différentes avant de nous pencher plus sérieusement sur les idées suivantes.
Sons
Nous avons décidé de créer nos propres sons avec l’aide d’un collaborateur compositeur de musique.
Nous voulions des sons qui puissent facilement se mélanger et qui permettaient de créer différentes ambiances musicales selon les mixes effectués.
Nous nous sommes donc inspiré largment des sons d’électro dance et également des musiques de Kavinski. Il nous faudra insérer ces sons dans un tempo pour harmoniser le mix
Images
Nous voulions que notre application ait un aspect hypnotisant quant aux effets visuels. Il est primordial que ces effets soient en rythmes avec la musique et que l’utilisateur sache qu’il a le controle dessus.
Nous avions d’abord pensé à la génération d’un mandala mais le temps manquant nous avons finalement décidé de créer des formes géométriques à l’aspect épileptique. Ces formes se déclenchent dans la zone ou elles ont été activées sur le PAD. Etant donnée l’aspect assymétrique des courbes nous avons décidé de les faire pulser sur le rythme de la musique. Ces formes non conventionnelles attirent l’oeil de l’utilisateur.
Actions
Le Pad permet de nombreuses interactions différentes. Néanmoins, par manque de temps nous n’avons pas pu réaliser l’ensemble des actions que nous voulions car les informations que nous pouvons recevoir de l’ecran diffèrent selon téléphones, peuvent être imprécises ou encore erronées.
Nous avons donc décidé de réduire les interactions à:
Afin de garder une cohérence et une musicalité nous avons décidé brider la liberté de l’utilisateur en ne mettant à jour les nouvelles actions que sur des des phases en rythme avec le tempo. Ainsi l’utilisateur ne pourra jamais déclencher un son totalement en dehors du rythme. Pour eviter un effet de frustration chez l’utilisateur à cause de l’asynchonité des actions nous avons mis en place une animation douce et progressive avant le lancement de la musique. L’utilisateur comprendra qu’il vient de lancer un son. Cete animaton sera elle totalement synchrone.
Réalisation
Etapes de configuration
La première chose à faire pour jouer est d’accéder à l’interface en allant sur le site
Nous pouvons ensuite choisir:
Sur notre smarphone nous choisissons “Ecran Interactif” et pouvons personnaliser notre utilisateur en:
Nous pouvons par la suite décider de créer ou de rejoindre un salon.
en cliquant sur le lien affiché nous le copions dans notre presse-papier.
Nous pouvons par la suite cliquersur “Créer salon”, et accédons à notre interface de Pad.
Sur notre écran principal nous sélectionnons “Ecran Principal” et rejoignons notre salon créé.
La configuration est terminée, nous pouvons maintenant jouer. Tout autre joueur peut rejoindre le salon depuis son propre pad en entrant simplement le nom du salon en question (exemple de salon: synthwave~qrichard, happyhouse~antony)
Phase de composition
Depuis notre pad, nous pouvons selectionner certains instruments qui seront marqué d’un carré rempli.
l’interface principale affichera par la suite différentes formes géométriques à l’emplacement cliqué par l’utilisateur, le tout à la couleur donnée par celui-ci.
Ainsi, Le spectacle peut commencer, et vous pouvez admirer et écouter l’oeuvre musicale et visuelle que vous êtes en train de créer.
Obstacle dans la réalisation
Durant la réalisation de ce projet nous avons rencontré des obstacles d’ordre technique et esthétique.
Dans un premier temps aucun des binômes de notre groupe n’avait déja fais de la composition c’est pourquoi nous avons fais appel à une aide extérieur pour la réalisation des musiques. Nous avons du nous renseigner sur les notions de tempos et boucles musicales. Nous avons travaillé uniquement avec des boucles de 4 secondes dans l’application.
Ensuite il a été difficile de synchroniser l’audio et la vidéo car les sons étaient lancés sur des intervales de temps alors que les animations se faisait par système de frame. Il fallu instaurer un système de communication et de convertion entre ses deux parties
Visuellement, au départ, les animations donnaient un semtiment d’incomfort quand on les regardait. Nous avons basé les transitions sur le BPM de la musique pour enlever ce ressenti. Pour ce qui est de la beauté visuel nous avons essayé de nombreuses animations pour voir ce qu’il allait le mieux. Nous voulions a tout pris garder un sentiment de desordre au sein d’un instrument mais également pouvoir distinguer clairement deux instruments.
Enfin lors de la réalisation de la communication application - serveur, nous avons rapidement repérér un phénomène de surenvoie d’information qui innondait le serveur. Cela conduisait à un plantage de l’application, nous avons donc limité les informations envoyés et selectionné les événements les plus adéquat pour déclencher l’envoie.
Pour aller plus loin
Bien que notre application est utilisable et offre l’expérience que nous attendions, certaines fonctionnalités chronophages et difficiles techniquements pourrait être implémentées:
Conclusion
Ce projet nous a permis de lier nos connaissances en informatique avec l’idée d’un activité ludique et synéstésique. Nous regrettons néanmoins le manque de temps au cours du semestre car de nombreuses idées étaient à approfondir mais la maquette présentée permet d’ors et déjà de mettre en évidence notre idée.
Nous voulions une application web permettant de lier smartphone, ordinateur musique et image et de ce point de vue, notre réaliser répond tout à fait à nos attentes.
Nous esperons que les futurs utilisateurs apprécieront de jouer sur notre interface ensemble.
Annexes
Planning
Notice de devellopement de l’application
Available Scripts
In the app directory, you can run:
npm startRuns the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm testLaunches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run buildBuilds the app for production to the
buildfolder.It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
In the server directory, you can run:
node server.jsStart the server on localhost:4000
Warning
npm installin app and server directory