Soutenez-nous

Démonstration WebGL : Echotron
Un moteur d'animations dépendantes de la musique pour votre navigateur

Les rubriques (actu, forums, tutos) de Développez
Réseaux sociaux


 Discussion forum

Le , par LittleWhite, Responsable 2D/3D/Jeux
Démonstration WebGL : Echotron
un moteur d'animations dépendantes de la musique pour votre navigateur

Echotron est un programme WebGL pour les navigateurs compatibles, créé par Alex Wayne pour visualiser la musique.
Certes, ce n'est pas le premier dans le genre mais celui-ci se diffère dans l'utilisation d'un fichier produit par le site www.echonest.com et permet de faire une visualisation en réponse à la sémantique de la musique (et non aux simples changements du spectre).


Il faut savoir qu'après analyse du fichier sonore par Echonest, le site vous fournira un énorme fichier JSON avec les métadonnées détaillées de la musique. Il contient le rythme, les mesures, les sections et même les notes avec le moment de leur apparition, leur durée et la tonalité.

Voici un exemple :
Code javascript :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{ 
  "beats": [ 
    { 
      "start": 0.06643, 
      "duration": 0.467, 
      "confidence": 0.83 
    }, 
    { "more": "beat data..." } 
  ], 
  
  "segments": [ 
    { 
      "start": 101.28803, 
      "duration": 0.24649, 
      "confidence": 1, 
      "loudness_start": -28.726, 
      "loudness_max_time": 0.0313, 
      "loudness_max": -7.937, 
      "pitches": [ 
        0.499, 
        0.965, 
        0.35, 
        0.689, 
        0.351, 
        0.123, 
        0.264, 
        0.791, 
        1, 
        0.084, 
        0.048, 
        0.077 
      ], 
      "timbre": [ 
        42.176, 
        -12.167, 
        -120.179, 
        -7.085, 
        -2.676, 
        53.153, 
        -9.249, 
        22.261, 
        17.864, 
        12.085, 
        41.372, 
        -14.442 
      ] 
    }, 
    { "more": "segment data..." } 
  ] 
}

Pour en savoir plus, n'hésitez pas à consulter ce PDF.

La seconde particularité du logiciel est son extensibilité. En effet, il est possible d'écrire de nouvelles animations avec très peu de code. Chaque scène est décomposée en trois calques :
  • fond (Background) : affiché en premier sur tout le cadre ;
  • milieu (Midground) : affiché en second, généralement les textures et les parures ;
  • premier plan (Foreground) : affiché en dernier, généralement pour tous les objets animés et le centre.


Tout le reste (initialisation, musique…) est géré par le moteur rendant la création d'une nouvelle scène très rapide. Le code suivant affiche un cube qui tourne et qui change de couleur à chaque battement :
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# Les classes de votre calque doivent être 
# affectées à module.exports dans le style de node.js 
module.exports = class Example extends Echotron.Echo 
 
  # Initialise le calque. Appelée pour vous lorsque 
  # le calque est créé 
  initialize: -> 
 
    # Crée un mesh étant un simple cube 
    @mesh = new THREE.Mesh( 
      new THREE.CubeGeometry(10, 10, 10) 
      new THREE.MeshBasicMaterial() 
    ) 
 
    # Ajoute le cube au calque 
    @add @mesh 
 
  # Appelée à chaque trame, met à jour les objets du calque 
  # comme vous le voulez 
  update: (elapsed) -> 
 
    # Dans ce cas, tourne le cube d'un radian par seconde 
    # suivant chaque axe. 
    @mesh.rotation.x += elapsed 
    @mesh.rotation.y += elapsed 
    @mesh.rotation.z += elapsed 
 
  # Appelée à chaque battement de la musique. Utilisez la pour changer 
  # l'état et pour montrer sa réaction aux battements 
  onBeat: -> 
 
    # Dans ce cas, change la couleur du cube aléatoirement 
    @mesh.material.color = new THREE.Color().setRGB( 
      Math.random(), Math.random(), Math.random() 
    )
Pour conclure sur une belle note, le code d'Echotron est disponible sur GitHub.

Testez Echotron !

Source

BeautifulPixel

Votre opinion

Avez-vous déjà développé des programmes affichant des animations dépendantes de la musique ? Montrez-les nous !
Offres d'emploi IT
Architecte Réseau et Sécurité H/F
CDI
CRESCENDO BROTTEAUX - Ile de France - Neuilly-sur-seine
Parue le 27/03/2014
Developpeur JAVA
CDI
job4geek - Languedoc Roussillon - Montpellier (34000)
Parue le 22/04/2014
Ingénieur Concepteur Développeur WEB (H/F)
CDI
cts - Midi Pyrénées - Toulouse (31000)
Parue le 11/04/2014

Voir plus d'offres Voir la carte des offres IT
 
 
 
 
Partenaires

PlanetHoster
Ikoula