2021-10-17 18:26:00 +02:00
|
|
|
|
---
|
2021-12-27 14:58:44 +01:00
|
|
|
|
title: Understanding Bézier curves
|
2021-08-25 16:09:31 +02:00
|
|
|
|
order: 50
|
2021-10-17 18:26:00 +02:00
|
|
|
|
---
|
2021-08-25 16:09:31 +02:00
|
|
|
|
|
2021-10-17 18:26:00 +02:00
|
|
|
|
While lines on computers are easy to store with a start and end point,
|
2021-08-25 16:09:31 +02:00
|
|
|
|
curves require more information.
|
2021-12-27 14:58:44 +01:00
|
|
|
|
In FreeSewing — as in SVG and countless of other computer applications —
|
|
|
|
|
curves are stored as [Bézier curves](https://en.wikipedia.org/wiki/B%C3%A9zier_curve),
|
|
|
|
|
named after French engineer [Pierre Bézier](https://en.wikipedia.org/wiki/Pierre_B%C3%A9zier) who
|
|
|
|
|
popularized their use back in the 1960s.
|
2021-08-25 16:09:31 +02:00
|
|
|
|
|
2021-12-27 14:58:44 +01:00
|
|
|
|
In FreeSewing, we use so-called cubic Bézier curves which have:
|
2021-08-25 16:09:31 +02:00
|
|
|
|
|
2021-10-17 18:26:00 +02:00
|
|
|
|
- A start point
|
|
|
|
|
- A first control point that’s linked to the start point
|
|
|
|
|
- A second control point that’s linked to the end point
|
|
|
|
|
- An end point
|
2021-08-25 16:09:31 +02:00
|
|
|
|
|
2022-01-19 13:06:33 +01:00
|
|
|
|
<Example settings_complete="0" part="path_curve">
|
2021-12-27 14:58:44 +01:00
|
|
|
|
An example of a Bézier curve drawn by the Path.curve() method
|
|
|
|
|
</Example>
|
2021-08-25 16:09:31 +02:00
|
|
|
|
|
2021-10-17 18:26:00 +02:00
|
|
|
|
Bézier curves and their *handles* or *control points* are surprisingly intuitive.
|
2021-08-25 16:09:31 +02:00
|
|
|
|
The following illustration does a great job at explaining how they are constructed:
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
2021-12-27 14:58:44 +01:00
|
|
|
|
You don't need understand the mathematics behind Bézier Curves.
|
|
|
|
|
As long as you intuitively *get* how the control points influence the curve, you're good to go.
|
|
|
|
|
|
2021-08-25 16:09:31 +02:00
|
|
|
|
<Note>
|
|
|
|
|
|
|
|
|
|
###### More on Bézier curves
|
|
|
|
|
|
2021-12-27 14:58:44 +01:00
|
|
|
|
Wikipedia has a good [introduction to Bézier curves](https://en.wikipedia.org/wiki/B%C3%A9zier_curve).
|
|
|
|
|
For a deep-dive into the subject, check out [A Primer on Bézier Curves](https://pomax.github.io/bezierinfo/) by
|
|
|
|
|
[Pomax](https://github.com/Pomax).
|
2021-08-25 16:09:31 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Note>
|
2021-10-17 18:26:00 +02:00
|
|
|
|
|