LOG745 – Interfaces utilisateurs avancées

Présentation au sujet: "LOG745 – Interfaces utilisateurs avancées"— Transcription de la présentation:

1 LOG745 – Interfaces utilisateurs avancées
Les interfaces pour la musique Maxime Dumas – Hiver 2013

2 Plan de cours Mise en contexte - TP4 Principes fondamentaux
Interfaces pour la musique Visualisations pour la musique

3 Survol du travail pratique 4
Trois choix de sujets Visualiser les relations d’influence entre des musiciens Modifier un logiciel interactif permettant de jouer de la musique Créer une interface multitactile avec un ou plusieurs instruments de musique

4 TP4 – Projet #1 Jeu de données à visualiser
600 artistes 193 « styles » ou « marchés » 13 styles principaux ou genres 3000 liens d’influence entre les artistes Application de départ à modifier ou votre propre application (sur approbation) Important: le jeu de données est confidentiel Données dans un fichier CSV Les données contiennent des erreurs, des parties manquantes (ex: liens vers des artistes qui ne sont pas définis) – Code doit être en mesure de supporter ça Nombre de points varie selon le niveau de difficultés Confidentiel car vient de allmusic.com – extrait du site sans avoir les droits officiels Exemple de modifications: Lire le jeu de données et afficher un réseau de quelques centaines de noeuds, où chaque noeud est un artiste et chaque arête est un lien d'influence. Chaque noeud devrait avoir une étiquette montrant le nom de l'artiste. Le réseau devrait pouvoir se disposer selon une simulation de forces. Rajouter un layout en cercles concentriques, avec un noeud au centre, ses voisins dans le premier cercle, leurs voisins dans le prochain cercle, etc. Indice: utilisez Network.performConcentricCircleLayout() Rajouter une option pour afficher la matrice d'adjacence du réseau. (Ça fait une grande matrice, n'est-ce pas?) Quand le curseur passe par dessus la matrice, la colonne et la rangée en dessous du curseur devraient être mises en surbrilliance, pour faciliter la lecture de la matrice.

5 TP4 – Projet #1 Simple Network Visualizer (application de départ)

6 TP4 – Projet #2 Modifier ou créer un logiciel permettant d’écrire des notes de musique et de les jouer Application de départ: Simple Piano Roll Vous pourriez développer un autre type d’instrument qu’un piano (sur approbation) Démo Exemple de modifications: Permettez à l'utilisateur de sélectionner des notes sur la portée, et de les déplacer en hauteur ou en temps avec un glissement de souris.  Permettez aussi à l'utilisateur de faire une copie d'une sélection de notes et de coller cotte copie ailleurs en temps. Modifiez le logiciel pour permettre des notes de différentes durées. Utilisez le format MIDI pour sauvegarder et lire vos fichiers Démo: - Ctrl+Click -> Radial menu - Shift+Click -> Control menu

7 TP4 – Projet #3 Créer un logiciel multitactile permettant de jouer de la musique Tirer profit des capacités du multitactile Peut être un piano, une percussion ou tout autre instrument conventionnel ou non Important: Communiquez avec le chargé de laboratoire pour réserver des sessions au laboratoire avec les écrans multitactiles. Suggestions: Un clavier de piano d'au moins deux octaves, avec touches noires et blanches, permettant de jouer plusieurs notes en même temps. Permettez à l'utilisateur de redimensionner le piano avec leurs doigts. Le redimensionnement devra permettre de soit avoir des touches plus larges ou plus étroites, ou bien de modifier le nombre de touches tout en gardant leur largeur fixe. Permettez à l'utilisateur d'effectuer des rotations du piano en utilisant leurs doigts, par exemple, pour le mettre à un angle de 23 degrés par rapport au cadre de l'écran. Réaliser un tambour, "beatbox", ou autre instrument de percussion

8 Exemples Hiver 2012 Vidéo:

9 Un peu de théorie musicale…
Les principes fondamentaux Les notes, les altérations, les intervalles, etc. Pour que ça « sonne bien » Les gammes, les accords, les progressions La musique numérique Le piano roll Le MIDI

