# Introduction To Bézier Curves

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

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

- 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`