Jump to content
Search Community

Bezier plugin returning negative value

Rodrigo test
Moderator Tag

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

I don't know if someone else has stumped into something like this before. I did a quick search and couldn't find anything.

 

As you can see in the pen, I'm updating the values of an object using the bezier plugin with the idea of drawing a rounded rectangle in PIXI using quadratic bezier because it has just one control point which keeps code simpler. The issue comes at the end of the GSAP instance, the final value should be { x: 0, y: 130 }, but the values returned by the bezier plugin are smaller than that, I mean reaaaaaally small, the problem is caused in the 15th decimal position!!.

 

I have no issue in adding some extra logic in my code, in order to force the values to 0 and 130, but since I'm not extremely familiar with the bezier equations used by GSAP, I don't know if this is by design, some sort of inevitable tradeoff of the calculations inside the plugin or an actual issue.

 

Happy Tweening!!

See the Pen JVdmwz by rhernando (@rhernando) on CodePen

Link to comment
Share on other sites

Great catch, @Rodrigo. That is indeed due to very small rounding errors that plague certain math operations in binary systems. You've stumbled across a pretty rare situation that causes the values to be SLIGHTLY off. I've implemented a workaround in the next release which you can preview (uncompressed) here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

In the mean time, though, it should be relatively easy to add a little extra logic to your code to work around it. Thanks for letting us know about this!

  • Like 3
Link to comment
Share on other sites

Works like a charm Jack, thanks a bunch!!!

 

Yeah, since the values are reaching less than zero and almos 130, basically I added a return at the top of the callback if the value for x is less than 0, like that the extra conditional logic is not expensive at all. Finally PIXI takes care of rounding the value of y to 130, so nothing too complicated.

  • Like 3
Link to comment
Share on other sites

15 hours ago, GreenSock said:

That is indeed due to very small rounding errors that plague certain math operations in binary systems.

 

@PointC See?? the binary system is at fault here, so you should blame the Egyptians, Indians, Chinese, Leibniz (I think that's the way is written) and the geniuses that thought it was a good idea to use it on IT. We're all victims here :D

  • Haha 3
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...