Jump to content

# 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?

##### Share on other sites

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.

• 3
##### 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

• 5
##### 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.

• 2

## 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.
×