Démonstration WebGL : Echotron

[LittleWhite]

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 !