• Choose a category
• All
• Classic-Fiction

//Draw points to illustrate path

points.push({x:ball.x,y:ball.y});

for (var i = 0; i< points.length; i++) {

context.drawImage(pointImage, points[i].x, points[i].y,1,1);

}

context.fillStyle = "#000000";

context.beginPath();

context.arc(ball.x,ball.y,15,0,Math.PI*2,true);

context.closePath();

context.fill();

}

var radiusInc = 2;

var circle = {centerX:250, centerY:250, radius:2, angle:0, radiusInc:2}

var ball = {x:0, y:0,speed:.1};

var points = new Array();

theCanvas = document.getElementById("canvasOne");

context = theCanvas.getContext("2d");

setInterval(drawScreen, 33);

}

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.

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.

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

For our purposes, the t value will be increased by the speed at which we want the object to move. You will notice, though, that this value does not easily equate to the speed values we used elsewhere in this chapter. The reason is that the t value was not created with movement over time for animation in mind. The speed we specify must be smaller than 1 so the movement on the curve will be incremental enough for us to see it as part of the animation. For our example, we will increase t by a speed of .01, so that we will see 100 points on the movement curve (1/100 = .01). This is advantageous because we will know our object has finished moving when the t value is equal to 1.

For Example 5-11 (CH5EX11.html), we will start by creating the four points of the Bezier curve in the canvasApp() function:

var p0 = {x:60, y:10};

var p1 = {x:70, y:200};

var p2 = {x:125, y:295};

var p3 = {x:350, y:350};

We then create a new ball object with a couple differing properties from those in the other examples in this chapter. The speed is .01, which means the object will move 100 points along the curve before it is finished. We start the t value at 0, which means the ball will begin at p0:

var ball = {x:0, y:0, speed:.01, t:0};

Next, in the drawScreen() function, we calculate the Bezier curve coefficient values (ax, bx, cx, ay, by, cy) based on the four points (p0, p1, p2, p3):

var cx = 3 * (p1.x - p0.x)

var bx = 3 * (p2.x - p1.x) - cx;

var ax = p3.x - p0.x - cx - bx;

var cy = 3 * (p1.y - p0.y);