HTML and CSS Reference

In-Depth Information

<canvas id="canvasOne" width="500" height="500">

Your browser does not support HTML5 Canvas.

</canvas>

</div>

</body>

</html>

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 smooth curves for drawing, but they can also be used in animation to define

a path for motion.

A cubic Bezier curve is created using four distinct pointsâ€”
p0
,
p1
,
p2
, and
p3
:

p0

The starting point of the curve. We will refer to these
x
and
y
values as
x0
and
y0
.

p3

The ending point of the curve. We will refer to these
x
and
y
values as
x3
and
y3
.

p1
and
p2

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
.

The usage of the
p1
and
p2
points is the biggest stumbling block for

understanding Bezier curves. The easiest way to understand the rela-

tionship between these points and the curve is to draw them on a

bitmapped canvas, which we will do several times in this chapter.

After you have the four points, you need to calculate six coefficient values that you will

use to 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