Skip to content
{{ message }}
This repository has been archived by the owner. It is now read-only.

# louisdh / bezierpath-length Archived

Switch branches/tags
Nothing to show

Cannot retrieve contributors at this time
executable file 125 lines (93 sloc) 5.47 KB

# Bézier Path Calculations

Any `CGPath` can be split into subpaths, of which there are three types:

When calculating the length of a `CGPath` we actually calculate the sum of the lengths of all its subpaths.

## Linear

Linear is the most simple type, as it defines a straight line by two points.

### Length

The following formula calculates the exact distance between two points:

The order of the points is not important. The distance from `A` to `B` is equal to the distance from `B` to `A`.

### Parametric

Although there exists a formula to get the exact length between two points, it is useful to get a point on the path (meaning between the two points). For this a parametric formula is needed:

`t` is defined in the range `0...1` (inclusive), where `t = 0` defines `P0` and `t = 1` defines `P1`

This parametric formula needs to be evaluated for both the x and y coordinates of the two points, with an equal value for `t`.

Note that the `t` factors add up to 1 (`(1 - t) + t`), this is required for this type of formulas to work.

See Linear Parametric Function.gcx for an interactive example. 1

## Quadratic curve

Quadratic curves are defined by two points and one control point. The control point does not necessarily represent a point on the curve, but can rather be thought of as a "magnetic point" which attracts a parabolic-shaped curve to it.

### Parametric

`t` is defined in the range `0...1` (inclusive), where `t = 0` defines `P0` and `t = 1` defines `P2`

`P0` is the start point, `P1` the control point and `P2` the end point.

This parametric formula needs to be evaluated for both the x and y coordinates of the two points, with an equal value for `t`.

This animation shows `P1` oscillating its `x` value between `1` and `4`.

Note that when `P0` and `P1` have the same coordinates, the path is linear and `P1` becomes redundant.

See Quadratic Parametric Function.gcx for an interactive example. 1

## Cubic curve

Cubic curves are defined by a start and end point and two control points.

### Parametric

`t` is defined in the range `0...1` (inclusive), where `t = 0` defines `P0` and `t = 1` defines `P3`

`P0` is the start point, `P1` and `P2` are control points and `P3` is the end point.

This parametric formula needs to be evaluated for both the x and y coordinates of the two points, with an equal value for `t`.

See Cubic Parametric Function.gcx for an interactive example. 1

## Overview

The three subpath types essentially embody an increasingly higher degree of polynomials, as can be seen in the first term:

Name First term
Linear
Quadratic
Cubic

Furthermore, these parametric functions can easily be memorized. The number of terms is equal to the `degree + 1`:

Name Number of terms
Linear 2
Quadratic 3
Cubic 4

Each term, the factor `(1 - t)` decreases its power by `1`, starting at `degree`. And each term the factor `t` increases its power by `1`, starting at `0`.

Finally, the coefficients of the terms can be found using Pascal's triangle:

source: Wikipedia

Name Coefficients
Linear 1 1
Quadratic 1 2 1
Cubic 1 3 3 1

When showing the functions in one table, the pattern becomes clear:

Name Parametric function
Linear
Quadratic
Cubic

This pattern continues beyond cubic, but is out of scope for this project.

To see more, check: Bézier curve - Higher order curves on Wikipedia

## Footnotes

1: Grapher is included on every Mac and can be found in `/Applications/Utilities`