Function drawFlight

src/Components/WorldMap/display.js:104–187

(ctx, projection, flight, fps)

}

function drawFlight(ctx, projection, flight, fps) {
    const base_speed = (10 + 0.001 * flight.total) * (60 / fps);
    const progress = flight.progress / flight.total;
    const ease_out = (0.8 < progress && progress < 1.0) ? (-20 * progress ** 2 + 32 * progress - 11.8) : 1.0;
    flight.progress += base_speed * ease_out;
    flight.tail_progrss += base_speed;
    const gradient_start_position = shanghai_projected;
    const flight_end_position = projection([flight.longitude, flight.latitude]);

    const gradient_1_progress = progress;
    const gradient_1_position = [
        gradient_start_position[0] + (flight_end_position[0] - gradient_start_position[0]) * gradient_1_progress,
        gradient_start_position[1] + (flight_end_position[1] - gradient_start_position[1]) * gradient_1_progress
    ];
    const gradient_0_progress = flight.tail_progrss / flight.total;
    const gradient_0_position = [
        gradient_start_position[0] + (flight_end_position[0] - gradient_start_position[0]) * gradient_0_progress,
        gradient_start_position[1] + (flight_end_position[1] - gradient_start_position[1]) * gradient_0_progress
    ];
    const linear_gradient = ctx.createLinearGradient(...gradient_0_position, ...gradient_1_position);
    linear_gradient.addColorStop(0, "rgba(255, 172, 41, 0)");
    linear_gradient.addColorStop(1, "rgba(255, 172, 41, 1)");

    // Create a mapping, [360, 0] => shanghai, [0, 0] => flight_end_position
    const coord_x = [
        (gradient_start_position[0] - flight_end_position[0]) / 360,
        (gradient_start_position[1] - flight_end_position[1]) / 360
    ];
    const coord_y = [-coord_x[1], coord_x[0]];

    function get_position([x, y]) {
        return [
            flight_end_position[0] + coord_x[0] * x + coord_y[0] * y,
            flight_end_position[1] + coord_x[1] * x + coord_y[1] * y
        ];
    }

    const control_point_1_coord = get_position([260, 40]);
    const control_point_2_coord = get_position([100, 40]);

    function get_position_slope(t) {
        const t_3_0 = (1 - t) ** 3;
        const t_3_1 = 3 * (1 - t) ** 2 * t;
        const t_3_2 = 3 * (1 - t) * t ** 2;
        const t_3_3 = t ** 3;
        const position = [
            t_3_0 * gradient_start_position[0] + t_3_1 * control_point_1_coord[0] + t_3_2 * control_point_2_coord[0] + t_3_3 * flight_end_position[0],
            t_3_0 * gradient_start_position[1] + t_3_1 * control_point_1_coord[1] + t_3_2 * control_point_2_coord[1] + t_3_3 * flight_end_position[1]
        ]
        const t_2_0 = -3 * (1 - t) ** 2;
        const t_2_1 = 3 * (1 - 4 * t + 3 * t ** 2);
        const t_2_2 = 3 * (2 * t - 3 * t ** 2);
        const t_2_3 = 3 * t ** 2;
        const direction = Math.atan2(
            -(t_2_0 * gradient_start_position[1] + t_2_1 * control_point_1_coord[1] + t_2_2 * control_point_2_coord[1] + t_2_3 * flight_end_position[1]),
            -(t_2_0 * gradient_start_position[0] + t_2_1 * control_point_1_coord[0] + t_2_2 * control_point_2_coord[0] + t_2_3 * flight_end_position[0])
        );
        return [position, direction];