Jump to content
Search Community

Particle animation: turning the emitter on and off (kill repeat?)

spacewindow test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys, I'm new to Greensock and particle animation and have been hacking away with simpler examples of this awesome pen you created for 3d particles. 

See the Pen LVzxzR by GreenSock (@GreenSock) on CodePen

.

 

What I want to achieve is being able to turn the particle emitter on and off like a tap (eg the already moving particles will complete their journey, but no new particles will be created by the emitter.

 

I experimented with trying to use kill({repeat:true}) for my timeline, but this had no effect (though I successfully turned off individual animating properties in my timeline, such as the y position of particles with kill({y: true})).

 

Is such an effect possible? I would like the tap to stop in a more convincing way.

 

I know there may be a less manual method using on of your Physics plugins.

 

Thanks!

See the Pen PZYbvx by spacewindow (@spacewindow) on CodePen

Link to comment
Share on other sites

  • Solution

I would not make an emitter a timeline. I would create the particles ahead of time, and cache them. When you need to emit a particle, you just pull it from the cache. If your emitter is too fast you might have to create more particles or your cache might be empty, causing gaps. 

 

See the Pen wMwZoW?editors=001 by osublake (@osublake) on CodePen

  • Like 5
Link to comment
Share on other sites

Hi OSUblake,

 

Fantastic solution, is there any chance you could explain some of your code for a Javascript rookie like me?

 

  1. I have a pretty basic understanding of caching – how does the onComplete work in this example? From what I understand, it
    • makes this particular timeline invisible ( autoAlpha:0 )
    • pauses it ( tl.pause() )
    • then... adds the tl again to the cache ( cache.push(tl) ) ? I'm not quite sure as it seems you would end up with exponentially increasing number of objects in the cache... but obviously we don't ... can you explain?
  2. Can you explain what is happening in your emit function? Particularly curious about line 69 (using && instead of an if statement I think?), what is this doing?
if (elapsed > frequency) {
    
    var tween = cache.shift();       
    tween && tween.play(0);
    last = current;
  }

Hope you have the time to satisfy my curiosity, thanks.

Link to comment
Share on other sites

Note that I didn't totally set this up like a true, full blown particle emitter, but it should work just fine for what you are trying to do.

 

Caching is nothing more than keeping a reference to something, which I'm doing by adding all those timelines to an array. The key to understanding how I'm using those cached timelines is how queues work, FIFO, first in, first out. Think of it like the milk in your local grocery store, and how the the older milk gets pushed to the front of the shelf. Newer milk gets added to the back.

 

Each particle starts out paused and hidden (autoAlpha: 0). When it comes time to emit a particle in the emit function, I remove the first particle timeline in the array.

// Remove first timeline from array
var tween = cache.shift();

So if we started out with 200 timelines in the array, it's now at 199. The next line of code makes sure that a timeline exist before calling play. If the cache is at 0, it's going to return undefined, which would result in an error if we didn't do this check.

// Make sure we have a tween first, and then play it
tween && tween.play(0);

We could rewrite that like this.

var tween = cache.shift();

if (tween != null) {
  tween.play(0);
} else {

  // OH NOES!!! The cache is empty
  console.log("CACHE IS EMPTY!!!");
}

last = current;

I modified the demo to only 100 particles so that you can see the cache warning in the console.

 

See the Pen 0b202009edda91b8a7975a8eeebcb5cb by osublake (@osublake) on CodePen

 

Hopefully everything up to this point makes sense. This will get the timelines playing at least once, but remember that this is also depleting our cache of timelines. To make a timeline available again in the cache we wait until it has finished playing. Once a timeline has finished playing we simply add it back to the array. Remember that in order to play a timeline, we first remove it from the array. This is why the number of objects in the array will never go beyond the initial amount.

function onComplete() {
  TweenLite.set(particle, { autoAlpha: 0 });
  tl.pause();
  cache.push(tl); // It's removed from the cache, so add it back
} 
  • Like 3
Link to comment
Share on other sites

Very exciting  – I've learnt a lot from doing this, and not just about Greensock, but also some Javascript concepts as I've googled my way through your code (which I think I now understand in full). Thank you so much for your generosity and time!

 

I couldn't agree more. Osublake is:

1. Someone who REALLY knows the foundation of ECMAscript and oh so many frameworks, libraries, name it...

2. A great coder

3. A great teacher

4. Most important: SOOO nice and generous to everyone.

 

Tip for newbies and intermediates with Javascript (and GSAP of course): Study his codepens http://codepen.io/osublake/ and smile!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...