10 Les notes sur un piano C D E F G A B Do ou Ut Ré Mi Fa Sol La Si
La fréquence de référence, sur laquelle se basent toutes les notes, est 440Hz, soit 440 cycles par secondes. Cette fréquence correspond au LA 3 ou A4 dans le système anglais C D E F G A B Do ou Ut Ré Mi Fa Sol La Si Source image:

11 Les notes en fréquence Note\octave 1 2 3 4 5 6 7 8 Do 32,70 65,41
130,81 261,63 523,25 1046,50 2093,00 4186,01 Do♯ ou Ré♭ 34,65 69,30 138,59 277,18 554,37 1108,73 2217,46 4434,92 Ré 36,71 73,42 146,83 293,66 587,33 1174,66 2349,32 4698,64 Ré♯ ou Mi♭ 38,89 77,78 155,56 311,13 622,25 1244,51 2489,02 4978,03 Mi 41,20 82,41 164,81 329,63 659,26 1318,51 2637,02 5274,04 Fa 43,65 87,31 174,61 349,23 698,46 1396,91 2793,83 5587,65 Fa♯ ou Sol♭ 46,25 92,50 185,00 369,99 739,99 1479,98 2959,96 5919,91 Sol 49,00 98,00 196,00 392,00 783,99 1567,98 3135,96 6271,93 Sol♯ ou La♭ 51,91 103,83 207,65 415,30 830,61 1661,22 3322,44 6644,88 La 55,00 110,00 220,00 440,00 880,00 1760,00 3520,00 7040,00 La♯ ou Si♭ 58,27 116,54 233,08 466,16 932,33 1864,66 3729,31 7458,62 Si 61,74 123,47 246,94 493,88 987,77 1975,53 3951,07 7902,13 Référence: Wikipédia et

12 La musique, c’est de la physique!
Référence:

13 Le rythme Numérateur: Nombre de temps par mesure
Dénominateur: Durée de chaque temps par rapport à la ronde Ex: 4/4 -> 4 temps de 1/4 de ronde (un temps = une noire) Ex: 6/8 -> 6 temps de 1/8 de ronde (un temps = une croche)

14 Les figures de notes Nombre de temps (à la noire) 8 4 2 1 1/8 1/16

15 Le tempo 120 bpm = 120 battements par minute Qualificatif Tempo Largo
Larghetto 60-66 bpm Adagio 66-76 bpm Andante bpm Moderato bpm Allegro bpm Presto bpm Prestissimo bpm A tempo tempo spécifié -> Parfois indiqué à la noire pointé ou à la croche -> 120 battements par minute = 2 battements à la seconde -> Rythme cardiaque normal: 80 battements par minute

16 Les altérations Un octave = 12 demi-tons
1 ton = Écart de 2 touches sur un piano 1 demi-ton = Écart d’une touche sur un piano

17 Les altérations (suite)
Les bémols (flat): ½ ton chromatique plus bas que la hauteur naturelle Les dièses (sharp): ½ ton chromatique plus haut que la hauteur naturelle Les bécarres (natural): annule une altération

18 Les transpositions Monter ou descendre toutes les notes d’un même intervalle. Permet de modifier la tonalité sans changer la perception des mélodies Plusieurs instruments sont transposés naturellement -> Pour accomoder un chanteur, par exemple -> Certains instruments sont transposés de façon naturelle -> Piano: instrument en Do -> Trompette: habituellement en sib -> Saxophone: mib (alto, bariton) ou sib (ténor, soprano) -> Cor français: fa

19 Les gammes Gammes chromatiques: Gammes heptatoniques:
Gammes contenant 12 degrés (notes différentes). La gamme chromatique contient toutes les notes d’un octave sur un piano Gammes heptatoniques: Gammes comprenant 7 degrés (ex: gamme majeure) Gammes pentatoniques: Gammes comprenant 5 degrés (ex: seulement les touches noires du clavier) Une gamme musicale est une suite de notes conjointes Le plus souvent, c'est la composante mélodique qui prédomine dans le concept de gamme : celle-ci est donc considérée comme une succession de notes — succession ascendante, sauf mention contraire — et ce sont les intervalles mélodiques et conjoints qui sont pris en considération. 

