synchronise audio with particle parameter

[Floof]

Hello guys

I am still working on this cosmic field with some particles ( thanks to Wingnut by the way for his help on the field )

http://www.peru-lab.com/bishop/kapol

 

And I would like to synchronise some particles parameters with the audio freqencies of a playing audio file  :

 

Some parameters I 'd like to play with : 

 

var speed = this._scaledUpdateSpeed * 2;

        if (particle.age >= particle.lifeTime / 2) {

          speed = -speed;

 

particleSystem.updateSpeed = 0.001;

 

or 

 

if (particle.size >30 && toggleColor)

 

I checked the documentation about the sound analyser and I wonder how far we could customise it. Could-it be possible to link some frequencies' movements with differents particles parameters, or even a mesh parameters (scale, position...) ? 

 

 

 

 

Here is the code of my particles : 

 

 

 

  var rad1 = BABYLON.Mesh.CreateBox("*rad1", 5, scene);

  // var rad1 = BABYLON.Mesh.CreateSphere("*rad1", 8, 16, scene);

  // var rad1 = BABYLON.Mesh.CreateCylinder("*rad1", 10, 5, 5, 8, 8, scene);

 

  rad1.visibility = 0.9;

 

  rad1.material = new BABYLON.StandardMaterial("bmat", scene);

  // rad1.material.emissiveColor = new BABYLON.Color3(0.3, 0.1, 0.1);

  rad1.material.diffuseColor = new BABYLON.Color3(1.0, 0.0, 0.0);

  rad1.position = new BABYLON.Vector3(0, 0, 0);

  rad1.rotation = new BABYLON.Vector3(-Math.PI/2, 0, 0);

 

  var particleSystem = new BABYLON.ParticleSystem("particles", 12000, scene);

  particleSystem.particleTexture = new BABYLON.Texture("kapol.png", scene);

  particleSystem.emitRate = 12000;

  particleSystem.emitter = rad1;

  particleSystem.minEmitBox = new BABYLON.Vector3(400, -400, 400); // Starting all From

  particleSystem.maxEmitBox = new BABYLON.Vector3(-400, 400, -400); // To...

  particleSystem.minSize = 1;

  particleSystem.maxSize = 30;

  particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

  

  particleSystem.textureMask = new BABYLON.Color4(1, 1, 1, 1);

  

  particleSystem.color1 = new BABYLON.Color4(0, 0, 0, 0);

  particleSystem.color2 = new BABYLON.Color4(0, 0, 0, 0);

  particleSystem.colorDead = new BABYLON.Color4(1, 1, 1, 1);

  

  particleSystem.maxLifeTime = 4;

  

  particleSystem.gravity = new BABYLON.Vector3(0, 0, 0);

  particleSystem.direction1 = new BABYLON.Vector3(-26, -26, -26);

  particleSystem.direction2 = new BABYLON.Vector3(26, 26, 26);

  

  particleSystem.minAngularSpeed = 10;

  particleSystem.maxAngularSpeed = Math.PI;

  particleSystem.minEmitPower = 1;

  particleSystem.maxEmitPower = 1;

  

  particleSystem.updateSpeed = 0.001;

  // Start the particle system

  particleSystem.start();

  

  var toggleSpeed = true;

  var toggleColor  = true;

 

  

 

  particleSystem.updateFunction  = function(particles) {

        for (var index = 0; index < particles.length; index++) {

            var particle = particles[index];

            particle.age += this._scaledUpdateSpeed;

 

            if (particle.age >= particle.lifeTime) { // Recycle by swapping with last particle

                this.recycleParticle(particle);

                index--;

                continue;

            }

            else {

        var speed = this._scaledUpdateSpeed * 2;

        if (particle.age >= particle.lifeTime / 2) {

          speed = -speed;

        }

        

                particle.colorStep.scaleToRef(speed, this._scaledColorStep);

        

        if (particle.size >50 && toggleColor)

                  particle.color = new BABYLON.Color4(Math.random(), Math.random(), Math.random(), particle.color.a);

 

        else 

                  particle.color.addInPlace(this._scaledColorStep);

 

                if (particle.color.a < 0)

                    particle.color.a = 0;

 

                particle.angle += particle.angularSpeed * this._scaledUpdateSpeed;

 

                particle.direction.scaleToRef(this._scaledUpdateSpeed, this._scaledDirection);

                particle.position.addInPlace(this._scaledDirection);

 

                this.gravity.scaleToRef(this._scaledUpdateSpeed, this._scaledGravity);

                particle.direction.addInPlace(this._scaledGravity);

            }

        }

    }

 

  

 

  scene.registerBeforeRender(function () {

    // fountain.rotatePOV(0, 0, 0);

    camera.alpha += .0001;

  });

 

 

 

 

[davrous]

Hi,

 

 I'm just exposing the Web Audio analyzer in Babylon.js. So anything related to Web Audio you'll find on the web will work with Babylon.js. You can have a look to the code of one of the demo we've made with Deltakosh: https://github.com/MicrosoftEdge/Demos/tree/master/musiclounge it uses also particules sync with audio.

 

Bye,

 

David

[rodrigop]

Pretty cool work Floof, I'm from Peru, that caught my attention from your website, are you peruvian too?.  If you are creating an starfield, why not use a fragment shader? its much more performant and you can add also interactions to them like for moving around and sound changes. Here is one i've built based on some formulas and examples from shaders toy, http://plnkr.co/edit/0f3poeM834TkroixadnM?p=preview will be using this as the field for my own game, also that example is already integrated with BJS