manim-web 0.2.0

package/dist/mobjects/point/index.d.ts

@@ -0,0 +1,707 @@
+import { Mobject, Vector3Tuple } from '../../core/Mobject';
+/**
+ * Point-based mobjects rendered as particles using THREE.js Points.
+ * Unlike VMobjects which render connected paths, PMobjects render
+ * discrete points as particles for efficient visualization.
+ */
+import * as THREE from 'three';
+/**
+ * A single point with position, color, and opacity.
+ */
+export interface PointData {
+    /** Position [x, y, z] */
+    position: Vector3Tuple;
+    /** Color as CSS color string */
+    color?: string;
+    /** Opacity from 0 to 1 */
+    opacity?: number;
+}
+/**
+ * Options for creating a PMobject
+ */
+export interface PMobjectOptions {
+    /** Initial points to add */
+    points?: PointData[];
+    /** Default color for points. Default: white (#FFFFFF) */
+    color?: string;
+    /** Default opacity for points. Default: 1 */
+    opacity?: number;
+    /** Size of each point in pixels. Default: 10 */
+    pointSize?: number;
+}
+/**
+ * PMobject - Point-based mobject (not vector-based like VMobject)
+ *
+ * A collection of points rendered as particles using THREE.js Points
+ * and PointsMaterial. Each point has position, color, and opacity.
+ * Points are not connected like VMobject paths.
+ *
+ * @example
+ * ```typescript
+ * // Create a PMobject with some points
+ * const points = new PMobject({
+ *   points: [
+ *     { position: [0, 0, 0] },
+ *     { position: [1, 0, 0], color: '#ff0000' },
+ *     { position: [0, 1, 0], color: '#00ff00', opacity: 0.5 },
+ *   ],
+ *   pointSize: 15,
+ * });
+ * ```
+ */
+export declare class PMobject extends Mobject {
+    /** Internal point data storage */
+    protected _points: PointData[];
+    /** Point size in pixels */
+    protected _pointSize: number;
+    /** THREE.js geometry for points */
+    protected _geometry: THREE.BufferGeometry | null;
+    /** THREE.js material for points */
+    protected _material: THREE.PointsMaterial | null;
+    constructor(options?: PMobjectOptions);
+    /**
+     * Add a single point to the mobject
+     * @param point - Point data with position and optional color/opacity
+     * @returns this for chaining
+     */
+    addPoint(point: PointData): this;
+    /**
+     * Add multiple points to the mobject
+     * @param points - Array of point data
+     * @returns this for chaining
+     */
+    addPoints(points: PointData[]): this;
+    /**
+     * Remove a point by index
+     * @param index - Index of point to remove
+     * @returns this for chaining
+     */
+    removePoint(index: number): this;
+    /**
+     * Clear all points
+     * @returns this for chaining
+     */
+    clearPoints(): this;
+    /**
+     * Get all points
+     * @returns Copy of the points array
+     */
+    getPoints(): PointData[];
+    /**
+     * Get the number of points
+     */
+    get numPoints(): number;
+    /**
+     * Set the point size
+     * @param size - Size in pixels
+     * @returns this for chaining
+     */
+    setPointSize(size: number): this;
+    /**
+     * Get the point size
+     */
+    getPointSize(): number;
+    /**
+     * Set the color of all points
+     * @param color - CSS color string
+     * @returns this for chaining
+     */
+    setColor(color: string): this;
+    /**
+     * Set the opacity of all points
+     * @param opacity - Opacity value (0-1)
+     * @returns this for chaining
+     */
+    setOpacity(opacity: number): this;
+    /**
+     * Get the center of all points
+     * @returns Center position as [x, y, z]
+     */
+    getCenter(): Vector3Tuple;
+    /**
+     * Shift all points by a delta
+     * @param delta - Translation vector [x, y, z]
+     * @returns this for chaining
+     */
+    shift(delta: Vector3Tuple): this;
+    /**
+     * Create the Three.js backing object
+     */
+    protected _createThreeObject(): THREE.Object3D;
+    /**
+     * Update or create the geometry from points
+     */
+    protected _updateGeometry(): void;
+    /**
+     * Update or create the material
+     */
+    protected _updateMaterial(): void;
+    /**
+     * Sync material properties to Three.js
+     */
+    protected _syncMaterialToThree(): void;
+    /**
+     * Create a copy of this PMobject
+     */
+    protected _createCopy(): PMobject;
+    /**
+     * Clean up Three.js resources
+     */
+    dispose(): void;
+}
+/**
+ * Options for creating a PGroup
+ */
+export interface PGroupOptions {
+    /** Initial PMobjects to add */
+    pmobjects?: PMobject[];
+}
+/**
+ * PGroup - Group of PMobjects
+ *
+ * Similar to Group but specifically for PMobjects. Operations
+ * applied to the group cascade to all children.
+ *
+ * @example
+ * ```typescript
+ * const p1 = new PMobject({ points: [{ position: [0, 0, 0] }] });
+ * const p2 = new PMobject({ points: [{ position: [1, 1, 0] }] });
+ * const group = new PGroup({ pmobjects: [p1, p2] });
+ *
+ * // Move all PMobjects
+ * group.shift([1, 0, 0]);
+ * ```
+ */
+export declare class PGroup extends Mobject {
+    constructor(options?: PGroupOptions);
+    /**
+     * Add a PMobject to this group
+     * @param pmobject - PMobject to add
+     * @returns this for chaining
+     */
+    addPMobject(pmobject: PMobject): this;
+    /**
+     * Add multiple PMobjects to this group
+     * @param pmobjects - PMobjects to add
+     * @returns this for chaining
+     */
+    addPMobjects(...pmobjects: PMobject[]): this;
+    /**
+     * Remove a PMobject from this group
+     * @param pmobject - PMobject to remove
+     * @returns this for chaining
+     */
+    removePMobject(pmobject: PMobject): this;
+    /**
+     * Get the center of the group
+     * @returns Center position as [x, y, z]
+     */
+    getCenter(): Vector3Tuple;
+    /**
+     * Shift all children by the given delta
+     * @param delta - Translation vector [x, y, z]
+     * @returns this for chaining
+     */
+    shift(delta: Vector3Tuple): this;
+    /**
+     * Move the group center to the given point
+     * @param point - Target position [x, y, z]
+     * @returns this for chaining
+     */
+    moveTo(point: Vector3Tuple): this;
+    /**
+     * Set the color of all children
+     * @param color - CSS color string
+     * @returns this for chaining
+     */
+    setColor(color: string): this;
+    /**
+     * Set the opacity of all children
+     * @param opacity - Opacity value (0-1)
+     * @returns this for chaining
+     */
+    setOpacity(opacity: number): this;
+    /**
+     * Set the point size of all PMobject children
+     * @param size - Size in pixels
+     * @returns this for chaining
+     */
+    setPointSize(size: number): this;
+    /**
+     * Arrange children in a row or column
+     * @param direction - Direction to arrange
+     * @param buff - Buffer between children
+     * @returns this for chaining
+     */
+    arrange(direction?: Vector3Tuple, buff?: number): this;
+    /**
+     * Create the Three.js backing object
+     */
+    protected _createThreeObject(): THREE.Object3D;
+    /**
+     * Create a copy of this PGroup
+     */
+    protected _createCopy(): PGroup;
+    /**
+     * Get the number of PMobjects in this group
+     */
+    get length(): number;
+    /**
+     * Get a PMobject by index
+     * @param index - Index of the PMobject
+     */
+    get(index: number): PMobject | undefined;
+    /**
+     * Iterate over all PMobjects in the group
+     */
+    [Symbol.iterator](): Iterator<PMobject>;
+}
+/**
+ * Options for creating a PointMobject
+ */
+export interface PointMobjectOptions {
+    /** Position [x, y, z]. Default: [0, 0, 0] */
+    position?: Vector3Tuple;
+    /** Color as CSS color string. Default: white (#FFFFFF) */
+    color?: string;
+    /** Opacity from 0 to 1. Default: 1 */
+    opacity?: number;
+    /** Size in pixels. Default: 8 */
+    size?: number;
+}
+/**
+ * PointMobject - Single point mobject
+ *
+ * Renders as a single dot/particle. Lightweight, no stroke.
+ * Uses THREE.js Points for efficient rendering.
+ *
+ * @example
+ * ```typescript
+ * // Create a point at the origin
+ * const point = new PointMobject();
+ *
+ * // Create a red point at a specific position
+ * const redPoint = new PointMobject({
+ *   position: [1, 2, 0],
+ *   color: '#ff0000',
+ *   size: 12,
+ * });
+ * ```
+ */
+export declare class PointMobject extends PMobject {
+    constructor(options?: PointMobjectOptions);
+    /**
+     * Get the position of the point
+     * @returns Position as [x, y, z]
+     */
+    getPosition(): Vector3Tuple;
+    /**
+     * Set the position of the point
+     * @param position - New position [x, y, z]
+     * @returns this for chaining
+     */
+    setPosition(position: Vector3Tuple): this;
+    /**
+     * Get the center (same as position for a single point)
+     */
+    getCenter(): Vector3Tuple;
+    /**
+     * Move the point to a new position
+     * @param point - Target position [x, y, z]
+     */
+    moveTo(point: Vector3Tuple): this;
+    /**
+     * Create a copy of this PointMobject
+     */
+    protected _createCopy(): PointMobject;
+}
+/**
+ * Options for creating a PointCloudDot
+ */
+export interface PointCloudDotOptions {
+    /** Center position [x, y, z]. Default: [0, 0, 0] */
+    center?: Vector3Tuple;
+    /** Radius of the dot. Default: 0.08 */
+    radius?: number;
+    /** Number of particles. Default: 50 */
+    numParticles?: number;
+    /** Color as CSS color string. Default: white (#FFFFFF) */
+    color?: string;
+    /** Opacity from 0 to 1. Default: 1 */
+    opacity?: number;
+    /** Size of each particle in pixels. Default: 4 */
+    particleSize?: number;
+    /** Spread pattern: 'uniform' for even distribution, 'gaussian' for center-heavy. Default: 'gaussian' */
+    distribution?: 'uniform' | 'gaussian';
+}
+/**
+ * PointCloudDot - Dot rendered as multiple particles
+ *
+ * Creates a "fuzzy" dot effect by rendering multiple particles
+ * within a radius. The particles create a soft, glowing appearance.
+ *
+ * @example
+ * ```typescript
+ * // Create a fuzzy dot at the origin
+ * const dot = new PointCloudDot();
+ *
+ * // Create a large, dense fuzzy dot
+ * const bigDot = new PointCloudDot({
+ *   center: [1, 0, 0],
+ *   radius: 0.2,
+ *   numParticles: 100,
+ *   color: '#ff6600',
+ *   distribution: 'gaussian',
+ * });
+ * ```
+ */
+export declare class PointCloudDot extends PMobject {
+    protected _center: Vector3Tuple;
+    protected _radius: number;
+    protected _numParticles: number;
+    protected _distribution: 'uniform' | 'gaussian';
+    constructor(options?: PointCloudDotOptions);
+    /**
+     * Generate particles within the radius
+     */
+    protected _generateParticles(): void;
+    /**
+     * Get the center of the dot
+     */
+    getCenter(): Vector3Tuple;
+    /**
+     * Move the dot to a new position
+     * @param point - Target position [x, y, z]
+     */
+    moveTo(point: Vector3Tuple): this;
+    /**
+     * Get the radius of the dot
+     */
+    getRadius(): number;
+    /**
+     * Set the radius and regenerate particles
+     * @param radius - New radius
+     * @returns this for chaining
+     */
+    setRadius(radius: number): this;
+    /**
+     * Get the number of particles
+     */
+    getNumParticles(): number;
+    /**
+     * Set the number of particles and regenerate
+     * @param count - New particle count
+     * @returns this for chaining
+     */
+    setNumParticles(count: number): this;
+    /**
+     * Set the distribution pattern and regenerate
+     * @param distribution - 'uniform' or 'gaussian'
+     * @returns this for chaining
+     */
+    setDistribution(distribution: 'uniform' | 'gaussian'): this;
+    /**
+     * Regenerate the particles (useful after changing properties)
+     * @returns this for chaining
+     */
+    regenerate(): this;
+    /**
+     * Create a copy of this PointCloudDot
+     */
+    protected _createCopy(): PointCloudDot;
+}
+/**
+ * Options for creating a Mobject1D
+ */
+export interface Mobject1DOptions {
+    /** Start point [x, y, z]. Default: [-1, 0, 0] */
+    start?: Vector3Tuple;
+    /** End point [x, y, z]. Default: [1, 0, 0] */
+    end?: Vector3Tuple;
+    /** Number of points along the line. Default: 20 */
+    numPoints?: number;
+    /** Alternative to numPoints: density (points per unit length). Overrides numPoints if provided. */
+    density?: number;
+    /** Color as CSS color string. Default: white (#FFFFFF) */
+    color?: string;
+    /** Opacity from 0 to 1. Default: 1 */
+    opacity?: number;
+    /** Size of each point in pixels. Default: 6 */
+    pointSize?: number;
+}
+/**
+ * Mobject1D - 1D point distribution along a line
+ *
+ * Points are distributed along a line segment between start and end.
+ * You can specify either a fixed number of points or a density
+ * (points per unit length).
+ *
+ * @example
+ * ```typescript
+ * // Create a line of 10 points from origin to (2, 0, 0)
+ * const line = new Mobject1D({
+ *   start: [0, 0, 0],
+ *   end: [2, 0, 0],
+ *   numPoints: 10,
+ * });
+ *
+ * // Create a line with density of 5 points per unit
+ * const denseLine = new Mobject1D({
+ *   start: [-1, -1, 0],
+ *   end: [1, 1, 0],
+ *   density: 5,
+ *   color: '#00ff00',
+ * });
+ * ```
+ */
+export declare class Mobject1D extends PMobject {
+    protected _start: Vector3Tuple;
+    protected _end: Vector3Tuple;
+    protected _numPointsConfig: number;
+    protected _density?: number;
+    constructor(options?: Mobject1DOptions);
+    /**
+     * Calculate the length of the line segment
+     */
+    getLength(): number;
+    /**
+     * Get the actual number of points based on config or density
+     */
+    protected _getActualNumPoints(): number;
+    /**
+     * Generate points along the line
+     */
+    protected _generatePoints(): void;
+    /**
+     * Get the start point
+     */
+    getStart(): Vector3Tuple;
+    /**
+     * Get the end point
+     */
+    getEnd(): Vector3Tuple;
+    /**
+     * Set the start point and regenerate
+     * @param start - New start point [x, y, z]
+     * @returns this for chaining
+     */
+    setStart(start: Vector3Tuple): this;
+    /**
+     * Set the end point and regenerate
+     * @param end - New end point [x, y, z]
+     * @returns this for chaining
+     */
+    setEnd(end: Vector3Tuple): this;
+    /**
+     * Set both endpoints and regenerate
+     * @param start - New start point [x, y, z]
+     * @param end - New end point [x, y, z]
+     * @returns this for chaining
+     */
+    setEndpoints(start: Vector3Tuple, end: Vector3Tuple): this;
+    /**
+     * Set the number of points and regenerate (clears density)
+     * @param count - Number of points
+     * @returns this for chaining
+     */
+    setNumPoints(count: number): this;
+    /**
+     * Set the density and regenerate (overrides numPoints)
+     * @param density - Points per unit length
+     * @returns this for chaining
+     */
+    setDensity(density: number): this;
+    /**
+     * Get the center of the line segment
+     */
+    getCenter(): Vector3Tuple;
+    /**
+     * Move the line to center at a new position
+     * @param point - Target center position [x, y, z]
+     */
+    moveTo(point: Vector3Tuple): this;
+    /**
+     * Shift the line by a delta
+     * @param delta - Translation vector [x, y, z]
+     * @returns this for chaining
+     */
+    shift(delta: Vector3Tuple): this;
+    /**
+     * Regenerate the points
+     * @returns this for chaining
+     */
+    regenerate(): this;
+    /**
+     * Create a copy of this Mobject1D
+     */
+    protected _createCopy(): Mobject1D;
+}
+/**
+ * Distribution type for Mobject2D
+ */
+export type Distribution2D = 'grid' | 'random';
+/**
+ * Options for creating a Mobject2D
+ */
+export interface Mobject2DOptions {
+    /** Center of the region [x, y, z]. Default: [0, 0, 0] */
+    center?: Vector3Tuple;
+    /** Width of the region (along x-axis). Default: 2 */
+    width?: number;
+    /** Height of the region (along y-axis). Default: 2 */
+    height?: number;
+    /** Number of points along width for grid, or total points for random. Default: 10 */
+    numPointsX?: number;
+    /** Number of points along height for grid. Default: 10 */
+    numPointsY?: number;
+    /** Alternative to numPoints: density (points per unit area for random, per unit length for grid). */
+    density?: number;
+    /** Distribution pattern: 'grid' or 'random'. Default: 'grid' */
+    distribution?: Distribution2D;
+    /** Color as CSS color string. Default: white (#FFFFFF) */
+    color?: string;
+    /** Opacity from 0 to 1. Default: 1 */
+    opacity?: number;
+    /** Size of each point in pixels. Default: 6 */
+    pointSize?: number;
+}
+/**
+ * Mobject2D - 2D point distribution in a rectangular plane
+ *
+ * Points are distributed within a rectangular region. Supports
+ * grid distribution (evenly spaced rows and columns) or random
+ * distribution within the bounds.
+ *
+ * @example
+ * ```typescript
+ * // Create a 10x10 grid of points
+ * const grid = new Mobject2D({
+ *   center: [0, 0, 0],
+ *   width: 4,
+ *   height: 4,
+ *   numPointsX: 10,
+ *   numPointsY: 10,
+ *   distribution: 'grid',
+ * });
+ *
+ * // Create random points in a region
+ * const randomCloud = new Mobject2D({
+ *   center: [0, 0, 0],
+ *   width: 3,
+ *   height: 2,
+ *   numPointsX: 100,  // total points for random
+ *   distribution: 'random',
+ *   color: '#ff00ff',
+ * });
+ *
+ * // Use density instead of explicit counts
+ * const densePlane = new Mobject2D({
+ *   width: 2,
+ *   height: 2,
+ *   density: 5,  // 5 points per unit (grid) or 5 per unit area (random)
+ *   distribution: 'grid',
+ * });
+ * ```
+ */
+export declare class Mobject2D extends PMobject {
+    protected _center2D: Vector3Tuple;
+    protected _width: number;
+    protected _height: number;
+    protected _numPointsX: number;
+    protected _numPointsY: number;
+    protected _density?: number;
+    protected _distribution: Distribution2D;
+    constructor(options?: Mobject2DOptions);
+    /**
+     * Get the area of the region
+     */
+    getArea(): number;
+    /**
+     * Get actual point counts based on density or config
+     */
+    protected _getActualPointCounts(): {
+        x: number;
+        y: number;
+        total: number;
+    };
+    /**
+     * Generate points in the rectangular region
+     */
+    protected _generatePoints(): void;
+    /**
+     * Get the width of the region
+     */
+    getWidth(): number;
+    /**
+     * Get the height of the region
+     */
+    getHeight(): number;
+    /**
+     * Set the width and regenerate
+     * @param width - New width
+     * @returns this for chaining
+     */
+    setWidth(width: number): this;
+    /**
+     * Set the height and regenerate
+     * @param height - New height
+     * @returns this for chaining
+     */
+    setHeight(height: number): this;
+    /**
+     * Set both dimensions and regenerate
+     * @param width - New width
+     * @param height - New height
+     * @returns this for chaining
+     */
+    setDimensions(width: number, height: number): this;
+    /**
+     * Set point counts for grid distribution (clears density)
+     * @param xCount - Points along width
+     * @param yCount - Points along height
+     * @returns this for chaining
+     */
+    setPointCounts(xCount: number, yCount: number): this;
+    /**
+     * Set the density and regenerate (overrides point counts)
+     * @param density - Points per unit length (grid) or per unit area (random)
+     * @returns this for chaining
+     */
+    setDensity(density: number): this;
+    /**
+     * Set the distribution pattern and regenerate
+     * @param distribution - 'grid' or 'random'
+     * @returns this for chaining
+     */
+    setDistribution(distribution: Distribution2D): this;
+    /**
+     * Get the distribution pattern
+     */
+    getDistribution(): Distribution2D;
+    /**
+     * Get the center of the region
+     */
+    getCenter(): Vector3Tuple;
+    /**
+     * Move the region to center at a new position
+     * @param point - Target center position [x, y, z]
+     */
+    moveTo(point: Vector3Tuple): this;
+    /**
+     * Shift the region by a delta
+     * @param delta - Translation vector [x, y, z]
+     * @returns this for chaining
+     */
+    shift(delta: Vector3Tuple): this;
+    /**
+     * Regenerate the points (useful for random distribution refresh)
+     * @returns this for chaining
+     */
+    regenerate(): this;
+    /**
+     * Create a copy of this Mobject2D
+     */
+    protected _createCopy(): Mobject2D;
+}
+export default PMobject;
+//# sourceMappingURL=index.d.ts.map