20 Les gammes heptatoniques les plus connues
Gamme majeure: T T D T T T D T = 1 ton D = ½ ton Do majeur: do ré mi fa sol la si do Mi majeur: mi fa# sol# la si do# ré# mi Gamme mineure: T D T T D T T La mineur: la si do ré mi fa sol la

21 Les intervalles Contenance Désignation Classement Aucun intervalle
Unisson Consonnance parfaite ½ ton Seconde mineure Dissonance 1 ton Seconde majeure 1 ½ tons Tierce mineure Consonnance imparfaite 2 tons Tierce majeure 2 ½ tons Quarte juste Consonnance mixte 3 tons ou Triton *Quarte augmentée ou quinte diminuée 3 ½ tons Quinte juste 4 tons Sixte mineure 4 ½ tons Sixte majeure 5 tons Septième mineure 5 ½ tons Septième majeure 6 tons Octave Dissonnant: beaucoup de battements entre les fréquences -> crée une tension Référence:

22 Les accords Accord majeur: Tonique + Tierce majeure + Quinte (Tonique + 4 demi-tons + 3 demi-tons) C = do - mi – fa C7 = do – mi – fa – sib (+ septième mineure) Accord mineur: Tonique + Tierce mineure + Quinte (Tonique + 3 demi-tons + 4 demi-tons) Cm = do - mi bémol – fa * Tonique : note dominante de la tonalité Ex: pour la gamme de do, la tonique est do

23 Les accords sur un piano
Accord de do majeur: Accord de do# majeur: Il existe deux modèles aboutissant à la construction des accords, un modèle géométrique et un modèle acoustique. Le premier modèle géométrique fut développé par Pythagore au cours de ses travaux sur le monocorde. Pythagore note que le rapport géométrique le plus simple après l'octave, la quinte (3/2) est parfaitement harmonique et, superposé, donne 12 notes également étagées, retournant presque à la note de départ. Il construit ainsi le cycle des quintes, mais fait références aux modes en usage en son temps, desquels naîtront les modes ecclésiastiques. Zarlino note ensuite que les rapports mathématiques simples donnent des intervalles agréables, les rapports plus compliqués des intervalles moins naturels. Ainsi, le rapport 2/1 produit l'octave, le rapport 3/2 la quinte, 4/3 la quarte, 5/4 la tierce majeure, 6/5 la tierce mineure et 9/8 la seconde majeure, et bien d'autres encore. Pour Zarlino, un accord parfait est donc la superposition de deux intervalles simples (5/4 et 6/5), aboutissants à un intervalle plus simple (3/2), ce qui fonctionne aussi bien pour l'accord majeur que pour l'accord mineur. L'accord parfait majeur est classifié comme plus naturel, puisque la relation entre la fondamentale et la tierce est plus simple que son confrère mineur. Septième et neuvième s'ajoutent par le même procédé de superposition de tierces. L'autre modèle, acoustique, nous apprend qu'un son génère dans l'aigu un certain nombre de sons secondaires, appelés sons harmoniques, dont la fréquence est un multiple de celle du son générateur (ou son fondamental). Il rejoint ainsi le modèle du monocorde. Chaque son harmonique est numéroté selon son ordre de génération, et ce numéro correspond à la multiplication de la fréquence du son générateur : le 2e harmonique vibre deux fois plus vite que le 1er.

24 Les degrés Désigne la place d’une note dans une échelle musicale spécifique. Ex: en musique tonale (gamme heptatonique): Le premier degré = Tonique (I) Le second degré = Sus-tonique (II) Le troisième degré = la médiane (III) Le quatrième degré = la sous-dominante (IV) Le cinquième degré = la dominante (V) Le sixième degré = la sus-dominante (VI) Le septième degré = la sensible (VII) Le huitième degré = l'octave ou la tonique

