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

[Demorus]

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?

 

[anthonygreco]

Bezier curves use control points.

 

There are several resources out there for this. Just give this a go: https://www.google.com/search?q=calculating+bezier+curves

 

That primer link is very informative. Hope this helps.

[OSUblake]

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

[anthonygreco]

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.