p
u
b
l
i
c
i
t
é
Les rubriques (actu, forums, tutos) de Développez
Tags
Réseaux sociaux
3   0


 Discussion forum

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

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 : Sélectionner tout
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 : Sélectionner tout
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 !


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :
Offres d'emploi IT
Ingénieur réseau fonctionnel et technique h/f
CDI
Société Générale - Ile de France - Paris (75000)
Ux designer
Stage
Stage & Co. - Ile de France - Paris (75000)
Ingénieur Etudes et Développement Java J2EE H/F - LE MANS
CDI
Sodifrance - Pays de la Loire - LE MANS (72)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique 2D - 3D - Jeux : LittleWhite -