Source: curves.ts

// three point bezier curve class

import { Shapes } from "./shapes";
import { Vector } from "./vector";

/**
 * @class BezierCurve
 * @description A three point bezier curve class
 * @param {Vector} p0 - first point
 * @param {Vector} p1 - second point
 * @param {Vector} p2 - third point
 */

export class BezierCurve {
    public p0: Vector
    public p1: Vector
    public p2: Vector

    constructor(p0: Vector, p1: Vector, p2: Vector) {
        this.p0 = p0;
        this.p1 = p1;
        this.p2 = p2;
    }
    /**
     * @function getPoint
     * @param {number} t the time value between 0 and 1
     * @returns {Vector} the point at the time value
     * @memberof BezierCurve
     */
    public getPoint(t: number): Vector {
        const x = (1 - t) * (1 - t) * this.p0.x + 2 * t * (1 - t) * this.p1.x + t * t * this.p2.x;
        const y = (1 - t) * (1 - t) * this.p0.y + 2 * t * (1 - t) * this.p1.y + t * t * this.p2.y;
        return new Vector(x, y);
    }

    /**
     * @function draw
     * @description The function that draws the bezier curve on the canvas in every frame
     * @memberof BezierCurve
     */
    public draw() {
        var Shape = new Shapes();

        Shape.drawLine(this.p0, this.p1);
        Shape.drawLine(this.p1, this.p2);
        for (let t = 0; t <= 1; t += 0.001) {
            Shape.drawPoint(this.getPoint(t), 1);
        }
    }
}


// Cubic Bezier Curve class
/**
 * @class CubicBezierCurve
 * @description A cubic bezier curve class
 * @param {Vector} p0 - first point
 * @param {Vector} p1 - second point
 * @param {Vector} p2 - third point
 * @param {Vector} p3 - fourth point
 * 
 */
export class CubicBezierCurve {
    public p0: Vector
    public p1: Vector
    public p2: Vector
    public p3: Vector

    constructor(p0: Vector, p1: Vector, p2: Vector, p3: Vector) {
        this.p0 = p0;
        this.p1 = p1;
        this.p2 = p2;
        this.p3 = p3;
    }

    /**
     * @function getPoint
     * @param {number} t the time value between 0 and 1
     * @returns {Vector} the point at the time value
     * @memberof CubicBezierCurve
     */
    public getPoint(t: number): Vector {
        const x = (1 - t) * (1 - t) * (1 - t) * this.p0.x + 3 * t * (1 - t) * (1 - t) * this.p1.x + 3 * t * t * (1 - t) * this.p2.x + t * t * t * this.p3.x;
        const y = (1 - t) * (1 - t) * (1 - t) * this.p0.y + 3 * t * (1 - t) * (1 - t) * this.p1.y + 3 * t * t * (1 - t) * this.p2.y + t * t * t * this.p3.y;
        return new Vector(x, y);
    }

    /**
     * @function draw
     * The function that draws the bezier curve on the canvas in every frame
     * @memberof CubicBezierCurve
     */
    public draw() {
        var Shape = new Shapes();

        Shape.drawLine(this.p0, this.p1);
        Shape.drawLine(this.p1, this.p2);
        Shape.drawLine(this.p2, this.p3);


        for (let t = 0; t <= 1; t += 0.001) {
            Shape.drawPoint(this.getPoint(t), 1);
        }
    }
}

// beziere curve for any number of points
/**
 * @deprecated
 * @class BezierCurveForPoints
 * @description A bezier curve class
 * @param {Vector[]} points - an array of points
 * 
 */
export class BezierCurveForPoints {
    public points: Vector[]
    constructor(points: Vector[]) {
        this.points = points;
    }
    /**
     * @function getPoint
     * @param {number} t the time value between 0 and 1
     * @returns {Vector}
     * @memberof BezierCurveForPoints
     */
    public getPoint(t: number): Vector {
        let x = 0;
        let y = 0;
        for (let i = 0; i < this.points.length; i++) {
            x += this.points[i].x * Math.pow((1 - t), this.points.length - 1 - i) * Math.pow(t, i);
            y += this.points[i].y * Math.pow((1 - t), this.points.length - 1 - i) * Math.pow(t, i);
        }
        return new Vector(x, y);
    }

    /**
     * @function draw
     * The function that draws the bezier curve on the canvas in every frame
     * @memberof BezierCurveForPoints
     */
    public draw() {
        var Shape = new Shapes();
        var increament = this.points[0].distanceTo(this.points[this.points.length - 1]) / 40000;
        for (let t = 0; t <= 1; t += increament) {
            Shape.drawPoint(this.getPoint(t), 1);
        }
    }
}