Pixijs Math

const parent = new Container();parent.position.set(100, 100);parent.scale.set(2);app.stage.addChild(parent);
const child = new Container();child.position.set(50, 50);parent.addChild(child);
const globalPt = child.toGlobal(new Point(0, 0));
const m = new Matrix()  .translate(100, 50)  .rotate(Math.PI / 4)  .scale(2, 2);const world = m.apply(new Point(10, 20));
const hitArea = new Rectangle(0, 0, 200, 100);console.log(hitArea.contains(50, 50));

import { Point } from "pixi.js";
const p = new Point(10, 20);p.set(30, 40); // set bothp.set(50); // x=50, y=50
const clone = p.clone();console.log(p.equals(clone)); // true
p.copyFrom({ x: 1, y: 2 }); // accepts any PointData
// Point.shared: temporary point, reset to (0,0) on each accessconst temp = Point.shared;temp.set(100, 200);// do not store a reference to Point.shared

import { Container } from "pixi.js";
const obj = new Container();obj.position.set(100, 200); // triggers observer -> marks transform dirtyobj.position.x = 150; // also triggers observer

import { Matrix, Point } from "pixi.js";
// Build a transformconst m = new Matrix()  .translate(100, 50)  .rotate(Math.PI / 4)  .scale(2, 2);
// Transform a point (local -> parent space)const local = new Point(10, 20);const world = m.apply(local);
// Inverse transform (parent -> local space)const backToLocal = m.applyInverse(world);
// Combine matricesconst a = new Matrix().translate(50, 0);const b = new Matrix().rotate(Math.PI / 2);a.append(b); // a = a * b
// Decompose into position/scale/rotation/skewconst transform = {  position: new Point(),  scale: new Point(),  pivot: new Point(),  skew: new Point(),  rotation: 0,};m.decompose(transform);console.log(transform.rotation); // ~0.785 (PI/4)
// A mirrored matrix (one axis flipped, axes still perpendicular) decomposes into// rotation + negative scale.x with zero skew. scale.y is never negative: a y-axis// flip comes back as scale.x = -1 plus a half turn. Either way the parts rebuild the matrix.const mirrored = new Matrix().rotate(Math.PI / 6).scale(-1, 1);mirrored.decompose(transform);transform.scale.x; // -1transform.skew.x; // 0
// Shared temporary matrix (reset on each access)const temp = Matrix.shared;// IDENTITY is read-only referenceconst isDefault = m.equals(Matrix.IDENTITY);

import { Container, Point } from "pixi.js";
const parent = new Container();parent.position.set(100, 100);parent.scale.set(2);
const child = new Container();child.position.set(50, 50);parent.addChild(child);
// Local point in child's space -> global (world) spaceconst globalPt = child.toGlobal(new Point(0, 0));// globalPt = { x: 200, y: 200 } (100 + 50*2, 100 + 50*2)
// Global point -> child's local spaceconst localPt = child.toLocal(new Point(200, 200));// localPt = { x: 0, y: 0 }
// Convert between two containersconst other = new Container();other.position.set(300, 300);const ptInOther = child.toLocal(new Point(10, 10), other);

import { Rectangle, Circle, Ellipse, Polygon, Container } from "pixi.js";
const rect = new Rectangle(0, 0, 200, 100);rect.contains(50, 50); // truerect.contains(300, 50); // falserect.left; // 0rect.right; // 200rect.top; // 0rect.bottom; // 100rect.isEmpty(); // false (Rectangle.EMPTY returns a fresh empty rect)
// Native Rectangle-to-Rectangle methods (no math-extras needed)const other = new Rectangle(50, 50, 100, 100);rect.containsRect(other); // true if `other` is fully inside `rect`rect.containsRect(new Rectangle(100, 0, 100, 100)); // true: a flush right edge countsrect.containsRect(rect.clone()); // true: identical rects contain each otherrect.intersects(other); // boolean: do they overlap at all?rect.intersects(other, matrix); // overlap after transforming `other`
// Stroke hit testing (alignment: 1 = inner, 0.5 = centered, 0 = outer)rect.strokeContains(0, 50, 4); // true if (0,50) lies on a 4px centered strokeconst circle = new Circle(100, 100, 50);circle.strokeContains(150, 100, 4, 1); // inner-aligned stroke check// A stroke that reaches past the shape's centre covers the whole interior; there is no holenew Ellipse(0, 0, 10, 10).strokeContains(0, 0, 40, 1); // true
// getBounds works on every shape (returns a Rectangle, accepts an out param)const bounds = circle.getBounds();const reused = new Rectangle();new Polygon([0, 0, 100, 0, 50, 100]).getBounds(reused);
// Use as hit area for interactionconst button = new Container();button.hitArea = new Rectangle(0, 0, 200, 50);button.eventMode = "static";button.on("pointerdown", () => {  /* clicked */});

import { Rectangle } from "pixi.js";
const r = new Rectangle(10, 10, 100, 50);
r.pad(5); // grow on all sides: x=5, y=5, w=110, h=60r.pad(10, 4); // separate horizontal/vertical paddingr.scale(2); // multiply x, y, width, height by 2
// fit shrinks `this` to lie inside another rect (clipping)const viewport = new Rectangle(0, 0, 200, 200);new Rectangle(150, 150, 200, 200).fit(viewport); // -> 150, 150, 50, 50
// enlarge expands `this` to include another rect (bounds aggregation)const total = new Rectangle();items.forEach((item) =>  total.enlarge(new Rectangle().copyFromBounds(item.getBounds())),);
// ceil snaps to a pixel grid (resolution: 1 = whole pixels, 2 = half pixels)new Rectangle(10.2, 10.6, 100.8, 100.4).ceil();
// copy a Container/Mesh bounds object straight into a Rectanglenew Rectangle().copyFromBounds(container.getBounds());

