Jump to content
Search Community

physics 2d plugin question

andrewandopen test
Moderator Tag

Recommended Posts

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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 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...