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 tt, two points  ˋ0\grave~0 and  ˋ1\grave~1 as input, the function will output a point.

If you plug in tt between 00 and 11, it forms a line segment between  ˋ0\grave~0 and  ˋ1\grave~1. 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 tt called 00 and 11. when tt is 00, the corresponding point on the linear Bézier curve is one of the two points. when tt is 11, 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 0=10 = 1, 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

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