Jump to content
GreenSock

Demorus

Bezier X Y coordinates confusion - any tutorials for absolute starters?

Recommended Posts

I have the following code which is the segmet that containers the coordinates of the bezier in a tween:

 

      /*p1*/{ xPercent: 0, yPercent: 0 }, { xPercent: 200, yPercent: 0 }, { xPercent: 200, yPercent: 200 },
      /*p2*/{ xPercent: 200, yPercent: 400 }, { xPercent: 0, yPercent: 400 },
      /*p3*/{ xPercent: -200, yPercent: 400 }, { xPercent: -200, yPercent: 200 },
      /*p4*/{ xPercent: -200, yPercent: 0 }, { xPercent: 0, yPercent: 0 }],

 

 

There are so many X and Y coordinates that im not sure what they do. The first X an Y I figured out but the rest... I keep doing random movements.

 

Any way to learn this quickly as an absolute starter in bezier curves like me?

 

Link to comment
Share on other sites

I found these animations constructing a curve to be helpful.

 

To help me better understand how to work with bezier curves in GSAP, I just played around with creating a bunch of random curves. You can check out the demo I made. If you open your console, you will see it print out a table of all the coordinates. The coordinates are based off of the top-left tile, so that would be { x: 0, y: 0 }

 

http://embed.plnkr.co/CIiLR4/preview

  • Like 5
Link to comment
Share on other sites

Was actually looking at something to do with this today and ran across this site.

 

It may even be the best visual representation I've come by, and it's interactive.

 

Read up on SVG paths too. :D

  • Like 2
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.
×