25 Lier les concepts: les progressions
Un accord peut être construit à partir de n'importe quelle note d'une gamme. Une gamme de sept notes permet sept accords de base, chaque degré de la gamme devenant la fondamentale de son propre accord. La progression est une séquence d’accords basés sur la gamme. Il est possible d’imaginer un nombre infini de progressions, mais certaines progressions caractéristiques sont souvent récurrentes. Ex: I - IV - V - V : À la base de La Bamba de Ritchie Valens, Like A Rolling Stone de Bob Dylan, celle aussi de Twist and Shout des Isley Brothers, et celle de Lucy in the Sky with Diamonds des Beatles, etc. I - I - IV - V. - My Boy Lollipop de Millie Small, Heartbeat de Buddy Holly, le refrain de Get Off of My Cloud des Rolling Stones, Diamonds on the Soles of Her Shoes de Paul Simon, Madame George de Van Morrison, etc. Exemple vidéo: Référence: Music: In Theory and Practice et

26 Le piano roll

27 Le MIDI Musical Instrument Digital Interface
Protocole de communication et de commande permettant à des instruments de musique électronique d’échanger de l’information Références utiles:

28 Le protocole en résumé 16 canaux indépendants
Chaque canal contient 128 notes* 7 types de message *Peut être utiliser pour transférer des paramètres autres que des notes de musique

29 Messages MIDI Chaque message est composé de 24 bits
[1sssnnnn] [0xxxxxxx] [0xxxxxxx] statut donnée donnée 2 sss: type de message nnnn: numéro de canal midi xxxxxxx: valeur (entre 0 et 127) General MIDI: Canal 10 est réservé pour les percussions

30 Types de messages Note off Note on
Polyphonic Key Pressure (aftertouch) Control Change Program Change Channel Pressure Pitch bend Aftertouch: Some MIDI keyboard instruments have the ability to sense the amount of pressure which is being applied to the keys while they are depressed. Channel Pressure: This "Channel aftertouch" information is sent using the Channel Pressure message, which needs only one data byte to specify the pressure value.

31 Note on / off Permet d’activer / désactiver une note
Donnée 1: Numéro de la note [0-127] Donnée 2: Vélocité [0-127]

32 Les notes en MIDI Schéma complet :

33 Control Change (CC) Permet de changer les paramètres d’un canal
Donnée 1: Numéro du paramètre Donnée 2: Valeur du paramètre Exemples de contrôleurs: volume, pan, pédales de contrôle, etc.

34 Program Change Permet de changer le programme
Donnée 1: Numéro du programme [0-127] Donnée 2: Vide Habituellement, le programme est associé à un instrument ou un son sur le séquenceur General MIDI définit une liste des programmes standards. Voir spécifications.

