example.ts

import { MathWorld, Vector2D } from "./src/main";

const world = new MathWorld("app");
const paint = world.getPaint();
paint.cartesian();

world.default();
world.setWorldTimeScale(4);

// world.enableWorldPrecisionTimeMode();
// world.setWorldPrecisionTimeFrameInFraction(0.5);
// world.setWorldPrecisionTimeFrameInMiniTimes(2000);

const COLOR_YELLOW = paint.getTailwindColor("Yellow", "500");
const COLOR_BLUE = paint.getTailwindColor("Blue");
const COLOR_SKY = paint.getTailwindColor("Sky");
const COLOR_ROSE = paint.getTailwindColor("Rose");
const COLOR_ORANGE = paint.getTailwindColor("Orange");
const COLOR_VIOLET = paint.getTailwindColor("Violet");
const COLOR_TEAL = paint.getTailwindColor("Teal");
const COLOR_LIME = paint.getTailwindColor("Lime");
const COLOR_LIME_10 = paint.getTailwindColor("Lime", "500", 2);

const A = new Vector2D(10, -11);
const B = new Vector2D(-11, 10);
let X = world.getMousePositionInCartesian();

const lineDeltaX = B.getX() - A.getX();
const lineDeltaY = B.getY() - A.getY();

world.loop(() => {
    X = world.getMousePositionInCartesian();

    const pointLineDeltaX = X.getX() - A.getX();
    const pointLineDeltaY = X.getY() - A.getY();

    // LINHA
    paint.line({ startPoint: A, endPoint: B, lineWidth: 2, strokeColor: COLOR_YELLOW });
    // LINHA ENTRE O PONTO E OS PONTOS DA LINHA
    paint.line({ startPoint: A, endPoint: X, lineWidth: 2, strokeColor: COLOR_BLUE });
    paint.line({ startPoint: B, endPoint: X, lineWidth: 2, strokeColor: COLOR_BLUE });

    // DELTA DA LINHA
    let startX = new Vector2D(B.getX(), A.getY());
    paint.line({ startPoint: startX, endPoint: A, lineWidth: 2, strokeColor: COLOR_SKY, lineDash: [10] });

    let startY = new Vector2D(B.getX(), A.getY());
    paint.line({ startPoint: startY, endPoint: B, lineWidth: 2, strokeColor: COLOR_ROSE, lineDash: [10] });

    // DELTA DO PONTO
    startX = new Vector2D(A.getX(), X.getY());
    paint.line({ startPoint: startX, endPoint: A, lineWidth: 2, strokeColor: COLOR_ORANGE, lineDash: [10] });

    startY = new Vector2D(A.getX(), X.getY());
    paint.line({ startPoint: startY, endPoint: X, lineWidth: 2, strokeColor: COLOR_VIOLET, lineDash: [10] });

    // PONTOS
    paint.point({ point: A, radius: 0.5, color: "white", borderWidth: 0, fillColor: COLOR_YELLOW, text: "A" });
    paint.text({ point: A.subtractedY(1), text: A.toString(), textSize: 18, textColor: COLOR_YELLOW });
    paint.point({ point: B, radius: 0.5, color: "white", borderWidth: 0, fillColor: COLOR_YELLOW, text: "B" });
    paint.text({ point: B.subtractedY(1), text: B.toString(), textSize: 18, textColor: COLOR_YELLOW });
    paint.point({ point: X, radius: 0.5, color: "white", text: "X", fillColor: COLOR_BLUE, borderWidth: 0 });
    paint.text({ point: X.addedY(1), text: X.toString(), textSize: 18, textColor: COLOR_BLUE });

    let shortPoint = A;

    const lineDirectionMagnitudeSquared = lineDeltaX * lineDeltaX + lineDeltaY * lineDeltaY;
    const projectionDotProduct = pointLineDeltaX * lineDeltaX + pointLineDeltaY * lineDeltaY;
    const param = projectionDotProduct / lineDirectionMagnitudeSquared;
    if (param < 0) shortPoint = A;
    if (param > 1) shortPoint = B;
    if (param >= 0 && param <= 1) shortPoint = new Vector2D(A.getX() + param * lineDeltaX, A.getY() + param * lineDeltaY);

    paint.point({ point: shortPoint, radius: 0.5, color: "white", borderWidth: 0, fillColor: paint.getTailwindColor("Teal"), text: "" });
    paint.line({ startPoint: shortPoint, endPoint: X, lineWidth: 2, strokeColor: COLOR_TEAL, lineDash: [10] });
    paint.text({ point: shortPoint.subtractedY(1), text: shortPoint.toString(), textSize: 18, textColor: COLOR_TEAL });

    // packman
    paint.circle({ point: { x: 0, y: 0 }, radius: 10, strokeColor: COLOR_LIME, fillColor: COLOR_LIME_10, startAngleForHumans: 45, endAngleForHumans: -45 });
});

world.start();

(() => {
    (document.getElementById("start") as HTMLButtonElement).addEventListener("click", () => world.start());
    (document.getElementById("play") as HTMLButtonElement).addEventListener("click", () => world.play());
    (document.getElementById("pause") as HTMLButtonElement).addEventListener("click", () => world.pause());
    (document.getElementById("reset") as HTMLButtonElement).addEventListener("click", () => world.reset());
    (document.getElementById("stop") as HTMLButtonElement).addEventListener("click", () => world.stop());

    (document.getElementById("back-time") as HTMLButtonElement).addEventListener("click", () => world.backWoldTime());
    (document.getElementById("back-frame") as HTMLButtonElement).addEventListener("click", () => world.backFrameWorldTime());
})();