Trying to time multiple particles with animation

Hi Ian,

This sounds cool! You can do custom particle timing by passing in a particle time to the particle’s material’s main pass:

particle.mainPass.externalTimeInput = particleTime;

To do this, lets first create a script with a reference to our particle’s material. In Objects panel, press Add New > Empty Object. Then in the Inspector panel, click Add Component > Script. Set this script to Initialized. Then in your resources panel, let’s modify this script. Add the following to get a reference to your particle’s material.

// -----JS CODE-----
// @input Asset.Material particle1
// @input Asset.Material particle2

Keeping track of when animation has started

Then we need to keep track of when our animation was called. Right below that code, we initialize a variable for us to put this information into.

global.animationStartTime;

When we play an animation, we will set to this to be our currentTime (getTime())

function resetSequence()
{
 global.animationStartTime = getTime();
}

// where we call the animation
resetSequence();

Then in our update loop, we pass in our particle time information when it’s within some seconds from when the lens has started.

Playing your Particles

To help with this, we can create a dictionary that contains our particle timing information:

// in seconds
var particleTiming = [
 {
 "name": "particle1",
 "start": 5,
 "lastFor": 2, 
 },
 {
 "name": "particle2",
 "start": 8,
 "lastFor": 3, 
 },
]

The name comes from our reference above.

To create our update loop we will create an event like this:

function update()
{
 // play our particles here.
}
var updateEvent = script.createEvent("UpdateEvent");
updateEvent.bind(update);

In that update loop we’ll start by keeping track of how many seconds have elapsed:

var animTime = getTime() - global.animationStartTime;

Then, we’ll go through each item in particleTiming. To make it easier, we’ll store our information in a shorter variable.

for (var i = 0; i < particleTiming.length; i++) {
 var particleName = particleTiming[i].name;
 var startTime = particleTiming[i].start;
 var lastForTime = particleTiming[i].lastFor;

// do something here
 }

To figure out when our particle should play we’ll subtract when we want the animation to start from the time elapsed since animation started

var particleTime = animTime - startTime;

If our particleTime is greater than the time we want our particles to last, we can just set the time to a negative number (meaning simulation will not occur).

if (particleTime > lastForTime) {
 particleTime = -1;
 }

Finally, we will pass this time into our particle so it can be rendered.

script[particleName].mainPass.externalTimeInput = particleTime;

Final Script

// -----JS CODE-----
// @input Asset.Material particle1
// @input Asset.Material particle2

global.animationStartTime;
var playParticles = false;

// in seconds
var particleTiming = [
 {
 "name": "particle1",
 "start": 2,
 "lastFor": 5, 
 },
 {
 "name": "particle2",
 "start": 4,
 "lastFor": 6, 
 },
]

function update()
{
 var animTime = getTime() - global.animationStartTime;

for (var i = 0; i < particleTiming.length; i++) {
 var particleName = particleTiming[i].name;
 var startTime = particleTiming[i].start;
 var lastForTime = particleTiming[i].lastFor;

var particleTime = animTime - startTime;

if (particleTime > lastForTime) {
 particleTime = -1;
 }

script[particleName].mainPass.externalTimeInput = particleTime; 
 }

}
var updateEvent = script.createEvent("UpdateEvent");
updateEvent.bind(update);

function resetSequence()
{
 global.animationStartTime = getTime();
}

and you call

resetSequence();

where you play your animation.

Can't wait to see what you come up with! Don't forget to share :)

Cheers,

Jon

Hi Ian!

Glad to hear it's getting somewhere! Yes It's expected that the update script is running every time since it needs to keep track of time. 

It seems like it's not doing anything because resetSequence is not being called. You should call resetSequence wherever you are telling your animation to start.

For example:

//@input Component.AnimationMixer animMixer

script.animMixer.start("myAnimation,0,1);
resetSequence();

Let me know if you need me to clarify :)