35 Autre exemple: voir SynthesizerTest.java
Le MIDI en Java import javax.sound.midi.*; public class MidiSynthesizerSample { public static void main(String[] args) { try { Synthesizer synthesizer = MidiSystem.getSynthesizer(); synthesizer.open(); MidiChannel channel = synthesizer.getChannels()[0]; // Choisir le canal 1 channel.programChange(46); // Choisir un son de harpe (programme #47) channel.noteOn(48, 64); // Appuyer sur la note - Numéro de note C3, Vélocité 50% Thread.sleep(1000); // Tenir la note pour 1 seconde channel.noteOff(48); // Relâcher la note - Numéro de la note } catch (Exception e) { e.printStackTrace(); } Autre exemple: voir SynthesizerTest.java 

36 Les interfaces pour la musique

37 Les contrôleurs MIDI “conventionnels”

38 Tirer profit des tablettes
- Interactions multitactiles - Métaphores physiques

39 Kaossilator Vidéo: http://www.youtube.com/watch?v=45d2Yomsct4
2 degrés de liberté: Horizontal: hauteur de la note Vertical: modulation Permet de générer facilement des mélodies qui seraient difficiles à reproduire avec un clavier, par exemple. -> Plusieurs claviers offrent maintenant le même genre de pad Vidéo:

40 Ocarina2 (iPhone) Vidéo: http://www.smule.com/ocarina/#prettyPhoto
Intérêt: Utilise le micro pour mesurer la vélocité Vidéo:

41 Artiphon Vidéo: https://www.youtube.com/watch?v=wMhQ57fXWPY - 1:30
Inspiré d’une guitare Offre un manche composé de boutons tactiles qui font allusion aux frets de la guitare Simule des cordes Téléphone: sert essentiellement de séquenceur pour transformer les messages midi en son Vidéo: :30

42 Tenori-on Vidéo: http://www.youtube.com/watch?v=_SGwDhKTrwU
- De base, se comporte comme une mesure d’un piano-roll - Supporte plusieurs autres formes et patrons qui permettent de générer des effets (ex: séquences préprogrammées) Vidéo:

43 Claviers isomorphiques
Démo réalisée par Jean-François IM et François Cabrol du laboratoire multimédia – étudiants à la maîtrise Intérêt: permet de transposer sans changer de doigté - Parler également le concept des claviers symétriques

44 Claviers isomorphiques
Axis Keyboard Application Musix pour iPad

45 Piano isomorphique! Source: Vidéo:

46 Harpejji Vidéo: http://www.youtube.com/watch?v=2CrjvsJAkBs
Propose un clavier isomorphique combiné à des cordes frappées (tapping) Descendant de la guitare électrique Intérêt: - Un seul doigt pour produire une note - Inspiré du piano – relativement facile à apprendre - Son naturel des cordes mais électrifié (pick-ups sur chaque corde) The harpejji is a member of a small family of stringed musical instruments known as tapping instruments. Tapping instruments are descendents of the electric guitar but are optimized for a style of playing that involves tapping on the strings to produce a note. One of the primary benefits of this style of playing is that it only requires one finger to make each note, unlike strumming which requires at least one finger on each hand to make a note. By freeing up more fingers, the player has the freedom to play arrangements that are physically too difficult to play with the more traditional playing techniques. Unlike all other commercially available tapping instruments, the harpejji has a keyboard-inspired playing interface that many will find easier to learn, more comfortable to play and more interesting to explore. The harpejji is played on a stand, horizontally or on a slight incline or decline. A decline position allows the audience to see more of your playing, whereas an incline position makes it easiest to reach the top frets. Vidéo:

47 Beat blocks Vidéo: http://www.youtube.com/watch?v=Jug3iYAuJes
Type de bloc permet de préciser le rythme La case (horizontal) détermine le temps de la mesure et (vertical) la note ou l’instrument dans le cas des percussions Le type de bloc détermine la position et la durée des notes Permet de créer des rythmes complexes sans trop de connaissance en musique Créé par des amateurs de musique Vidéo:

48 Beat bearing Vidéo: http://www.youtube.com/watch?v=wreP8FMupyM
Concept semblable avec des billes Développé par Peter Bennett pour son PhD. À l’Université Queens de Belfast Vidéo:

49 Reactable Vidéo: http://www.youtube.com/watch?v=MPG-LYoW27E
Surface multitactile avec une caméra située sous la table qui permet de déterminer la présence et l’orientation des éléments situés sur la table Sert à paramétrer le générateur – génère des sons en fonction de ce qui est présent et des paramètres Développé initialement par des cheurcheurs de l’université Pompeu Fabra de Barcelone. Maintenant devenu une entreprise. Offre une application sur iPhone / iPad qui simule le concept et vend des tables stylisées Vidéo:

50 Live coding Vidéo: http://en.wikipedia.org/wiki/Live_coding
Permet de générer en temps réel de la musique en fonction d’un code écrit dynamiquement Vidéo:

51 Wall Balls Vidéo: http://www.youtube.com/watch?v=qQmSwuj7DZw
Simulation physique Musique générée aléatoirement par des billes qui frappent des “murs” dessinés par les utilisateurs. La couleur représente la hauteur de la note Peut également forcer des notes en appuyant sur les extrémités des murs Contrôle sur le nombre de billes et leur vitesse Résultat semblable à Pong ou Arkanoid Projet de l’université du Manitoba – Publication à NIME 09 (New Interfaces for Musical Expression) Vidéo:

52 HighC - Draw your music Démo: http://highc.org/samples/demo.html
Fait référence à “I see” Développé par Thomas Baudel, chercheur pour IBM Inspiré d’un modèle développé par Iannis Xenakis (projet UPIC) dans les années 80 Concept semblable au pianoroll Permet de générer de la musique avec des dessins Démo:

53 Graphic Notation Vidéo: http://www.youtube.com/watch?v=71hNl_skTZQ
Graphic notation is the representation of music through the use of visual symbols outside the realm of traditional music notation. Graphic notation evolved in the 1950s, and it is often used in combination with traditional music notation.[1] Composers often rely on graphic notation in experimental music, where standard musical notation can be ineffective. Premiers auteurs: Roman Haubenstock-Ramati, Mauricio Kagel, György Ligeti,Krzysztof Penderecki, Karlheinz Stockhausen, and Iannis Xenakis, as well as the works of experimental composers such as Earle Brown, John Cage, Morton Feldman, and Christian Wolff during the 1950s and 60s. Encore très utilisé Vidéo:

54 Drawdio Vidéo: http://www.youtube.com/watch?v=PV_w38ldZaE
Projet du Media Lab du MIT Utilise la conductivité électrique pour générer de la musique Dès qu’un objet est conducteur, il est possible de générer de la musique Vidéo:

55 Projets du groupe IDMIL – Université McGill
Les Gestes T-Stick FM Gloves T-Box The Rulers Vidéo:

56 Réalité virtuelle / Jeux vidéos
Projets de Florent Berthaut - Université de Bordeau - Utilise des interactions avec des environnements virtuels pour générer de la musique (intersections avec des objets virtuels, etc.) - Jeux vidéo: utilise des paramètres dérivés de l’interaction multijoueurs avec l’environnement dans un jeu vidéo de type “shooter” Détails:

57 Sound sculpture “Machine à musique” qui reproduit des sons grâce à des billes qui sont lancées sur des lattes de xylophone, des pièces de métal qui frottent sur des coupes de cristal, etc. Générateur qui crée de la musique à 4 voix basé sur un patron entrée via un clavier Created by Dan Paluska and Jeff Lieberman, it needs to be experienced. Play the instrument though the DOS-like Absolut Machines and if you're in the NY area be sure to check it out live and in person. More images after the jump Projet: Vidéo:

58 The Shape of Song Détails: http://www.turbulence.org/Works/song/
Gauche -> Madona – Like a Prayer – Style pop Droite -> Bach – Golberg Variations – Forme AABB Créé par Martin Wattenberg – Artiste de New York – Très connu pour ses oeuvres en visualisation, notamment Map of the Market. Ph.D. de Berkeley Détails:

59 Music Animation Machine
Projet de Stephen Malinowski - American composer, pianist,inventor, educator, and software engineer. Travaille sur le projet depuis 1974 Variante: Ray Burgemeestre (cercles) - Vidéo:

60 What different sorting algorithms sound like
Projet de Kanał użytkownika andrut Aucun détail sur cette personne, mais visu intéressante Vidéo:

61 Celeste Motus Vidéo: http://vimeo.com/7364665
Pedro Mari and Natan Sinigaglia, connu sous le nom de Abstract Birds – Artistes visuels Spécialisé dans la génération simultanée d’images abstraites et de musique Vidéo:

62 Narratives 2.0 Musique segmentée en canaux. Chaque canal est représenté par une ligne (distributed fanlike). Les canaux s’éloignent du centre avec le temps. L’angle de la ligne varie en fonction de la fréquence des sons. Les fréquences qui atteignent un “haut niveau” sont colorées en orange. Matthias Dittrich - Étudiant au baccalauréat - University of Applied Sciences Potsdam (Amsterdam) Détails: