Introduction To Bézier Curves
Inaccessibility
I’m sorry phone readers :≀ Please view the image directly instead!
Let’s look at the world from Bézier curve’s perspective.
Main Content
Clarifying Text
Introduction
Behold! A drawing entirely made out of Bézier curves!
Buliding Blocks
When we say Bézier curves, what do we mean here?
Well, there is the scalar type S
, the point type P
, and three operators.
S : Type
P : Type
(1-) : S->P->S
(+) : P->P->P
(*) : S->P->P
You might be surprised by how little is defined here. We will define a little bit more later on.
Linear Bézier curves
A linear Bézier curve is a function. Given a scalar , two points and as input, the function will output a point.
If you plug in between and , it forms a line segment between and . That’s actually an optical illusion, as Bézier curves generally don’t care about how they look like.
What is a Bézier curve
What is a Bézier curve? that’s a good question.
For a start, there should be two special terms of called and . when is , the corresponding point on the linear Bézier curve is one of the two points. when is , it’s another point.
Distance? Never heard of it. Angle? Is that edible?
Quadratic Bézier curves
A quadratic Bézier curve receives three points as input. A linear Bézier curve receives two.
Otherwise, there is not much else notable about this function.
Cubic Bézier curves
A cubec Bézier curve receives four points as input.
At this point, you can probably understand how infinite this will go.
A Trivial Proof
When , the P set gets forced into a single point. That’s fun.
The proof is left as exercise for the reader because i can’t fit the algograph proof in the margins. You can use normal math syntax to prove it, or do it in your head. As long as you proved it, you’ve done well!
more readings
- https://easings.net/
- https://cubic-bezier.com/
- https://github.com/ai/easings.net/blob/master/src/easings.yml
- https://en.wikipedia.org/wiki/B%C3%A9zier_curve
- https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm
- https://en.wikipedia.org/wiki/Numerical_stability
my graphical+textual article creation workflow
free time, RM110, showcase of algograph.
drawing exported by rmc. minute amount of CSS.
host:
rsync 11:/usr/bin/xochitl ./
rmc -t svg xochitl/awawa/awawa.rm > a.svg
inkscape a.svg # modify with inkscape
svgo a.svg # shrink file size
how i created annotation regions:
- inkscape, export svg to png (select
Content
) - aseprite, create slices
aseprite -b --list-slices --data _data.json bezier-algorithm.rm.aseprite
deno run -A
asepritejson-to-htmlareas.js