SI28 : Rapport de Projet

Jean-Michel TozziniGuillaume Swiatek

Nathan Richard

Table des matières

1 Synopsis 21.1 Public visé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.2 Concept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.3 Objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 Cahier des charges 42.1 Ressources média . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.2 Structure et navigation . . . . . . . . . . . . . . . . . . . . . . . . . 42.3 Les interactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.4 Les choix techniques . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3 Storyboard 63.1 Choix graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63.2 Introduction de l’application web . . . . . . . . . . . . . . . . . . . 73.3 Visuels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73.4 Choix sonores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

4 Conclusion 114.1 Difficultés rencontrées . . . . . . . . . . . . . . . . . . . . . . . . . 114.2 Bilan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

1

Chapitre 1

Synopsis

1.1 Public viséNotre production se destine à tout internaute intéressé par la composition mu-

sicale interactive. La maîtrise des concepts de menu, d’onglet et de glisser déposerest nécessaire.

1.2 ConceptLa surface de travail mise à disposition de l’utilisateur représente une vue spa-

tiale. Sur cette surface bidimensionnelle figurent deux types d’objets : les corpsmassifs ainsi que des orbites organisées de manière concentrique autour de cescorps.

L’utilisateur dispose sur la partie droite de l’écran d’une boîte à outils contenantune série de notes de différentes tonalités qu’il pourra déplacer sur la surface detravail afin de les faire interagir avec les orbites.

L’usage des éléments de la boite à outil ou une action directe de la souris surles éléments du jeu permet à l’utilisateur de générer des sons et d’influer sur uncertains nombres de paramètres parmi lesquels l’instrument joué, son volume, latonalité de la note, et la cadence de répétition.

1.3 ObjectifNotre objectif est de permettre la création de compositions musicales de ma-

nière ludique et intuitive. À cette fin, nous concentrerons nos efforts sur la clarté

2

de l’interface, notamment via l’utilisation de codes-couleur et d’analogies avec ledomaine de la physique spatiale.

De plus, l’interface de composition guidera naturellement l’utilisateur vers unecomposition structurée (à base de boucles indépendantes) afin de lui permettred’aboutir à un résultat plus cohérent.

3

Chapitre 2

Cahier des charges

2.1 Ressources médiaPour permettre la réalisation de ce projet, nous avons utilisé les ressources

média suivantes :– la police Exmouth 1 et le Garamond de Monotype– image de nébuleuse– samples (gamme de : guitare, piano, violon, saxophone)– musique d’ambiance (Sonate au clair de lune, Beethoven)– modèles de planètes (Terre, Venus, Jupiter, Neptune)

2.2 Structure et navigationÀ l’ouverture de l’application web, l’utilisateur est accueilli par une courte in-

troduction qui débouche sur le menu principal

La navigation s’effectuera au moyen du menu qui permet de naviguer entres lesdifférents modules de l’application dont voici une liste :

– le jeu en lui-même– les crédits– une aide/guide

Le menu permet également de revenir au site principal de l’UV SI28.

1. http ://www.dafont.com/exmouth.font

4

2.3 Les interactions 1

Interaction Effet sur la compositionModification de la taille du nœud degravité (par simple clic sur l’objet)

Modification du volume de tous lessons joués sur le corps

Déplacement d’une note depuis lemenu sur une orbite (par glisser-déposer)

La note commence à tourner autour del’orbite et à être jouée

Déplacement d’une note depuis une or-bite sur une autre (par glisser-déposer)

Modification de la cadence de lecturede la notre et/ou de l’instrument demusique

Clic sur un onglet du panneau latéral(cf Storyboard)

L’onglet se déroule pour maximiserl’affichage utile et augmenter le renduesthétique

Utilisation de l’outil gaz sur une orbite Visuellement l’orbite se remplit de gaz.Un effet est appliqué à toutes les notesde la boucle.

Table 2.1 – Tableau récapitulatif des différentes interactions prévues et des effetsassociés.

2.4 Les choix techniquesNous avons utilisé pour ce projet les logiciels suivants :– Flash : l’implémentation générale de l’application web– Illustrator : le dessin des notes– Indesign : la conception graphique– Audition : le traitement des échantillons sonores– Guitar Pro : la récupération des échantillons sonores– LaTEX : mise en page du rapport et du support de présentation orale

1. Les deux derniers effets n’ont pas été implémentés par manque de temps.

5

Chapitre 3

Storyboard

3.1 Choix graphiquesDans un premier temps nous allons nous intéresser au titre choisi pour l’application

web, Space Opéra. Celui-ci joue d’abord sur la référence au genre cinématogra-phique éponyme, mais aussi sur l’orthographe française de « Opéra ». Cette se-conde référence souligne la vocation musicale de l’application web. De plus, le mot« Space » fait référence à l’univers spatial de notre projet.

Le choix de l’image de fond a été réalisé évidemment en accord avec le thème,mais aussi selon ses qualités esthétiques et pratiques. En effet l’image présentedes zones sombres qui offrent un bon contraste avec le texte blanc et ajoutent àl’ambiance feutrée voulue pour l’application web. Enfin l’image ne détourne pasl’attention de l’utilisateur des éléments d’interaction.

