Share Posted December 9, 2015 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 comment Share on other sites More sharing options...
Share Posted December 9, 2015 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 2 Link to comment Share on other sites More sharing options...
Author Share Posted December 9, 2015 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 comment Share on other sites More sharing options...
Share Posted December 9, 2015 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. 2 Link to comment Share on other sites More sharing options...
Share Posted December 9, 2015 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 4 Link to comment Share on other sites More sharing options...
Share Posted December 9, 2015 Maybe it should be exploding snow. I'd watch that demo. Exploding snow is on my todo list. 2 Link to comment Share on other sites More sharing options...
Author Share Posted December 9, 2015 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 comment Share on other sites More sharing options...
Share Posted December 9, 2015 It's always a good time to play with Pixi! And remember that CloudKid particle emitter I showed you? Let it snow! http://pixijs.github.io/pixi-particles-editor/#snow Rain is fine too... http://pixijs.github.io/pixi-particles-editor/#rain 1 Link to comment Share on other sites More sharing options...
Author Share Posted December 9, 2015 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 comment Share on other sites More sharing options...
Share Posted December 9, 2015 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 comment Share on other sites More sharing options...
Author Share Posted December 9, 2015 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 1 Link to comment Share on other sites More sharing options...
Share Posted December 9, 2015 WOW! That's an awesome demo! That particle engine is definitely a lot more complicated than the original starling particle system I was looking at. Link to comment Share on other sites More sharing options...
Author Share Posted December 10, 2015 Just a quick update. I took Diacos above CodePen and applied the TweenMax code along with a Pixi renderer. See the Pen f62da3152b7cf640633fe734cdd4b184?editors=001 by SnapToPixels (@SnapToPixels) on CodePen Thanks again for sharing links - P 2 Link to comment Share on other sites More sharing options...
Share Posted December 10, 2015 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 2 Link to comment Share on other sites More sharing options...
Author Share Posted December 10, 2015 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 comment Share on other sites More sharing options...
Share Posted December 10, 2015 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. 2 Link to comment Share on other sites More sharing options...
Share Posted May 19, 2016 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 5 Link to comment Share on other sites More sharing options...
Author Share Posted May 19, 2016 Is there a Love button for posts? haha...I love how the explosions leave marks. Thats awesome! 2 Link to comment Share on other sites More sharing options...
Share Posted September 21, 2016 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 comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now