@redwilly/anima 0.1.0

package/dist/mobjects/VGroup/layout.js

@@ -0,0 +1,139 @@
+import { Matrix3x3 } from '../../core/math/matrix/Matrix3x3';
+import { Camera } from '../../core/camera';
+/** Default camera for layout functions when none is provided. */
+const defaultCamera = new Camera();
+/** Centers a VGroup's bounding box at the origin (0, 0). */
+export function centerGroup(group) {
+    const bounds = group.getBoundingBox();
+    const centerX = (bounds.minX + bounds.maxX) / 2;
+    const centerY = (bounds.minY + bounds.maxY) / 2;
+    const translation = Matrix3x3.translation(-centerX, -centerY);
+    // Apply translation to all children directly (not to group)
+    for (const child of group.getChildren()) {
+        child.applyMatrix(translation);
+    }
+    return group;
+}
+/**
+ * Moves a VGroup's bounding box to a corner of the frame.
+ * @param group The VGroup to position
+ * @param corner Which corner to move to
+ * @param buff Buffer/margin from the corner
+ * @param camera Camera providing frame dimensions (defaults to 1920x1080)
+ */
+export function toCorner(group, corner, buff = 0.0, camera = defaultCamera) {
+    const bounds = group.getBoundingBox();
+    const width = bounds.maxX - bounds.minX;
+    const height = bounds.maxY - bounds.minY;
+    const frameXRadius = camera.frameXRadius;
+    const frameYRadius = camera.frameYRadius;
+    let targetX = 0;
+    let targetY = 0;
+    switch (corner) {
+        case 'TOP_LEFT':
+            targetX = -frameXRadius + width / 2 + buff;
+            targetY = -frameYRadius + height / 2 + buff;
+            break;
+        case 'TOP_RIGHT':
+            targetX = frameXRadius - width / 2 - buff;
+            targetY = -frameYRadius + height / 2 + buff;
+            break;
+        case 'BOTTOM_LEFT':
+            targetX = -frameXRadius + width / 2 + buff;
+            targetY = frameYRadius - height / 2 - buff;
+            break;
+        case 'BOTTOM_RIGHT':
+            targetX = frameXRadius - width / 2 - buff;
+            targetY = frameYRadius - height / 2 - buff;
+            break;
+    }
+    const currentCenterX = (bounds.minX + bounds.maxX) / 2;
+    const currentCenterY = (bounds.minY + bounds.maxY) / 2;
+    const shiftX = targetX - currentCenterX;
+    const shiftY = targetY - currentCenterY;
+    const translation = Matrix3x3.translation(shiftX, shiftY);
+    // Apply translation to all children directly
+    for (const child of group.getChildren()) {
+        child.applyMatrix(translation);
+    }
+    return group;
+}
+/** Arranges children in a line along the specified direction. */
+export function arrangeChildren(group, direction = 'RIGHT', buff = 0.25, shouldCenter = true) {
+    const children = group.getChildren();
+    if (children.length === 0)
+        return group;
+    let previousChild = children[0];
+    for (let i = 1; i < children.length; i++) {
+        const child = children[i];
+        const prevBounds = previousChild.getBoundingBox();
+        const childBounds = child.getBoundingBox();
+        let shiftX = 0;
+        let shiftY = 0;
+        if (direction === 'RIGHT') {
+            const targetLeft = prevBounds.maxX + buff;
+            const currentLeft = childBounds.minX;
+            shiftX = targetLeft - currentLeft;
+            const prevCenterY = (prevBounds.minY + prevBounds.maxY) / 2;
+            const childCenterY = (childBounds.minY + childBounds.maxY) / 2;
+            shiftY = prevCenterY - childCenterY;
+        }
+        else if (direction === 'LEFT') {
+            const targetRight = prevBounds.minX - buff;
+            const currentRight = childBounds.maxX;
+            shiftX = targetRight - currentRight;
+            const prevCenterY = (prevBounds.minY + prevBounds.maxY) / 2;
+            const childCenterY = (childBounds.minY + childBounds.maxY) / 2;
+            shiftY = prevCenterY - childCenterY;
+        }
+        else if (direction === 'DOWN') {
+            const targetTop = prevBounds.maxY + buff;
+            const currentTop = childBounds.minY;
+            shiftY = targetTop - currentTop;
+            const prevCenterX = (prevBounds.minX + prevBounds.maxX) / 2;
+            const childCenterX = (childBounds.minX + childBounds.maxX) / 2;
+            shiftX = prevCenterX - childCenterX;
+        }
+        else if (direction === 'UP') {
+            const targetBottom = prevBounds.minY - buff;
+            const currentBottom = childBounds.maxY;
+            shiftY = targetBottom - currentBottom;
+            const prevCenterX = (prevBounds.minX + prevBounds.maxX) / 2;
+            const childCenterX = (childBounds.minX + childBounds.maxX) / 2;
+            shiftX = prevCenterX - childCenterX;
+        }
+        child.applyMatrix(Matrix3x3.translation(shiftX, shiftY));
+        previousChild = child;
+    }
+    if (shouldCenter) {
+        centerGroup(group);
+    }
+    return group;
+}
+/** Aligns a VGroup to a target VMobject's edge. */
+export function alignToTarget(group, target, edge) {
+    const targetBounds = target.getBoundingBox();
+    const myBounds = group.getBoundingBox();
+    let shiftX = 0;
+    let shiftY = 0;
+    switch (edge) {
+        case 'TOP':
+            shiftY = targetBounds.minY - myBounds.minY;
+            break;
+        case 'BOTTOM':
+            shiftY = targetBounds.maxY - myBounds.maxY;
+            break;
+        case 'LEFT':
+            shiftX = targetBounds.minX - myBounds.minX;
+            break;
+        case 'RIGHT':
+            shiftX = targetBounds.maxX - myBounds.maxX;
+            break;
+    }
+    const translation = Matrix3x3.translation(shiftX, shiftY);
+    // Apply translation to all children directly
+    for (const child of group.getChildren()) {
+        child.applyMatrix(translation);
+    }
+    return group;
+}

