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

    Comment actions Permalink
  • Thanks Jon! Super helpful. We'll give it a go and let you know how it's working out.

     

     

    Comment actions Permalink
  • Hi Jon,

    Again, thank you for responding...we really didn't know how to proceed. Unfortunately, the code didn’t work (no particles appeared at all) after setting the script to an Empty object and assigning the two particle materials, but there were no error messages in the logger which is good. We did a little debugging and it seems to be infinitely repeating the function update () and never getting beyond that point.

    Can you suggest a fix?

    Also, can you elaborate on where and how should we call resetSequence()?

     

    Many thanks!

    Comment actions Permalink
  • 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 :)

    Comment actions Permalink
Have a comment?

Please sign in to leave a comment.

We're here to help! We just need a little bit of information...

What system are you using?

Have you downloaded the latest version of Lens Studio?

Please download the latest version of Lens Studio. If you still run into this issue, please come back and report it!

Is this issue causing Lens Studio to crash?

What system do you run Lens Studio on?

Version

Graphics

Follow the next steps to help us solve your issue:

  • Copy and paste this text into your TerminalCommand Window
    open ~/Library/Preferences/Snap/Lens\ Studio/ %LOCALAPPDATA%\Snap\Lens Studio Copy Text
  • Press ReturnEnter to run the command. The Lens Studio folder will automatically open
  • Prepare to upload your files: zip the "Log" Folder by right-clicking and choosing "compress."
    Locate the Log.txt file right above it.

    Attach a screenshot of the issue:

Name:

Email:

What is this most relevant to?

Please enter a brief description of your issue:

Thanks for submitting this issue.

Unfortunately, it's likely due to the operating system or hardware you're using – since they don't meet the system requirements for Lens Studio.

Still, we hear you loud and clear, and are logging the issue in case there's ever a workaround we can provide!

Minimum Requirements

Operating System: Windows 10 (64 bit); MacOS 10.11+

Hardware: Minimum of Intel Core i3 2.5Ghz or AMD Phenom II 2.6Ghz with 4 GB RAM; Intel HD Graphics 4000 / Nvidia GeForce 710 / AMD Radeon HD 6450 or better; screen resolution of 1280x768 or higher

We'll try to resolve this issue as soon as possible. Thanks for letting us know about it!

Keep an eye out for a followup email from us. We may have a couple more questions for you, or we might already have a solution to offer.

Happy creating!