Motion of a ball along a second-order Bezier curve

what is a bezier curve

Use three-point control to generate a smooth curve, see this Bezier curve literacy for specific analysis

Use canvas to draw a ball moving along a Bezier curve

A Bezier curve is determined by three points, the starting point P0, the intermediate point (control point) P1, and the ending point P2. After determining the three points, use all the quadraticCurveTo methods of the canvas to draw the second-order Bezier curve, and the movement path of the ball appears. However, the ball needs to move along the curve. The movement of the ball is frame by frame, and each frame is at a different point position. Therefore, it is necessary to calculate a set of point coordinates at a certain interval, and then change the position coordinates of the ball according to the set. , so as to achieve the effect of the ball moving along the curve.

1.canvas draw a Bezier second-order curve

The quadraticCurveTo method is a formula for drawing a Bezier second-order curve that comes with canvas. It passes in the control point and end point, and draws the curve.

function draw_curve(obj) {
    //绘制2次贝塞尔曲线
    context.beginPath();
    context.moveTo(obj.p0_x,obj.p0_y);/*开始点*/
    context.quadraticCurveTo(obj.p1_x,obj.p1_y,obj.p2_x,obj.p2_y);/*前两个是控制点坐标xy，后两个是结束点坐标xy*/
    context.strokeStyle = "#000";
    context.stroke();
    context.closePath();
}

2. Use the Bezier second-order curve formula to calculate the coordinates of a point on the curve

We know three points, the starting point P0, the middle point (control point) P1, and the ending point P2.

The second-order curve formula is B(t) = (1-t)^2 P0 + 2(1-t)tP1+ t^2P2;

Here t is a number from 0 to 0.99, which can be incremented at intervals of 0.01

When t is 0.05, the calculation of the coordinate O(Ox, Oy) of a point on the curve is
Ox = (1-t)^2 P0x + 2(1-t)tP1x+ t^2P2x;
Oy = (1-t) ^2 P0y + 2(1-t)tP1y+ t^2P2y;

//利用贝塞尔曲线公式计算出曲线上某点坐标
function get_bezier_dot(t,obj){
    var x = (1-t)*(1-t)*obj.p0_x + 2*t*(1-t)*obj.p1_x + t*t*obj.p2_x;
    var y = (1-t)*(1-t)*obj.p0_y + 2*t*(1-t)*obj.p1_y + t*t*obj.p2_y;
    return {x:x,y:y}
}

3. The method of drawing a circle, passing in the position coordinates

function draw_ball(x,y) {
    context.beginPath();
    context.fillStyle = '#00E5EE';
    context.arc(x, y,30, 0, Math.PI * 2);
    context.fill();
    context.stroke();
    context.closePath();
}

4. Each frame of animation animation execution processdraw_frame()

(1) Pass in t, calculate the point coordinates of this curve at time t, and use the Bezier second-order formula get_bezier_dot()
(2) to draw the Bezier curve with quadraticCurveTo()
(3) The coordinate points obtained according to (1) are used to context.arc()draw the coordinates at this time. The circle is on the canvas
(4) and the coordinate text can be drawn on the picture context.fillText(text, x, y);

5. The overall motion trajectory process:

(1) Draw the content of a frame at a certain time interval setInterval()
(2) Clear the canvas and clear the canvas of the previous frame clearRect()
(3) Pass in t, calculate the coordinate O', and draw the content of this frame according to the coordinate position of O', That is, the animation process of each frame above draw_frame()
(4) at this time t increases by 0.01, when t>0.99 clearInterval()
(5) the movement is completed