Mathematical primitives including points, rectangles, circles, matrices, and shape utilities for calculations and transformations. These classes provide the foundation for positioning, collision detection, and geometric operations in PixiJS.
2D point representation with coordinate manipulation and utility methods.
/**
* 2D point with x and y coordinates
*/
class Point {
constructor(x?: number, y?: number);
/** X coordinate */
x: number;
/** Y coordinate */
y: number;
/**
* Clone this point
* @returns New point with same coordinates
*/
clone(): Point;
/**
* Copy coordinates from another point
* @param p - Point to copy from
* @returns This point
*/
copyFrom(p: PointData): this;
/**
* Copy coordinates to another point
* @param p - Point to copy to
* @returns The target point
*/
copyTo<T extends PointLike>(p: T): T;
/**
* Check if points are equal
* @param p - Point to compare
* @returns True if equal
*/
equals(p: PointData): boolean;
/**
* Set coordinates
* @param x - X coordinate
* @param y - Y coordinate
* @returns This point
*/
set(x?: number, y?: number): this;
/**
* Get magnitude/length of point vector
* @returns Vector length
*/
magnitude(): number;
/**
* Get squared magnitude (faster than magnitude)
* @returns Squared vector length
*/
magnitudeSquared(): number;
/**
* Normalize point to unit vector
* @returns This point
*/
normalize(): this;
/**
* Dot product with another point
* @param p - Other point
* @returns Dot product result
*/
dot(p: PointData): number;
/**
* Cross product with another point
* @param p - Other point
* @returns Cross product result
*/
cross(p: PointData): number;
}
/**
* Observable point that emits events when changed
*/
class ObservablePoint extends Point {
constructor(observer: PointObserver, x?: number, y?: number);
/** Change callback */
cb: () => void;
/** Callback scope */
scope: any;
/**
* Set coordinates and trigger callback
* @param x - X coordinate
* @param y - Y coordinate
* @returns This point
*/
set(x?: number, y?: number): this;
}
interface PointData {
x: number;
y: number;
}
interface PointLike {
x: number;
y: number;
}
interface PointObserver {
(): void;
}Rectangle shape with position, dimensions, and geometric operations.
/**
* Rectangle shape with x, y, width, height
*/
class Rectangle {
constructor(x?: number, y?: number, width?: number, height?: number);
/** X position */
x: number;
/** Y position */
y: number;
/** Width */
width: number;
/** Height */
height: number;
/** Left edge (alias for x) */
get left(): number;
set left(value: number);
/** Right edge */
get right(): number;
set right(value: number);
/** Top edge (alias for y) */
get top(): number;
set top(value: number);
/** Bottom edge */
get bottom(): number;
set bottom(value: number);
/**
* Check if point is inside rectangle
* @param x - X coordinate
* @param y - Y coordinate
* @returns True if point is inside
*/
contains(x: number, y: number): boolean;
/**
* Check if this rectangle intersects another
* @param other - Other rectangle
* @returns True if intersecting
*/
intersects(other: Rectangle): boolean;
/**
* Fit this rectangle inside another
* @param rectangle - Container rectangle
* @returns This rectangle
*/
fit(rectangle: Rectangle): this;
/**
* Pad rectangle by amount
* @param paddingX - Horizontal padding
* @param paddingY - Vertical padding
* @returns This rectangle
*/
pad(paddingX: number, paddingY?: number): this;
/**
* Enlarge rectangle to contain another
* @param rectangle - Rectangle to contain
* @returns This rectangle
*/
enlarge(rectangle: Rectangle): this;
/**
* Get intersection with another rectangle
* @param other - Other rectangle
* @param outRect - Rectangle to store result
* @returns Intersection rectangle
*/
intersection(other: Rectangle, outRect?: Rectangle): Rectangle;
/**
* Get union with another rectangle
* @param other - Other rectangle
* @param outRect - Rectangle to store result
* @returns Union rectangle
*/
union(other: Rectangle, outRect?: Rectangle): Rectangle;
/**
* Clone rectangle
* @returns New rectangle with same values
*/
clone(): Rectangle;
/**
* Copy from another rectangle
* @param rectangle - Rectangle to copy from
* @returns This rectangle
*/
copyFrom(rectangle: Rectangle): this;
/**
* Copy to another rectangle
* @param rectangle - Rectangle to copy to
* @returns Target rectangle
*/
copyTo(rectangle: Rectangle): Rectangle;
/**
* Check if rectangles are equal
* @param other - Rectangle to compare
* @returns True if equal
*/
equals(other: Rectangle): boolean;
/** Rectangle area */
get area(): number;
/** Rectangle perimeter */
get perimeter(): number;
/** Center point */
get center(): Point;
/** Empty rectangle constant */
static readonly EMPTY: Rectangle;
}Circle shape with center and radius.
/**
* Circle shape
*/
class Circle {
constructor(x?: number, y?: number, radius?: number);
/** Center X coordinate */
x: number;
/** Center Y coordinate */
y: number;
/** Circle radius */
radius: number;
/** Shape type identifier */
readonly type: SHAPES.CIRCLE;
/**
* Check if point is inside circle
* @param x - X coordinate
* @param y - Y coordinate
* @returns True if point is inside
*/
contains(x: number, y: number): boolean;
/**
* Get bounding rectangle
* @param out - Rectangle to store bounds
* @returns Bounding rectangle
*/
getBounds(out?: Rectangle): Rectangle;
/**
* Clone circle
* @returns New circle with same values
*/
clone(): Circle;
/**
* Copy from another circle
* @param circle - Circle to copy from
* @returns This circle
*/
copyFrom(circle: Circle): this;
/**
* Copy to another circle
* @param circle - Circle to copy to
* @returns Target circle
*/
copyTo(circle: Circle): Circle;
/** Circle area */
get area(): number;
/** Circle circumference */
get circumference(): number;
}Ellipse shape with center and radii.
/**
* Ellipse shape
*/
class Ellipse {
constructor(x?: number, y?: number, halfWidth?: number, halfHeight?: number);
/** Center X coordinate */
x: number;
/** Center Y coordinate */
y: number;
/** Half width (horizontal radius) */
halfWidth: number;
/** Half height (vertical radius) */
halfHeight: number;
/** Shape type identifier */
readonly type: SHAPES.ELLIPSE;
/**
* Check if point is inside ellipse
* @param x - X coordinate
* @param y - Y coordinate
* @returns True if point is inside
*/
contains(x: number, y: number): boolean;
/**
* Get bounding rectangle
* @param out - Rectangle to store bounds
* @returns Bounding rectangle
*/
getBounds(out?: Rectangle): Rectangle;
/**
* Clone ellipse
* @returns New ellipse with same values
*/
clone(): Ellipse;
/**
* Copy from another ellipse
* @param ellipse - Ellipse to copy from
* @returns This ellipse
*/
copyFrom(ellipse: Ellipse): this;
/**
* Copy to another ellipse
* @param ellipse - Ellipse to copy to
* @returns Target ellipse
*/
copyTo(ellipse: Ellipse): Ellipse;
}Multi-vertex polygon shape.
/**
* Polygon shape with multiple vertices
*/
class Polygon {
constructor(points?: PointData[] | number[]);
/** Polygon vertices as flat array */
points: number[];
/** Shape type identifier */
readonly type: SHAPES.POLYGON;
/** Is polygon closed */
closeStroke: boolean;
/**
* Check if point is inside polygon
* @param x - X coordinate
* @param y - Y coordinate
* @returns True if point is inside
*/
contains(x: number, y: number): boolean;
/**
* Get bounding rectangle
* @param out - Rectangle to store bounds
* @returns Bounding rectangle
*/
getBounds(out?: Rectangle): Rectangle;
/**
* Clone polygon
* @returns New polygon with same vertices
*/
clone(): Polygon;
/**
* Copy from another polygon
* @param polygon - Polygon to copy from
* @returns This polygon
*/
copyFrom(polygon: Polygon): this;
/**
* Copy to another polygon
* @param polygon - Polygon to copy to
* @returns Target polygon
*/
copyTo(polygon: Polygon): Polygon;
}2D transformation matrix for scaling, rotation, translation, and skewing.
/**
* 2D transformation matrix
*/
class Matrix {
constructor(a?: number, b?: number, c?: number, d?: number, tx?: number, ty?: number);
/** Scale/rotation X component */
a: number;
/** Skew Y component */
b: number;
/** Skew X component */
c: number;
/** Scale/rotation Y component */
d: number;
/** Translation X */
tx: number;
/** Translation Y */
ty: number;
/**
* Clone matrix
* @returns New matrix with same values
*/
clone(): Matrix;
/**
* Set matrix values
* @param a - Scale/rotation X
* @param b - Skew Y
* @param c - Skew X
* @param d - Scale/rotation Y
* @param tx - Translation X
* @param ty - Translation Y
* @returns This matrix
*/
set(a: number, b: number, c: number, d: number, tx: number, ty: number): this;
/**
* Apply matrix to point
* @param pos - Point to transform
* @param newPos - Point to store result
* @returns Transformed point
*/
apply(pos: PointData, newPos?: Point): Point;
/**
* Apply inverse matrix to point
* @param pos - Point to transform
* @param newPos - Point to store result
* @returns Transformed point
*/
applyInverse(pos: PointData, newPos?: Point): Point;
/**
* Translate matrix
* @param x - X translation
* @param y - Y translation
* @returns This matrix
*/
translate(x: number, y: number): this;
/**
* Scale matrix
* @param x - X scale factor
* @param y - Y scale factor
* @returns This matrix
*/
scale(x: number, y: number): this;
/**
* Rotate matrix
* @param angle - Rotation angle in radians
* @returns This matrix
*/
rotate(angle: number): this;
/**
* Append another matrix
* @param matrix - Matrix to append
* @returns This matrix
*/
append(matrix: Matrix): this;
/**
* Prepend another matrix
* @param matrix - Matrix to prepend
* @returns This matrix
*/
prepend(matrix: Matrix): this;
/**
* Invert matrix
* @returns This matrix
*/
invert(): this;
/**
* Reset to identity matrix
* @returns This matrix
*/
identity(): this;
/**
* Copy from another matrix
* @param matrix - Matrix to copy from
* @returns This matrix
*/
copyFrom(matrix: Matrix): this;
/**
* Copy to another matrix
* @param matrix - Matrix to copy to
* @returns Target matrix
*/
copyTo(matrix: Matrix): Matrix;
/** Identity matrix constant */
static readonly IDENTITY: Matrix;
/** Temporary matrix for calculations */
static readonly TEMP_MATRIX: Matrix;
}Mathematical utility functions and constants.
/**
* Check if point is inside triangle
* @param x - Point X
* @param y - Point Y
* @param x1 - Triangle vertex 1 X
* @param y1 - Triangle vertex 1 Y
* @param x2 - Triangle vertex 2 X
* @param y2 - Triangle vertex 2 Y
* @param x3 - Triangle vertex 3 X
* @param y3 - Triangle vertex 3 Y
* @returns True if point is inside triangle
*/
function pointInTriangle(x: number, y: number, x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): boolean;
/**
* Calculate squared distance from point to line segment
* @param x - Point X
* @param y - Point Y
* @param x1 - Line start X
* @param y1 - Line start Y
* @param x2 - Line end X
* @param y2 - Line end Y
* @returns Squared distance
*/
function squaredDistanceToLineSegment(x: number, y: number, x1: number, y1: number, x2: number, y2: number): number;
/**
* Check if number is power of 2
* @param value - Number to check
* @returns True if power of 2
*/
function isPow2(value: number): boolean;
/**
* Get next power of 2
* @param value - Input value
* @returns Next power of 2
*/
function nextPow2(value: number): number;
/**
* Mathematical constants
*/
const PI_2: number; // PI * 2
const RAD_TO_DEG: number; // 180 / PI
const DEG_TO_RAD: number; // PI / 180Usage Examples:
import { Point, Rectangle, Circle, Matrix, squaredDistanceToLineSegment } from 'pixi.js';
// Point operations
const point1 = new Point(10, 20);
const point2 = new Point(30, 40);
const distance = point1.magnitude();
const normalized = point1.clone().normalize();
const dot = point1.dot(point2);
// Rectangle operations
const rect1 = new Rectangle(0, 0, 100, 100);
const rect2 = new Rectangle(50, 50, 100, 100);
const intersects = rect1.intersects(rect2);
const intersection = rect1.intersection(rect2);
const contains = rect1.contains(75, 75);
// Circle collision detection
const circle = new Circle(50, 50, 25);
const pointInCircle = circle.contains(60, 60);
const bounds = circle.getBounds();
// Matrix transformations
const matrix = new Matrix();
matrix.translate(100, 50);
matrix.rotate(Math.PI / 4); // 45 degrees
matrix.scale(2, 2);
// Transform point
const originalPoint = new Point(0, 0);
const transformedPoint = matrix.apply(originalPoint);
// Sprite transformation using matrix
const sprite = new Sprite(texture);
sprite.transform.setFromMatrix(matrix);
// Observable point for automatic updates
const observablePoint = new ObservablePoint(() => {
console.log('Point changed!');
}, 0, 0);
sprite.anchor = observablePoint; // Changes to anchor will trigger callback
// Collision detection between shapes
function checkCollision(sprite1: Sprite, sprite2: Sprite): boolean {
const bounds1 = sprite1.getBounds();
const bounds2 = sprite2.getBounds();
return bounds1.intersects(bounds2);
}
// Custom polygon hit area
const triangle = new Polygon([
0, 0, // Point 1
50, 0, // Point 2
25, 50 // Point 3
]);
sprite.hitArea = triangle;
sprite.interactive = true;
// Distance calculations
const lineStart = new Point(0, 0);
const lineEnd = new Point(100, 100);
const testPoint = new Point(50, 25);
const distanceToLine = Math.sqrt(
squaredDistanceToLineSegment(
testPoint.x, testPoint.y,
lineStart.x, lineStart.y,
lineEnd.x, lineEnd.y
)
);