package/dist/mobjects/VMobject.d.ts

@@ -0,0 +1,106 @@
+import { Mobject } from './Mobject';
+import type { Animation } from '../core/animations/Animation';
+import { BezierPath } from '../core/math/bezier/BezierPath';
+import type { PathCommand } from '../core/math/bezier/types';
+import { Color } from '../core/math/color/Color';
+/**
+ * A Mobject that is defined by one or more BezierPaths.
+ * Supports stroke and fill styling, plus VMobject-specific fluent animations.
+ *
+ * Default behavior: visible with white stroke, no fill.
+ * - Stroke: white, width 2 (visible by default)
+ * - Fill: not rendered by default (fillOpacity = 0)
+ *
+ * When .fill(color) is called, the default stroke is disabled unless
+ * .stroke(color, width) was called explicitly.
+ *
+ * Use .stroke(color, width) to add a stroke.
+ * Use .fill(color) to add a fill (opacity defaults to 1).
+ */
+export declare class VMobject extends Mobject {
+    protected pathList: BezierPath[];
+    /** Stroke color. Only rendered if strokeWidth > 0. */
+    protected strokeColor: Color;
+    /** Stroke width. Default 2 for visibility. */
+    protected strokeWidth: number;
+    /** Fill color. Only rendered if fillOpacity > 0. */
+    protected fillColor: Color;
+    /** Fill opacity. Default 0 means no fill is rendered. */
+    protected fillOpacity: number;
+    /** Tracks whether stroke() was explicitly called. */
+    protected strokeExplicitlySet: boolean;
+    constructor();
+    get paths(): BezierPath[];
+    set paths(value: BezierPath[]);
+    /**
+     * Gets the stroke color.
+     */
+    getStrokeColor(): Color;
+    /**
+     * Gets the stroke width.
+     */
+    getStrokeWidth(): number;
+    /**
+     * Gets the fill color.
+     */
+    getFillColor(): Color;
+    /**
+     * Gets the fill opacity.
+     */
+    getFillOpacity(): number;
+    /**
+     * Adds a new path to the VMobject.
+     * @param path - The BezierPath to add.
+     * @returns this for chaining.
+     */
+    addPath(path: BezierPath): this;
+    /**
+     * Sets the stroke color and width.
+     * @param color - The stroke color.
+     * @param width - The stroke width. Default is 2.
+     * @returns this for chaining.
+     */
+    stroke(color: Color, width?: number): this;
+    /**
+     * Sets the fill color and opacity.
+     * If stroke was not explicitly set, the default stroke is disabled.
+     * @param color - The fill color.
+     * @param opacity - The fill opacity. Defaults to the color's alpha value.
+     * @returns this for chaining.
+     */
+    fill(color: Color, opacity?: number): this;
+    getPoints(): PathCommand[];
+    setPoints(commands: PathCommand[]): this;
+    private getPointsAsVectors;
+    getBoundingBox(): {
+        minX: number;
+        maxX: number;
+        minY: number;
+        maxY: number;
+    };
+    /**
+     * Progressively draws the VMobject's paths from start to end.
+     * Preserves fill throughout the animation.
+     * @param durationSeconds - Animation duration in seconds.
+     * @returns this for chaining.
+     */
+    write(durationSeconds?: number): this & {
+        toAnimation(): Animation<Mobject>;
+    };
+    /**
+     * Progressively removes the VMobject's paths (reverse of write).
+     * @param durationSeconds - Animation duration in seconds.
+     * @returns this for chaining.
+     */
+    unwrite(durationSeconds?: number): this & {
+        toAnimation(): Animation<Mobject>;
+    };
+    /**
+     * First draws the stroke progressively (0-50%), then fades in the fill (50-100%).
+     * @param durationSeconds - Animation duration in seconds.
+     * @returns this for chaining.
+     */
+    draw(durationSeconds?: number): this & {
+        toAnimation(): Animation<Mobject>;
+    };
+}

