HTML and CSS Reference
In-Depth Information
Cubic Bezier Curve Movement
Cubic Bezier curves can be used to define a movement path for an object. Pierre Bezier first
popularized these curves in the 1960s. They are widely used in 2D vector graphics to define
smoothcurvesfordrawing,buttheycanalsobeusedinanimationtodefineapathformotion.
A cubic Bezier curve is created using four distinct pointsâ€” p0 , p1 , p2 , and p3 :
pp0
The starting point of the curve. We will refer to these x and y values as x0 and y0 .
pp3
The ending point of the curve. We will refer to these x and y values as x3 and y3 .
pp1 and pp2
The control points for the curve. The curve does not pass through these points; instead,
the equation uses these points to determine the arc of the curve. We will refer to these x
and y values as x0 , x1 , x2 , x3 , y0 , y1 , y2 , and y3 .
NOTE
The usage of the p1 and p2 points is the biggest stumbling block for understanding Bezier curves.
The easiest way to understand the relationship between these points and the curve is to draw them on
a bitmapped canvas, which we will do several times in this chapter.
Afteryouhavethefourpoints,youneedtocalculatesixcoefficientvaluesthatyouwilluseto
find the x and y locations as you move an object on the curve. These coefficients are known
as ax , bx , cx , ay , by , and cy . They are calculated as follows:
cx = 3 * ( x1 - x0 )
bx = 3 * ( x2 - x1 ) - cx
ax = x3 - x0 - cx - bx
cy = 3 * ( y1 - y0 )
by = 3 * ( y2 - y1 ) - cy
ay = y3 - y0 - cy - by
After you've calculated the six coefficients, you can find the x and y locations based on the
changing t value using the following equations. The t value represents movement over time:
x ( t ) = axt3 + bxt2 + cxt + x0
y ( t ) = ayt3 + byt2 + cyt + y0
Search WWH ::

Custom Search