How Bezier Curves Work

How Bezier Curves Work
0

#1

hello Fcc campers,

can somone guide me, How Bezier Curves Work


#2

You define a start point a and an end point b which are both coordinates ({x, y}). A vector is the description of how you get from a to b.

a = {x: 10, y: 20}
b = {x: 100, y: 50}

The vector would be b - a, so {x: 90, y: 30}. It would be a straight line.

To get a curved line, you can define more coordinates connected to each of a and b (handles). You then take all those coordinates and plug them into a special equation. That will spit out a description of a curved path between a and b.

It’s easier to understand if you see a demonstration:

http://www.victoriakirst.com/beziertool/

Just drop points on there then drag the little handles around.

If you are just wanting to use it in JS or in SVG or whatever then you don’t really need to understand the maths, more just how to use them