package/dist/mobjects/VMobject.js

@@ -0,0 +1,216 @@
+import { Mobject } from './Mobject';
+import { BezierPath } from '../core/math/bezier/BezierPath';
+import { Color } from '../core/math/color/Color';
+import { Write, Unwrite, Draw } from '../core/animations/draw';
+/**
+ * A Mobject that is defined by one or more BezierPaths.
+ * Supports stroke and fill styling, plus VMobject-specific fluent animations.
+ *
+ * Default behavior: visible with white stroke, no fill.
+ * - Stroke: white, width 2 (visible by default)
+ * - Fill: not rendered by default (fillOpacity = 0)
+ *
+ * When .fill(color) is called, the default stroke is disabled unless
+ * .stroke(color, width) was called explicitly.
+ *
+ * Use .stroke(color, width) to add a stroke.
+ * Use .fill(color) to add a fill (opacity defaults to 1).
+ */
+export class VMobject extends Mobject {
+    pathList = [];
+    /** Stroke color. Only rendered if strokeWidth > 0. */
+    strokeColor = Color.WHITE;
+    /** Stroke width. Default 2 for visibility. */
+    strokeWidth = 2;
+    /** Fill color. Only rendered if fillOpacity > 0. */
+    fillColor = Color.TRANSPARENT;
+    /** Fill opacity. Default 0 means no fill is rendered. */
+    fillOpacity = 0;
+    /** Tracks whether stroke() was explicitly called. */
+    strokeExplicitlySet = false;
+    constructor() {
+        super();
+    }
+    get paths() {
+        return this.pathList;
+    }
+    set paths(value) {
+        this.pathList = value;
+    }
+    /**
+     * Gets the stroke color.
+     */
+    getStrokeColor() {
+        return this.strokeColor;
+    }
+    /**
+     * Gets the stroke width.
+     */
+    getStrokeWidth() {
+        return this.strokeWidth;
+    }
+    /**
+     * Gets the fill color.
+     */
+    getFillColor() {
+        return this.fillColor;
+    }
+    /**
+     * Gets the fill opacity.
+     */
+    getFillOpacity() {
+        return this.fillOpacity;
+    }
+    /**
+     * Adds a new path to the VMobject.
+     * @param path - The BezierPath to add.
+     * @returns this for chaining.
+     */
+    addPath(path) {
+        this.pathList.push(path);
+        return this;
+    }
+    /**
+     * Sets the stroke color and width.
+     * @param color - The stroke color.
+     * @param width - The stroke width. Default is 2.
+     * @returns this for chaining.
+     */
+    stroke(color, width = 2) {
+        this.strokeColor = color;
+        this.strokeWidth = width;
+        this.strokeExplicitlySet = true;
+        return this;
+    }
+    /**
+     * Sets the fill color and opacity.
+     * If stroke was not explicitly set, the default stroke is disabled.
+     * @param color - The fill color.
+     * @param opacity - The fill opacity. Defaults to the color's alpha value.
+     * @returns this for chaining.
+     */
+    fill(color, opacity) {
+        this.fillColor = color;
+        this.fillOpacity = opacity ?? color.a;
+        // Disable default stroke when fill is set (unless stroke was explicitly set)
+        if (!this.strokeExplicitlySet) {
+            this.strokeWidth = 0;
+        }
+        return this;
+    }
+    getPoints() {
+        const commands = [];
+        for (const path of this.pathList) {
+            commands.push(...path.getCommands());
+        }
+        return commands;
+    }
+    setPoints(commands) {
+        if (commands.length === 0) {
+            this.pathList = [];
+            return this;
+        }
+        const path = new BezierPath();
+        for (const cmd of commands) {
+            switch (cmd.type) {
+                case 'Move':
+                    path.moveTo(cmd.end);
+                    break;
+                case 'Line':
+                    path.lineTo(cmd.end);
+                    break;
+                case 'Quadratic':
+                    if (cmd.control1) {
+                        path.quadraticTo(cmd.control1, cmd.end);
+                    }
+                    break;
+                case 'Cubic':
+                    if (cmd.control1 && cmd.control2) {
+                        path.cubicTo(cmd.control1, cmd.control2, cmd.end);
+                    }
+                    break;
+                case 'Close':
+                    path.closePath();
+                    break;
+            }
+        }
+        this.pathList = [path];
+        return this;
+    }
+    getPointsAsVectors() {
+        const points = [];
+        for (const cmd of this.getPoints()) {
+            if (cmd.control1)
+                points.push(cmd.control1);
+            if (cmd.control2)
+                points.push(cmd.control2);
+            points.push(cmd.end);
+        }
+        return points;
+    }
+    getBoundingBox() {
+        const points = this.getPointsAsVectors();
+        const worldMatrix = this.getWorldMatrix();
+        if (points.length === 0) {
+            const pos = this.position;
+            return { minX: pos.x, maxX: pos.x, minY: pos.y, maxY: pos.y };
+        }
+        let minX = Infinity;
+        let maxX = -Infinity;
+        let minY = Infinity;
+        let maxY = -Infinity;
+        for (const point of points) {
+            const transformed = worldMatrix.transformPoint(point);
+            if (transformed.x < minX)
+                minX = transformed.x;
+            if (transformed.x > maxX)
+                maxX = transformed.x;
+            if (transformed.y < minY)
+                minY = transformed.y;
+            if (transformed.y > maxY)
+                maxY = transformed.y;
+        }
+        return { minX, maxX, minY, maxY };
+    }
+    // ========== VMobject-Specific Fluent Animation API ==========
+    /**
+     * Progressively draws the VMobject's paths from start to end.
+     * Preserves fill throughout the animation.
+     * @param durationSeconds - Animation duration in seconds.
+     * @returns this for chaining.
+     */
+    write(durationSeconds) {
+        const animation = new Write(this);
+        if (durationSeconds !== undefined) {
+            animation.duration(durationSeconds);
+        }
+        this.getQueue().enqueueAnimation(animation);
+        return this;
+    }
+    /**
+     * Progressively removes the VMobject's paths (reverse of write).
+     * @param durationSeconds - Animation duration in seconds.
+     * @returns this for chaining.
+     */
+    unwrite(durationSeconds) {
+        const animation = new Unwrite(this);
+        if (durationSeconds !== undefined) {
+            animation.duration(durationSeconds);
+        }
+        this.getQueue().enqueueAnimation(animation);
+        return this;
+    }
+    /**
+     * First draws the stroke progressively (0-50%), then fades in the fill (50-100%).
+     * @param durationSeconds - Animation duration in seconds.
+     * @returns this for chaining.
+     */
+    draw(durationSeconds) {
+        const animation = new Draw(this);
+        if (durationSeconds !== undefined) {
+            animation.duration(durationSeconds);
+        }
+        this.getQueue().enqueueAnimation(animation);
+        return this;
+    }
+}