Nous avons retenu deux polices ; la première est Exmouth, une police cursive,fantaisiste et élégante utilisé pour le titre. La seconde est le Garamond de Mo-notype, lisible et à consonance littéraire 1. De plus cette police a l’avantage deproposer des caractères ornementaux et des petites majuscules que nous avonsutilisé pour les éléments du menu.

Nous avons prélevé sur l’image de fond une couleur représentative des nuancesde marron qui la composent pour nous en servir comme teinte pour nos panneaux.Dans le cas du menu nous avons utilisé directement cette teinte en ajoutant unetransparence de manière à ne pas masquer l’image de fond. Parallèlement, nousavons décliné cette teinte pour des différents onglets du panneau de jeu afin depouvoir les distinguer aisément.

1. Affilié à la police de la Bibliothèque de la Pléiade.

6

Pour la conception des notes nous nous sommes inspirés du style de la com-position papier classique. On note cependant que pour des raisons esthétiques,on a choisi une représentation graphique de croche alors que nous utilisons deséchantillons de noires.

Nous avons choisi des planètes du système solaire en équilibrant le nombre deplanètes telluriques et gazeuses ainsi que leur teinte dominante.

3.2 Introduction de l’application webNous avons conçu l’introduction de l’application en respectant différentes con-

traintes. Tout d’abord elle devait être courte afin de ne pas lasser l’utilisateur.Ensuite elle devait mettre en scène l’élément central de l’application (notes) . En-fin elle devait rester relativement épurée, dans la lignée du reste de l’application.

3.3 VisuelsVous trouverez ci-après les planches de l’interface du menu principal ainsi que

celle du jeu.

7

Space OpéraJouer

Crédits

Aide

Quitter

2

Space Opéra

Effets

Notes

Do

Ré

Mi

Fa

Sol

La

Si

3.4 Choix sonoresNous avons décidé d’insérer une musique d’ambiance dès le début de l’introduction

qui se poursuit tant que l’utilisateur est sur le menu principal. Notre choix s’estporté sur Sonate au claire de lune de Beethoven, car ce morceau constitue uneexcellente musique d’ambiance, à la fois discrète et harmonieuse.

Concernant le choix des instruments, nous en avons limité le nombre à quatreafin de ne pas surcharger la surface de jeu. On souhaitait un panel varié maiscohérent recouvrant la majorité des grands genres musicaux. Notre choix c’estdonc porté sur le violon, le piano, la guitare et le saxophone alto.

10

Chapitre 4

Conclusion

4.1 Difficultés rencontréesNotre principal problème a concerné l’utilisation d’outils logiciels ; d’une part à

cause de l’incompatibilité des différentes CS d’Adobe et d’autre part à cause desdifficultés d’échanges entre logiciels n’ayant pas la même orientation 1.

Ensuite la maîtrise de l’actionscript 1 était inégale au sein de notre trinôme, cequi a engendré une spécialisation dans la répartition des tâches du projet. Toutefoisles membres les moins à l’aise dans la programmation actionscript se sont formésafin de pouvoir réaliser quelques fonctions de base.

Étant donné l’important travail de programmation requis par le projet et lesfaibles connaissances initiales de deux des membres du groupe, nous avons établien début de semestre une liste de priorité des fonctions à implémenter. Parmicelles-ci, certaines fonctionnalités jugées secondaires ou facultatives n’ont pas étéimplémentées. On peut noter dans ce cas le module de sauvegarde/chargement,la possibilité de générer des espaces de jeu aléatoires ou encore l’outil « gaz »permettant d’appliquer des effets audio aux notes d’une orbite.

4.2 BilanPour l’ensemble des participants, « Space Opéra » aura été un projet particu-

lièrement stimulant, et ce malgré les difficultés que nous avons pu rencontrer aucours de sa réalisation.

1. Notamment Flash et Indesign.1. Tant dans la connaissance du langage que dans le concept de l’orienté objet.

11

Parmi les points que nous avons trouvé intéressants figure la dimension mul-timédia du projet ; puisque celui-ci mèle de manière particulièrement intime deséléments graphiques et sonores, nous avons travaillé avec un soin tout particuliersur le lien entre ces deux dimensions au sein de l’application. Ainsi nous avons tâ-ché de créer une véritable ambiance sonore et visuelle propre au projet, en alliantles tons chaud et feutrés de l’interface à la simplicité et l’élégante de la sonate auclair de lune.

De plus le projet faisant appel à des compétences très diverses et complémen-taires, nous avons pu tirer parti des savoir-faire et des connaissances de chacun viaune répartition des tâches au sein du groupe. Cependant ce ne nous a pas empêchéd’acquérir de nouvelles compétences, notamment en ce qui concerne la maîtrise deFlash. 2

2. En particulier pour les deux membres qui ont découvert l’actionscript à l’occasion du projet.

12