Jump to content
GreenSock

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

Physics2DPlugin for snow animation

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

Hello everyone, I forked and tweaked a Canvas animation on CodePen.

 

I was wondering if anyone had created a similar animation using the GSAP Physics2DPlugin?

I'm starting on it now but I thought it couldn't hurt to ask here too :)

 

Thanks guys!

P

See the Pen 0cd8a0c9411b6bbba7b04e2d355c8540 by SnapToPixels (@SnapToPixels) on CodePen

Link to post
Share on other sites

What did you want to use the physics for? Physics are great for stuff that might change direction, like

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

or

See the Pen wKWVmG by MAW (@MAW) on CodePen

, but what you have looks pretty good. 

 

Here's a pen by Diaco that's pretty close to what you are doing, although it's using DOM elements. Same concept though.

See the Pen KdmwMb?editors=001 by MAW (@MAW) on CodePen

  • Like 2
Link to post
Share on other sites

well, it was more about the GSAP vs Canvas demo.

I started a similar one based on the GSAP Physics demo.

 

I forgot how easy the GSAP Physics plugin is to use. Although Canvas seems more performant.

 

Thanks for the response, I'll post my demo later

 

P

Link to post
Share on other sites

What did you want to use the physics for? Physics are great for stuff that might change direction, like

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

 

Maybe it should be exploding snow. I'd watch that demo.  :-)

  • Like 2
Link to post
Share on other sites

I know it's common in canvas animations to just update a value on each requestAnimationFrame instead of using a tween, but I doubt you'll notice any performance problems. I can't say for certain, but it might actually be faster using a tween because you can do all the calculations up front. That's how I did the star explosions with the Physics2D Plugin.

 

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

 

I also like to use GSAP's ticker because it keeps everything in sync and makes sure the engine updates my values before I do any rendering. Here's a demo where I use regular tweens combined with a typical canvas update method to change the position. You can get several thousand animations going before noticing any slowdown.

 

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

  • Like 4
Link to post
Share on other sites

Maybe it should be exploding snow. I'd watch that demo.  :-)

 

Exploding snow is on my todo list.

  • Like 2
Link to post
Share on other sites

I know it's common in canvas animations to just update a value on each requestAnimationFrame instead of using a tween, but I doubt you'll notice any performance problems. I can't say for certain, but it might actually be faster using a tween because you can do all the calculations up front. That's how I did the star explosions with the Physics2D Plugin.

 

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

 

I also like to use GSAP's ticker because it keeps everything in sync and makes sure the engine updates my values before I do any rendering. Here's a demo where I use regular tweens combined with a typical canvas update method to change the position. You can get several thousand animations going before noticing any slowdown.

 

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

 

nice, thats excellent.

I think I am coming to the same conclusion. That original pen was something I forked with the intention of controlling it with the GSAP ticker for that reason.

This also might be a perfect time to play with Pixi too! Thanks for the reminder :)

 

Patrick

Link to post
Share on other sites

It's always a good time to play with Pixi! And remember that CloudKid particle emitter I showed you?

 

Let it snow!

https://cloudkidstudio.github.io/PixiParticlesEditor/#snow

 

Rain is fine too...

https://cloudkidstudio.github.io/PixiParticlesEditor/#rain

 

 

SWEET! Thats awesome! I dod remember you sending those links for CloudKid...definitely on my list.

I have a Particle Designer tool from 71Squared but I don't recall if I can use it with Canvas. I bought it a long time ago to use with Starling. ;)

 

Thanks for that link...the UI is fantastic. I love the WebGL/Canvas toggle...simple love it

 

- P

Link to post
Share on other sites

Funny... I was looking at starling not too long ago to get ideas on how to make a GSAP powered particle emitter. Doesn't look too hard to convert most of it over to JS, but right now I don't have any need for an emitter, so I'll have to put that one on my todo list right after exploding snow.

Link to post
Share on other sites

yeah Starling is excellent. I use it with Feathers, Spine and GSAP to build AIR apps on iOS/Android.

I've been working on a childrens book using these. It's so fun.

 

Also Spine can be used with just about every popular framework.

 

The particle engine I use with Starling is this one. It's for AS3 of course which seems to scare people these days. But if you do AIR like I do, it's brilliant.

http://www.flintfabrik.de/pgs/starling/FFParticleSystem/

 

Here is the homepage

https://github.com/shin10/Starling-FFParticleSystem

  • Like 1
Link to post
Share on other sites

WHAT ARE YOU DOING?!?!? This ain't SVG. Crank that ish up! And you probably overlooked this copying Diaco's code, but there is no rotationX/Y, and the angle needs to be in radians.

 

12,000 snowflakes...

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

  • Like 2
Link to post
Share on other sites

Ha ha...I don't need to pump it up that much. But its comforting to know that I can. Your snow is nuts!

 

Thanks for catching the rotation, I thought I removed that. I didn't realize the radians though. That will be useful of course.

 

Pixi a monster library. I've been reading through the docs tonight and I am falling in love...

Also looking at CloudKids GitHub again...things are getting serious around here. :)

 

I appreciate the sharing. Simply awesome.

 

btw - how did you do the shadow on the snowflakes? Or am I seeing things because I am sleepy?

 

haha nevermind, I see it in the sprite :)

Time for sleep

 

Talk soon!

Link to post
Share on other sites

Yeah, you're seeing things. I didn't add a shadow, but that's pretty easy to do with a dropshadow filter. I don't think you can add a filter to a particle container or anything inside it. However, you can create a wrapper container for the particle container, and then add the filter to the wrapper. To get it to display you also need to define the size of the filterArea. On a normal container you normally don't have to define the filterArea, but a particle container is kind of a special case so there's a couple extra steps involved.

var stage = new PIXI.Container();
var wrapper = new PIXI.Container();

stage.addChild(wrapper);
wrapper.addChild(sprites); // Add particle container

var shadow = new PIXI.filters.DropShadowFilter();

// Define filter area and apply it to the wrapper
wrapper.filterArea = new PIXI.Rectangle(0, 0, width, height);
wrapper.filters = [shadow];

Now you're not seeing things...

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

 

But I think a more performant way to do this would be to just apply a dropshadow filter to your snowflake texture, and then generate a new texture from that which you could then reuse for all the other particles.

  • Like 2
Link to post
Share on other sites
  • 5 months later...

Maybe it should be exploding snow. I'd watch that demo.  :-)

 

I'm sure an exploding snow question is going come up sooner or later, and it was on my todo list.

 

I'll have to come back and finish this one later, but the GreenSock logo sure can take a beating...

See the Pen 58dbb70181ba66efc7611e150743a5e2?editors=0010 by osublake (@osublake) on CodePen

  • Like 6
Link to post
Share on other sites

Is there a Love button for posts? haha...I love how the explosions leave marks. Thats awesome!

  • Like 2
Link to post
Share on other sites
  • 4 months later...

Is there a Love button for posts? haha...I love how the explosions leave marks. Thats awesome!

 

Love button is can be found only in Facebook LOL! 

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.

×