package/dist/mobjects/geometry/Arc.d.ts

@@ -0,0 +1,8 @@
+import { VMobject } from '../VMobject';
+export declare class Arc extends VMobject {
+    readonly radius: number;
+    readonly startAngle: number;
+    readonly endAngle: number;
+    constructor(radius?: number, startAngle?: number, endAngle?: number);
+    private generatePath;
+}

package/dist/mobjects/geometry/Arc.js

@@ -0,0 +1,46 @@
+import { VMobject } from '../VMobject';
+import { BezierPath } from '../../core/math/bezier/BezierPath';
+import { Vector2 } from '../../core/math/Vector2/Vector2';
+export class Arc extends VMobject {
+    radius;
+    startAngle;
+    endAngle;
+    constructor(radius = 1.0, startAngle = 0, endAngle = Math.PI / 2) {
+        super();
+        this.radius = radius;
+        this.startAngle = startAngle;
+        this.endAngle = endAngle;
+        this.generatePath();
+    }
+    generatePath() {
+        const path = new BezierPath();
+        const sweepAngle = this.endAngle - this.startAngle;
+        const absSweep = Math.abs(sweepAngle);
+        // Split into segments of at most 90 degrees to maintain accuracy
+        const maxSegmentAngle = Math.PI / 2;
+        const numSegments = Math.max(1, Math.ceil(absSweep / maxSegmentAngle));
+        const stepAngle = sweepAngle / numSegments;
+        // k = (4/3) * tan(theta/4)
+        const k = (4 / 3) * Math.tan(stepAngle / 4);
+        let currentAngle = this.startAngle;
+        // Start point
+        const startX = this.radius * Math.cos(currentAngle);
+        const startY = this.radius * Math.sin(currentAngle);
+        path.moveTo(new Vector2(startX, startY));
+        for (let i = 0; i < numSegments; i++) {
+            const alpha = currentAngle;
+            const nextAngle = currentAngle + stepAngle;
+            // P3 is next point
+            const p3 = new Vector2(this.radius * Math.cos(nextAngle), this.radius * Math.sin(nextAngle));
+            // Control points
+            // P1 = P0 + tangent(alpha) * R * k
+            // Tangent vector rotated 90 deg from radius: (-sin, cos)
+            const cp1 = new Vector2(this.radius * Math.cos(alpha), this.radius * Math.sin(alpha)).add(new Vector2(-Math.sin(alpha), Math.cos(alpha)).multiply(this.radius * k));
+            // P2 = P3 - tangent(nextAngle) * R * k
+            const cp2 = p3.subtract(new Vector2(-Math.sin(nextAngle), Math.cos(nextAngle)).multiply(this.radius * k));
+            path.cubicTo(cp1, cp2, p3);
+            currentAngle += stepAngle;
+        }
+        this.pathList = [path];
+    }
+}