import { Polygon, Point } from "pixi.js";
new Polygon([0, 0, 100, 0, 50, 100]); // flat numbersnew Polygon([new Point(0, 0), new Point(100, 0), new Point(50, 100)]); // PointData[]new Polygon(0, 0, 100, 0, 50, 100); // spread numbersnew Polygon(new Point(0, 0), new Point(100, 0), new Point(50, 100)); // spread points
const poly = new Polygon([0, 0, 100, 0, 100, 100, 0, 100]);poly.points; // [0, 0, 100, 0, 100, 100, 0, 100] (mutable flat array)poly.closePath; // true by default; false produces an open pathpoly.startX; // 0  - first vertexpoly.lastX; // 0  - last vertex (lastY for y)poly.isClockwise(); // shoelace winding test (useful for SVG hole detection)
// Polygon-in-polygon containment for hole detectionconst outer = new Polygon([0, 0, 100, 0, 100, 100, 0, 100]);const hole = new Polygon([25, 25, 75, 25, 75, 75, 25, 75]);outer.containsPolygon(hole); // true
// Stroke hit test follows the drawn stroke: alignment 1 = inside, 0.5 = centered,// 0 = outside, independent of winding orderouter.strokeContains(-5, 50, 20); // true (centered stroke extends 10px outward)outer.strokeContains(-5, 50, 20, 1); // false (inner stroke stays inside)outer.strokeContains(5, 50, 20, 0); // false (outer stroke stays outside)

import { DEG_TO_RAD, RAD_TO_DEG, PI_2 } from "pixi.js";
const angle = 45 * DEG_TO_RAD; // 0.785...const degrees = angle * RAD_TO_DEG; // 45const fullCircle = PI_2; // Math.PI * 2

import type { PointData } from "pixi.js";
function distance(a: PointData, b: PointData): number {  const dx = a.x - b.x;  const dy = a.y - b.y;  return Math.sqrt(dx * dx + dy * dy);}

import "pixi.js/math-extras";import { Point } from "pixi.js";

const a = new Point(3, 4);const b = new Point(1, 2);
// Arithmeticconst sum = a.add(b); // Point(4, 6)const diff = a.subtract(b); // Point(2, 2)const prod = a.multiply(b); // Point(3, 8) - component-wiseconst scaled = a.multiplyScalar(2); // Point(6, 8)
// Dot and cross productconst dot = a.dot(b); // 11const cross = a.cross(b); // 2 (z-component of 3D cross)
// Lengthconst len = a.magnitude(); // 5const lenSq = a.magnitudeSquared(); // 25 (faster for comparisons)
// Normalize to unit vectorconst unit = a.normalize(); // Point(0.6, 0.8)
// Projection and reflectionconst proj = a.project(b); // project a onto bconst refl = a.reflect(new Point(0, 1)); // reflect across normal
// Rotationconst rotated = a.rotate(Math.PI / 2); // rotate 90 degrees
// Reuse existing point to avoid allocationconst out = new Point();a.add(b, out); // result written to out

import "pixi.js/math-extras";import { Rectangle } from "pixi.js";
const r1 = new Rectangle(0, 0, 100, 100);const r2 = new Rectangle(50, 50, 100, 100);
r1.equals(r2); // false
const overlap = r1.intersection(r2); // Rectangle(50, 50, 50, 50)const envelope = r1.union(r2); // Rectangle(0, 0, 150, 150)
// Optional out parameterconst out = new Rectangle();r1.intersection(r2, out);

import {  floatEqual,  lineIntersection,  segmentIntersection,} from "pixi.js/math-extras";import { Point } from "pixi.js";
// Epsilon-based float comparison (default epsilon: Number.EPSILON)floatEqual(0.1 + 0.2, 0.3, 1e-10); // true with reasonable epsilonfloatEqual(1.0, 1.001, 0.01); // true (custom epsilon)
// Unbounded line intersection (returns {x: NaN, y: NaN} if parallel)const hit = lineIntersection(  new Point(0, 0),  new Point(10, 10), // line A  new Point(10, 0),  new Point(0, 10), // line B); // Point(5, 5)if (isNaN(hit.x)) {  /* lines are parallel */}
// Bounded segment intersection (returns {x: NaN, y: NaN} if segments don't cross)const segHit = segmentIntersection(  new Point(0, 0),  new Point(10, 10),  new Point(10, 0),  new Point(0, 10),); // Point(5, 5)if (isNaN(segHit.x)) {  /* segments don't intersect */}

import { Point } from "@pixi/math";

import { Point } from "pixi.js";

// Replacing the reference loses observationlet pos = container.position;pos = new Point(100, 200); // container.position unchanged

// Mutate in place to trigger the observercontainer.position.set(100, 200);// orcontainer.position.x = 100;container.position.y = 200;// or copy from another pointcontainer.position.copyFrom(new Point(100, 200));

import { Point } from "pixi.js";const p = new Point(1, 2);p.add(new Point(3, 4)); // TypeError: p.add is not a function

import "pixi.js/math-extras";import { Point } from "pixi.js";const p = new Point(1, 2);const sum = p.add(new Point(3, 4)); // works

const myPoint = Point.shared;myPoint.set(100, 200);// ... later ...console.log(myPoint.x); // 0 (reset on next access)

const myPoint = new Point();myPoint.copyFrom(Point.shared.set(100, 200));// or justconst myPoint = new Point(100, 200);