picture home | art | events | music | rack extensions | downloads | pixel blog

omino pixel blog

pixels, motion, and scripting
david van brink // Sun 2010.12.26 17:47 // {general}

Beziers

We most of us use Bezier curves all the time, for masks, shapes, animation curves. They’re pretty intuitive. Points, control handles… yeah, you can usually get them to do what you want.

To do some math recently, I googled a bit more about them. They’re named from Pierre Bezier (1910-1999) who popularized them for CAD while designing cars for Renault. The standard “two-handle” style used by Adobe apps (and most others) is a “cubic Bezier”, because the equation uses some cubes.

To walk a cubic Bezier mathematically, given the four points (two end points, and two intermediate control handles), you can use this Python code, varying t from 0.0 to 1.0:

# given points p0, p0Out, and p1In, and p1, and t varying from 0.0 to 1.0...
a0 = (1 - t) ** 3
a1 = 3 * (1 - t) ** 2 * t
a2 = 3 * (1 - t) * t ** 2
a3 = t ** 3
# calculate x and y
x = a0 * p0.x + a1 * p0.xOut + a2 * p1.xIn + a3 * p1.x
y = a0 * p0.y + a1 * p0.yOut + a2 * p1.yIn + a3 * p1.y

But that’s all tricky. Here’s an intuitive way to visualize just what the heck a Bezier curve really (for really) is:

I did this animation in Python… stay tuned for much more on that front.

Super kudos to bimixual.org for the clear explanation.

Comments are closed.

0.0155s
(c) 2003-2023 omino.com / contact poly@omino.com