package/dist/mobjects/geometry/Arrow.d.ts

@@ -0,0 +1,7 @@
+import { Line } from './Line';
+export declare class Arrow extends Line {
+    readonly tipLength: number;
+    readonly tipAngle: number;
+    constructor(x1?: number, y1?: number, x2?: number, y2?: number, tipLength?: number, tipAngle?: number);
+    private addTip;
+}

package/dist/mobjects/geometry/Arrow.js

@@ -0,0 +1,34 @@
+import { Line } from './Line';
+import { Vector2 } from '../../core/math/Vector2/Vector2';
+import { BezierPath } from '../../core/math/bezier/BezierPath';
+export class Arrow extends Line {
+    tipLength;
+    tipAngle;
+    constructor(x1 = 0, y1 = 0, x2 = 1, y2 = 0, tipLength = 0.25, tipAngle = Math.PI / 6) {
+        super(x1, y1, x2, y2);
+        this.tipLength = tipLength;
+        this.tipAngle = tipAngle;
+        this.addTip();
+    }
+    addTip() {
+        const direction = this.end.subtract(this.start);
+        if (direction.length() === 0)
+            return;
+        const normalizedDir = direction.normalize();
+        const angle = Math.atan2(normalizedDir.y, normalizedDir.x);
+        // Calculate tip vertices
+        // The tip points backwards from the end
+        const angle1 = angle + Math.PI - this.tipAngle;
+        const angle2 = angle + Math.PI + this.tipAngle;
+        const p1 = this.end.add(new Vector2(Math.cos(angle1), Math.sin(angle1)).multiply(this.tipLength));
+        const p2 = this.end.add(new Vector2(Math.cos(angle2), Math.sin(angle2)).multiply(this.tipLength));
+        const tipPath = new BezierPath();
+        tipPath.moveTo(this.end);
+        tipPath.lineTo(p1);
+        tipPath.lineTo(p2);
+        tipPath.closePath();
+        this.addPath(tipPath);
+        // Ensure the tip is filled
+        this.fillOpacity = 1;
+    }
+}

package/dist/mobjects/geometry/Circle.d.ts

@@ -0,0 +1,4 @@
+import { Arc } from './Arc';
+export declare class Circle extends Arc {
+    constructor(radius?: number);
+}

package/dist/mobjects/geometry/Circle.js

