Jump to content
GreenSock

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

physics 2d plugin question

Recommended Posts

Hey all,

Just wondering if it possible to achieve what I've mocked-up below using this plugin?

Basically, I want all of the shapes to build up and the bottom of the page as opposed to falling off. 

Thanks in advance.

Group 17.png

Link to post
Share on other sites

Hey Andrew. The Physics2D plugin makes physics-like animations but isn't a more full physics simulation. As such, using it for this effect you'd need to add the capability to stop the physics animation once the balls reach the bottom yourself. It might be a better use case to use a library like Matter.js for this sort of effect.

  • Like 1
Link to post
Share on other sites

Thanks for your reply @ZachSaucier. Is there a way I can add custom easing to these shapes so that they aren't all falling at the same pace? 

Link to post
Share on other sites

Sure. Exactly how to do so depends on your setup. How about you create a minimal demo of what you have working?

 

Link to post
Share on other sites

I highly suggest not using DOM elements for this sort of animation. Canvas will perform extremely better than using DOM elements.

 

To answer your question, the ease is determined by the starting velocity, angles, and gravity (mostly gravity is what affects the easing). But what you have is generating a random gravity in the given range... So what do you want help with?

Link to post
Share on other sites

Hey @ZachSaucier, I managed to figure out the easing by using gravity, velocity etc as you mentioned.

How would I replicate this exact animation by using canvas as opposed to using the DOM? For clarity I am a background image in each of those coloured shapes that are animated. 

Thanks for your help so far.

Link to post
Share on other sites
11 minutes ago, andrewandopen said:

For clarity I am a background image in each of those coloured shapes that are animated. 

Even more reason to use canvas.

 

Canvas is a bit different than the DOM. There are a lot of resources out there on how to use it. In short, you draw each image to the canvas and update its position based on data that you store about it. 

Link to post
Share on other sites

Out of curiosity, why don't the GSAP demos for this plugin(which are very similar to the animation I've shown) need to use canvas? 

Link to post
Share on other sites

Number of elements mostly. More elements, less performant.

Link to post
Share on other sites

Hey @ZachSaucier, so after a week of figuring out how to setup and use my HTML canvas I've figured out how to draw all of my elements to it, but I can't figure out how to animate them using the method I used in this post .



New pen here where I have set up my canvas and drawn my elements to it :

See the Pen jOrQWPx by andrewandopen (@andrewandopen) on CodePen

Link to post
Share on other sites

Hey Andrew. First let's understand what exactly is going on in the demo that you provided:

  • You create a canvas to use.
  • You create 400 images in the DOM but don't append them to the page. Once they're done loading you draw them all at the same location of the canvas (stacking them).
  • You set their properties to the initial ones and animate the DOM images. But since the DOM images aren't shown, nothing changes on your page. 

See why nothing changes visually after the images have loaded? :) 

 

Now, some key principles when working with Canvas:

  • It is like a literal canvas in that anything drawn to it covers up things that are previously drawn - there is no controllable z index.
  • There is no memory state between frames - any time you change values you need to redraw things.
  • You should almost always have a memory state of variables that are then drawn to canvas.
  • You can't use units like vh or properties like scale directly. You should instead calculate what these variables should be.

In the end it should look something along the lines of this:

See the Pen dyXQOJm?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Note: Images in canvas perform well but basic shapes perform even better. If you are just using basic shapes or need better performance, consider dropping the need for images.

  • Like 2
Link to post
Share on other sites

@ZachSaucier Thank you so much for taking the time to go through this. Your explanation makes perfect sense to me, I'm going to have to take some time to digest the code though 😅, it seems quite complex.

Thanks again for your help!

Link to post
Share on other sites

It's not very complex, it's just a different flavor because the medium is different. You'll get used to it the more you work with it :) 

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

Hello Zach! Great responses here. I am brand new to greensock, and so far it's like an angel sent from heaven!! hahah. I am trying to recode a project I did in Jquery that got choked down in the animations and very excited to see how the greensock changes things!

 

Question - If I was coding a game where users input responses... and a fountain burst for them like in this "do it on the canvas" discussion way, would you suggest the CANVAS for that as well?

 

I anticipate what will be happening is the database calls will tell the page HOW MANY shapes to draw on the page (on a constant basis), then the GSAP will animate those DRAWN objects as they hit the page right?

 

Versus a static loaded page that would draw them all once upon loading the page. 

 

Person A hits their button... Page X on a websocket is told a new response came in and therefore triggers a script that DRAWS 5 shapes, which when completed triggers the animation GSAP script... sound like I have it covered?

 

Just making sure I don't take the time to learn CANVAS fundamentals yet if I will end up reading later that since it's all dynamically being draw or created it should have been in the DOM... I assumed as I read this thread that it was PERFECT for Canvas.

 

Thoughts?

 

AND THANKS for the incredible website and support etc...

 

 

Link to post
Share on other sites

Hey @Jim Nayzium. Yeah, canvas can be totally dynamic like that. Absolutely. Nothing about the dynamic nature of what you described would indicate to me that it must be done in the DOM. 

 

Have fun!

  • Like 1
Link to post
Share on other sites
On 11/10/2020 at 11:18 AM, ZachSaucier said:

Note: Images in canvas perform well but basic shapes perform even better. If you are just using basic shapes or need better performance, consider dropping the need for images.

 

I think images are always faster. This demo really shows the performance difference. When you check "Use bitmap", it will use images instead of drawing shapes, giving a massive performance boost.

 

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

 

 

  • Like 3
  • Thanks 1
Link to post
Share on other sites
8 minutes ago, OSUblake said:

I think images are always faster.

 

There might be exceptions, like when drawing rectangles using fillRect or strokeRect as it doesn't have to compute a path. It's always best to test and compare first. There really are no hard rules when it comes to coding.

  • Like 4
Link to post
Share on other sites

That's incredible Blake! Are you OSU, "I'm a MAN!!!!" OSU?? I have no personal chip in the game, just curious if it was OKST or Buckeye?

 

So, dumb this down for me a bit. If I have a super tiny .SVG file already premade that I like, is using the <img src="xyz.svg" /> the same thing as using "images" ??

 

And if so, are you saying I should do it that way OVER just drawing the SVG natively inside the script itself?

 

Currently, what I am doing is using the DRAWN SVG file inside the CSS Background for a div, and then having my generator write the DIV element everywhere... but I haven't tested it thoroughly with hundreds like your script does!! I can't wait to pick that apart and learn inside it.

 

 

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.

×