Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mmontoya

GSAP to Drive Procedural Animation

Recommended Posts

I am looking to have the best of both worlds: I would like to procedurally create an animation of exploding fireworks, but I would also like that animation to be scrubbable via GSAP. I'm not quite sure how to tackle this. My intuition tells me that I need to parameterize the procedural animation as a function of time, so that I can then use GPSAPs "progress" to drive the whole thing. Does anyone know of any examples I might examine that uses such an approach?  

  • Like 1

Share this post


Link to post
Share on other sites

Got a minimal demo? 
 

If you're trying to dynamically create an animation over time (I assume that's what you meant...right?) and you ALSO want to have it scrubbable, that doesn't really go together unless you know the exact duration at the start. Otherwise, the "scrub" would jump around. For example, imagine building a timeline (for scrubbing) - you could populate it dynamically without any problem. However, let's say you've got the "scrubber" at 50% (halfway)...but then you add stuff that makes the duration twice as long...now you've got to either make the scrubber jump to 25% or you just make the animations jump. It's logically impossible to avoid a jump in one or the other. 

 

See what I mean? 

  • Like 1

Share this post


Link to post
Share on other sites

Ha. I'm working on kind of the same thing... firework/explosion. See the video in the tweet below.

 

 

I can't share the code, but I found it easier to use tweens for almost everything. I calculate everything up front so there's no slow down when it explodes. It was a little tricky because I needed the first explosion to happen at an exact spot. 

 

The particles are animated with the Physics2D plugin.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

A better view.

 

 

  • Like 4

Share this post


Link to post
Share on other sites
10 hours ago, GreenSock said:

Got a minimal demo? 
 

If you're trying to dynamically create an animation over time (I assume that's what you meant...right?) and you ALSO want to have it scrubbable, that doesn't really go together unless you know the exact duration at the start. Otherwise, the "scrub" would jump around. For example, imagine building a timeline (for scrubbing) - you could populate it dynamically without any problem. However, let's say you've got the "scrubber" at 50% (halfway)...but then you add stuff that makes the duration twice as long...now you've got to either make the scrubber jump to 25% or you just make the animations jump. It's logically impossible to avoid a jump in one or the other. 

 

See what I mean? 

My thought was to use parametric equations so that the motion of the particles was a function of t. For example, if I wanted to do some simple ballistics, I could move a particle on the screen in a parabolic trajectory defined by: x=t,y=t^{2}\quad {\mathrm  {for}}-\infty <t<\infty .\,

 

If I use the scrubber as the input to t, I could then scale t (total length) by whatever amount I find most reasonable. The only precondition, as you suggest, is that the duration be known at the start, but this is fine, as I can tweak the total length until the timing seems appropriate.


So for example, using a sin or modulus function, with an input of t, I can set a firework to go off every n seconds and then drive the explosion through parametric equations (I am working with PIXI, so I will likely use PIXI particles).

In theory, what I have in mind is feasible - I will post back with a Codepen when I have a working POC. :-)
 

Share this post


Link to post
Share on other sites
10 hours ago, OSUblake said:

Ha. I'm working on kind of the same thing... firework/explosion. See the video in the tweet below.

 

 

I can't share the code, but I found it easier to use tweens for almost everything. I calculate everything up front so there's no slow down when it explodes. It was a little tricky because I needed the first explosion to happen at an exact spot. 

 

The particles are animated with the Physics2D plugin.

 

 

Nice! (Great minds think alike! ;-) )
As mentioned above, I will use PIXI particles and will likely calculate my own physics, as all I really need is to scale acceleration as a function of time (no need for bouncing or collisions).

My thought was to calculate the coordinates in 3D space and then do the math to project onto a 2D plane in order to have that nice Sideshow Bob, volumetric look:


image.png.12725df2f087c7a7252c4666a77c0519.png

Share this post


Link to post
Share on other sites

In the end, the requirements for this changed - it longer needs to be scrubbable, just interactive, which simplifies things a bit, as I no longer need to tie the animation's progress to a playhead.

Nevertheless, it seems plausible to drive the "update" function, which receives a heartbeat from GSAP's ticker, with a progress event instead, and then scale that by whatever the total length of the desired animation might be. I could then set the rockets to fire at predetermined moments in time and call that function from within a GSAP timeline.


Here's a Codepen of what I worked out: 
 

See the Pen mdPbdQX?editors=0010 by montoyland (@montoyland) on CodePen



I would love to be able to turn each explosion fragment itself into an emitter so each fragment leaves behind a trail of particles, but this was already bogging down my machine (in fact, I'm currently limiting the firing of the rockets to one at a time), and if we multiply each fragment by 1000 or so particles, this could easily get out of control fairly fast and result in millions of particles in just a few seconds. 

As all I really need is to convey the sense of fireworks - it can remain stylized, so this is good enough for now.

 

Share this post


Link to post
Share on other sites
31 minutes ago, mmontoya said:

I would love to be able to turn each explosion fragment itself into an emitter so each fragment leaves behind a trail of particles, but this was already bogging down my machine (in fact, I'm currently limiting the firing of the rockets to one at a time), and if we multiply each fragment by 1000 or so particles, this could easily get out of control fairly fast and result in millions of particles in just a few seconds. 

 

I used a ParticleContainer for each firework, which improved performance, but it has a couple limitations. The most performant option would be to use a shader. Lots of examples here.

https://www.shadertoy.com/results?query=fireworks

 

  • Like 4

Share this post


Link to post
Share on other sites

In fact, in the end, I animated the explosion in Houdini and rendered it as a sprite sheet which I can vary with hue shift and scale. This gave me the most artistic control and best performance. (I attached a frame from the sequence, below).

Great resource, BTW! I was not aware of shadertoy - lots of great examples to pick apart!firework_sheet@2x-11.png.5b2dce3783671155addb603bdb5b1a67.png

  • Like 2

Share this post


Link to post
Share on other sites
On 8/4/2020 at 7:52 PM, OSUblake said:

The most performant option would be to use a shader.

 

In case anyone else is wondering about this, here's an example of how to do animations on the GPU. Animating a million particles shouldn't skip a beat, even on a phone. 😲

 

See the Pen NWNNZKe by osublake (@osublake) on CodePen

 

 

 

  • Like 6

Share this post


Link to post
Share on other sites

This is great! Thanks for sharing. I think the bottleneck in my example was due to having to calculate the positions of all those particles in 3D space on the CPU and then doing a projection into screen space.

Time to roll up my sleeves and learn about vertex/fragment shaders!

Share this post


Link to post
Share on other sites
3 minutes ago, mmontoya said:

I think the bottleneck in my example was due to having to calculate the positions of all those particles in 3D space on the CPU and then doing a projection into screen space.

 

Yeah, the CPU won't be able to handle thousands of calculations. On my machine running at 120fps, it starts bogging down at around 8,000 animations. 

 

That demo I made is based on this Pixi demo using instanced geometry.

https://pixijs.io/examples/#/mesh-and-shaders/instanced-geometry.js

 

And concepts from these tutorials that use three.js.

 

The memory management article really helped me out

https://medium.com/@Zadvorsky/into-vertex-shaders-594e6d8cd804

 

And the Particle Series here, especially The ThreeJS Particles, faster article

https://blog.mozvr.com/threejs-intermediate-skill-tutorials/

 

  • Like 4

Share this post


Link to post
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.

×