@@ -0,0 +1,10 @@
+import { Arc } from './Arc';
+export class Circle extends Arc {
+    constructor(radius = 1.0) {
+        super(radius, 0, Math.PI * 2);
+        // Ensure path is closed for a full circle
+        if (this.pathList.length > 0) {
+            this.pathList[0].closePath();
+        }
+    }
+}

package/dist/mobjects/geometry/Line.d.ts

@@ -0,0 +1,8 @@
+import { VMobject } from '../VMobject';
+import { Vector2 } from '../../core/math/Vector2/Vector2';
+export declare class Line extends VMobject {
+    readonly start: Vector2;
+    readonly end: Vector2;
+    constructor(x1?: number, y1?: number, x2?: number, y2?: number);
+    private generatePath;
+}

package/dist/mobjects/geometry/Line.js

@@ -0,0 +1,19 @@
+import { VMobject } from '../VMobject';
+import { BezierPath } from '../../core/math/bezier/BezierPath';
+import { Vector2 } from '../../core/math/Vector2/Vector2';
+export class Line extends VMobject {
+    start;
+    end;
+    constructor(x1 = 0, y1 = 0, x2 = 1, y2 = 0) {
+        super();
+        this.start = new Vector2(x1, y1);
+        this.end = new Vector2(x2, y2);
+        this.generatePath();
+    }
+    generatePath() {
+        const path = new BezierPath();
+        path.moveTo(this.start);
+        path.lineTo(this.end);
+        this.pathList = [path];
+    }
+}

package/dist/mobjects/geometry/Point.d.ts

@@ -0,0 +1,5 @@
+import { Circle } from './Circle';
+import { Vector2 } from '../../core/math/Vector2/Vector2';
+export declare class Point extends Circle {
+    constructor(location?: Vector2);
+}

package/dist/mobjects/geometry/Point.js

@@ -0,0 +1,11 @@
+import { Circle } from './Circle';
+import { Vector2 } from '../../core/math/Vector2/Vector2';
+import { Color } from '../../core/math/color/Color';
+export class Point extends Circle {
+    constructor(location = Vector2.ZERO) {
+        super(0.05); // Small radius
+        this.fill(Color.WHITE, 1.0);
+        this.stroke(Color.WHITE, 0); // No stroke usually for points, or just fill
+        this.pos(location.x, location.y);
+    }
+}

package/dist/mobjects/geometry/Polygon.d.ts

@@ -0,0 +1,7 @@
+import { VMobject } from '../VMobject';
+import { Vector2 } from '../../core/math/Vector2/Vector2';
+export declare class Polygon extends VMobject {
+    readonly vertices: Vector2[];
+    constructor(vertices: Vector2[]);
+    private generatePath;
+}

package/dist/mobjects/geometry/Polygon.js

@@ -0,0 +1,21 @@
+import { VMobject } from '../VMobject';
+import { BezierPath } from '../../core/math/bezier/BezierPath';
+export class Polygon extends VMobject {
+    vertices;
+    constructor(vertices) {
+        super();
+        this.vertices = vertices;
+        this.generatePath();
+    }
+    generatePath() {
+        if (this.vertices.length === 0)
+            return;
+        const path = new BezierPath();
+        path.moveTo(this.vertices[0]);
+        for (let i = 1; i < this.vertices.length; i++) {
+            path.lineTo(this.vertices[i]);
+        }
+        path.closePath();
+        this.pathList = [path];
+    }
+}

package/dist/mobjects/geometry/Rectangle.d.ts

@@ -0,0 +1,6 @@
+import { Polygon } from './Polygon';
+export declare class Rectangle extends Polygon {
+    readonly width: number;
+    readonly height: number;
+    constructor(width?: number, height?: number);
+}

package/dist/mobjects/geometry/Rectangle.js

@@ -0,0 +1,18 @@
+import { Polygon } from './Polygon';
+import { Vector2 } from '../../core/math/Vector2/Vector2';
+export class Rectangle extends Polygon {
+    width;
+    height;
+    constructor(width = 2.0, height = 1.0) {
+        const halfW = width / 2;
+        const halfH = height / 2;
+        super([
+            new Vector2(-halfW, -halfH), // Top-Left
+            new Vector2(halfW, -halfH), // Top-Right
+            new Vector2(halfW, halfH), // Bottom-Right
+            new Vector2(-halfW, halfH) // Bottom-Left
+        ]);
+        this.width = width;
+        this.height = height;
+    }
+}