0
# Mathematics and Geometry
1

2
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.
3

4
## Capabilities
5

6
### Point
7

8
2D point representation with coordinate manipulation and utility methods.
9

10
```typescript { .api }
11
/**
12
 * 2D point with x and y coordinates
13
 */
14
class Point {
15
  constructor(x?: number, y?: number);
16
  
17
  /** X coordinate */
18
  x: number;
19
  
20
  /** Y coordinate */
21
  y: number;
22
  
23
  /**
24
   * Clone this point
25
   * @returns New point with same coordinates
26
   */
27
  clone(): Point;
28
  
29
  /**
30
   * Copy coordinates from another point
31
   * @param p - Point to copy from
32
   * @returns This point
33
   */
34
  copyFrom(p: PointData): this;
35
  
36
  /**
37
   * Copy coordinates to another point
38
   * @param p - Point to copy to
39
   * @returns The target point
40
   */
41
  copyTo<T extends PointLike>(p: T): T;
42
  
43
  /**
44
   * Check if points are equal
45
   * @param p - Point to compare
46
   * @returns True if equal
47
   */
48
  equals(p: PointData): boolean;
49
  
50
  /**
51
   * Set coordinates
52
   * @param x - X coordinate
53
   * @param y - Y coordinate
54
   * @returns This point
55
   */
56
  set(x?: number, y?: number): this;
57
  
58
  /**
59
   * Get magnitude/length of point vector
60
   * @returns Vector length
61
   */
62
  magnitude(): number;
63
  
64
  /**
65
   * Get squared magnitude (faster than magnitude)
66
   * @returns Squared vector length
67
   */
68
  magnitudeSquared(): number;
69
  
70
  /**
71
   * Normalize point to unit vector
72
   * @returns This point
73
   */
74
  normalize(): this;
75
  
76
  /**
77
   * Dot product with another point
78
   * @param p - Other point
79
   * @returns Dot product result
80
   */
81
  dot(p: PointData): number;
82
  
83
  /**
84
   * Cross product with another point
85
   * @param p - Other point
86
   * @returns Cross product result
87
   */
88
  cross(p: PointData): number;
89
}
90

91
/**
92
 * Observable point that emits events when changed
93
 */
94
class ObservablePoint extends Point {
95
  constructor(observer: PointObserver, x?: number, y?: number);
96
  
97
  /** Change callback */
98
  cb: () => void;
99
  
100
  /** Callback scope */
101
  scope: any;
102
  
103
  /**
104
   * Set coordinates and trigger callback
105
   * @param x - X coordinate
106
   * @param y - Y coordinate
107
   * @returns This point
108
   */
109
  set(x?: number, y?: number): this;
110
}
111

112
interface PointData {
113
  x: number;
114
  y: number;
115
}
116

117
interface PointLike {
118
  x: number;
119
  y: number;
120
}
121

122
interface PointObserver {
123
  (): void;
124
}
125
```
126

127
### Rectangle
128

129
Rectangle shape with position, dimensions, and geometric operations.
130

131
```typescript { .api }
132
/**
133
 * Rectangle shape with x, y, width, height
134
 */
135
class Rectangle {
136
  constructor(x?: number, y?: number, width?: number, height?: number);
137
  
138
  /** X position */
139
  x: number;
140
  
141
  /** Y position */
142
  y: number;
143
  
144
  /** Width */
145
  width: number;
146
  
147
  /** Height */
148
  height: number;
149
  
150
  /** Left edge (alias for x) */
151
  get left(): number;
152
  set left(value: number);
153
  
154
  /** Right edge */
155
  get right(): number;
156
  set right(value: number);
157
  
158
  /** Top edge (alias for y) */
159
  get top(): number;
160
  set top(value: number);
161
  
162
  /** Bottom edge */
163
  get bottom(): number;
164
  set bottom(value: number);
165
  
166
  /**
167
   * Check if point is inside rectangle
168
   * @param x - X coordinate
169
   * @param y - Y coordinate
170
   * @returns True if point is inside
171
   */
172
  contains(x: number, y: number): boolean;
173
  
174
  /**
175
   * Check if this rectangle intersects another
176
   * @param other - Other rectangle
177
   * @returns True if intersecting
178
   */
179
  intersects(other: Rectangle): boolean;
180
  
181
  /**
182
   * Fit this rectangle inside another
183
   * @param rectangle - Container rectangle
184
   * @returns This rectangle
185
   */
186
  fit(rectangle: Rectangle): this;
187
  
188
  /**
189
   * Pad rectangle by amount
190
   * @param paddingX - Horizontal padding
191
   * @param paddingY - Vertical padding
192
   * @returns This rectangle
193
   */
194
  pad(paddingX: number, paddingY?: number): this;
195
  
196
  /**
197
   * Enlarge rectangle to contain another
198
   * @param rectangle - Rectangle to contain
199
   * @returns This rectangle
200
   */
201
  enlarge(rectangle: Rectangle): this;
202
  
203
  /**
204
   * Get intersection with another rectangle
205
   * @param other - Other rectangle
206
   * @param outRect - Rectangle to store result
207
   * @returns Intersection rectangle
208
   */
209
  intersection(other: Rectangle, outRect?: Rectangle): Rectangle;
210
  
211
  /**
212
   * Get union with another rectangle
213
   * @param other - Other rectangle
214
   * @param outRect - Rectangle to store result
215
   * @returns Union rectangle
216
   */
217
  union(other: Rectangle, outRect?: Rectangle): Rectangle;
218
  
219
  /**
220
   * Clone rectangle
221
   * @returns New rectangle with same values
222
   */
223
  clone(): Rectangle;
224
  
225
  /**
226
   * Copy from another rectangle
227
   * @param rectangle - Rectangle to copy from
228
   * @returns This rectangle
229
   */
230
  copyFrom(rectangle: Rectangle): this;
231
  
232
  /**
233
   * Copy to another rectangle
234
   * @param rectangle - Rectangle to copy to
235
   * @returns Target rectangle
236
   */
237
  copyTo(rectangle: Rectangle): Rectangle;
238
  
239
  /**
240
   * Check if rectangles are equal
241
   * @param other - Rectangle to compare
242
   * @returns True if equal
243
   */
244
  equals(other: Rectangle): boolean;
245
  
246
  /** Rectangle area */
247
  get area(): number;
248
  
249
  /** Rectangle perimeter */
250
  get perimeter(): number;
251
  
252
  /** Center point */
253
  get center(): Point;
254
  
255
  /** Empty rectangle constant */
256
  static readonly EMPTY: Rectangle;
257
}
258
```
259

260
### Circle
261

262
Circle shape with center and radius.
263

264
```typescript { .api }
265
/**
266
 * Circle shape
267
 */
268
class Circle {
269
  constructor(x?: number, y?: number, radius?: number);
270
  
271
  /** Center X coordinate */
272
  x: number;
273
  
274
  /** Center Y coordinate */
275
  y: number;
276
  
277
  /** Circle radius */
278
  radius: number;
279
  
280
  /** Shape type identifier */
281
  readonly type: SHAPES.CIRCLE;
282
  
283
  /**
284
   * Check if point is inside circle
285
   * @param x - X coordinate
286
   * @param y - Y coordinate
287
   * @returns True if point is inside
288
   */
289
  contains(x: number, y: number): boolean;
290
  
291
  /**
292
   * Get bounding rectangle
293
   * @param out - Rectangle to store bounds
294
   * @returns Bounding rectangle
295
   */
296
  getBounds(out?: Rectangle): Rectangle;
297
  
298
  /**
299
   * Clone circle
300
   * @returns New circle with same values
301
   */
302
  clone(): Circle;
303
  
304
  /**
305
   * Copy from another circle
306
   * @param circle - Circle to copy from
307
   * @returns This circle
308
   */
309
  copyFrom(circle: Circle): this;
310
  
311
  /**
312
   * Copy to another circle
313
   * @param circle - Circle to copy to
314
   * @returns Target circle
315
   */
316
  copyTo(circle: Circle): Circle;
317
  
318
  /** Circle area */
319
  get area(): number;
320
  
321
  /** Circle circumference */
322
  get circumference(): number;
323
}
324
```
325

326
### Ellipse
327

328
Ellipse shape with center and radii.
329

330
```typescript { .api }
331
/**
332
 * Ellipse shape
333
 */
334
class Ellipse {
335
  constructor(x?: number, y?: number, halfWidth?: number, halfHeight?: number);
336
  
337
  /** Center X coordinate */
338
  x: number;
339
  
340
  /** Center Y coordinate */
341
  y: number;
342
  
343
  /** Half width (horizontal radius) */
344
  halfWidth: number;
345
  
346
  /** Half height (vertical radius) */
347
  halfHeight: number;
348
  
349
  /** Shape type identifier */
350
  readonly type: SHAPES.ELLIPSE;
351
  
352
  /**
353
   * Check if point is inside ellipse
354
   * @param x - X coordinate
355
   * @param y - Y coordinate
356
   * @returns True if point is inside
357
   */
358
  contains(x: number, y: number): boolean;
359
  
360
  /**
361
   * Get bounding rectangle
362
   * @param out - Rectangle to store bounds
363
   * @returns Bounding rectangle
364
   */
365
  getBounds(out?: Rectangle): Rectangle;
366
  
367
  /**
368
   * Clone ellipse
369
   * @returns New ellipse with same values
370
   */
371
  clone(): Ellipse;
372
  
373
  /**
374
   * Copy from another ellipse
375
   * @param ellipse - Ellipse to copy from
376
   * @returns This ellipse
377
   */
378
  copyFrom(ellipse: Ellipse): this;
379
  
380
  /**
381
   * Copy to another ellipse
382
   * @param ellipse - Ellipse to copy to
383
   * @returns Target ellipse
384
   */
385
  copyTo(ellipse: Ellipse): Ellipse;
386
}
387
```
388

389
### Polygon
390

391
Multi-vertex polygon shape.
392

393
```typescript { .api }
394
/**
395
 * Polygon shape with multiple vertices
396
 */
397
class Polygon {
398
  constructor(points?: PointData[] | number[]);
399
  
400
  /** Polygon vertices as flat array */
401
  points: number[];
402
  
403
  /** Shape type identifier */
404
  readonly type: SHAPES.POLYGON;
405
  
406
  /** Is polygon closed */
407
  closeStroke: boolean;
408
  
409
  /**
410
   * Check if point is inside polygon
411
   * @param x - X coordinate
412
   * @param y - Y coordinate
413
   * @returns True if point is inside
414
   */
415
  contains(x: number, y: number): boolean;
416
  
417
  /**
418
   * Get bounding rectangle
419
   * @param out - Rectangle to store bounds
420
   * @returns Bounding rectangle
421
   */
422
  getBounds(out?: Rectangle): Rectangle;
423
  
424
  /**
425
   * Clone polygon
426
   * @returns New polygon with same vertices
427
   */
428
  clone(): Polygon;
429
  
430
  /**
431
   * Copy from another polygon
432
   * @param polygon - Polygon to copy from
433
   * @returns This polygon
434
   */
435
  copyFrom(polygon: Polygon): this;
436
  
437
  /**
438
   * Copy to another polygon
439
   * @param polygon - Polygon to copy to
440
   * @returns Target polygon
441
   */
442
  copyTo(polygon: Polygon): Polygon;
443
}
444
```
445

446
### Matrix
447

448
2D transformation matrix for scaling, rotation, translation, and skewing.
449

450
```typescript { .api }
451
/**
452
 * 2D transformation matrix
453
 */
454
class Matrix {
455
  constructor(a?: number, b?: number, c?: number, d?: number, tx?: number, ty?: number);
456
  
457
  /** Scale/rotation X component */
458
  a: number;
459
  
460
  /** Skew Y component */
461
  b: number;
462
  
463
  /** Skew X component */
464
  c: number;
465
  
466
  /** Scale/rotation Y component */
467
  d: number;
468
  
469
  /** Translation X */
470
  tx: number;
471
  
472
  /** Translation Y */
473
  ty: number;
474
  
475
  /**
476
   * Clone matrix
477
   * @returns New matrix with same values
478
   */
479
  clone(): Matrix;
480
  
481
  /**
482
   * Set matrix values
483
   * @param a - Scale/rotation X
484
   * @param b - Skew Y
485
   * @param c - Skew X
486
   * @param d - Scale/rotation Y
487
   * @param tx - Translation X
488
   * @param ty - Translation Y
489
   * @returns This matrix
490
   */
491
  set(a: number, b: number, c: number, d: number, tx: number, ty: number): this;
492
  
493
  /**
494
   * Apply matrix to point
495
   * @param pos - Point to transform
496
   * @param newPos - Point to store result
497
   * @returns Transformed point
498
   */
499
  apply(pos: PointData, newPos?: Point): Point;
500
  
501
  /**
502
   * Apply inverse matrix to point
503
   * @param pos - Point to transform
504
   * @param newPos - Point to store result
505
   * @returns Transformed point
506
   */
507
  applyInverse(pos: PointData, newPos?: Point): Point;
508
  
509
  /**
510
   * Translate matrix
511
   * @param x - X translation
512
   * @param y - Y translation
513
   * @returns This matrix
514
   */
515
  translate(x: number, y: number): this;
516
  
517
  /**
518
   * Scale matrix
519
   * @param x - X scale factor
520
   * @param y - Y scale factor
521
   * @returns This matrix
522
   */
523
  scale(x: number, y: number): this;
524
  
525
  /**
526
   * Rotate matrix
527
   * @param angle - Rotation angle in radians
528
   * @returns This matrix
529
   */
530
  rotate(angle: number): this;
531
  
532
  /**
533
   * Append another matrix
534
   * @param matrix - Matrix to append
535
   * @returns This matrix
536
   */
537
  append(matrix: Matrix): this;
538
  
539
  /**
540
   * Prepend another matrix
541
   * @param matrix - Matrix to prepend
542
   * @returns This matrix
543
   */
544
  prepend(matrix: Matrix): this;
545
  
546
  /**
547
   * Invert matrix
548
   * @returns This matrix
549
   */
550
  invert(): this;
551
  
552
  /**
553
   * Reset to identity matrix
554
   * @returns This matrix
555
   */
556
  identity(): this;
557
  
558
  /**
559
   * Copy from another matrix
560
   * @param matrix - Matrix to copy from
561
   * @returns This matrix
562
   */
563
  copyFrom(matrix: Matrix): this;
564
  
565
  /**
566
   * Copy to another matrix
567
   * @param matrix - Matrix to copy to
568
   * @returns Target matrix
569
   */
570
  copyTo(matrix: Matrix): Matrix;
571
  
572
  /** Identity matrix constant */
573
  static readonly IDENTITY: Matrix;
574
  
575
  /** Temporary matrix for calculations */
576
  static readonly TEMP_MATRIX: Matrix;
577
}
578
```
579

580
### Utility Functions
581

582
Mathematical utility functions and constants.
583

584
```typescript { .api }
585
/**
586
 * Check if point is inside triangle
587
 * @param x - Point X
588
 * @param y - Point Y
589
 * @param x1 - Triangle vertex 1 X
590
 * @param y1 - Triangle vertex 1 Y
591
 * @param x2 - Triangle vertex 2 X
592
 * @param y2 - Triangle vertex 2 Y
593
 * @param x3 - Triangle vertex 3 X
594
 * @param y3 - Triangle vertex 3 Y
595
 * @returns True if point is inside triangle
596
 */
597
function pointInTriangle(x: number, y: number, x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): boolean;
598

599
/**
600
 * Calculate squared distance from point to line segment
601
 * @param x - Point X
602
 * @param y - Point Y
603
 * @param x1 - Line start X
604
 * @param y1 - Line start Y
605
 * @param x2 - Line end X
606
 * @param y2 - Line end Y
607
 * @returns Squared distance
608
 */
609
function squaredDistanceToLineSegment(x: number, y: number, x1: number, y1: number, x2: number, y2: number): number;
610

611
/**
612
 * Check if number is power of 2
613
 * @param value - Number to check
614
 * @returns True if power of 2
615
 */
616
function isPow2(value: number): boolean;
617

618
/**
619
 * Get next power of 2
620
 * @param value - Input value
621
 * @returns Next power of 2
622
 */
623
function nextPow2(value: number): number;
624

625
/**
626
 * Mathematical constants
627
 */
628
const PI_2: number; // PI * 2
629
const RAD_TO_DEG: number; // 180 / PI
630
const DEG_TO_RAD: number; // PI / 180
631
```
632

633
**Usage Examples:**
634

635
```typescript
636
import { Point, Rectangle, Circle, Matrix, squaredDistanceToLineSegment } from 'pixi.js';
637

638
// Point operations
639
const point1 = new Point(10, 20);
640
const point2 = new Point(30, 40);
641

642
const distance = point1.magnitude();
643
const normalized = point1.clone().normalize();
644
const dot = point1.dot(point2);
645

646
// Rectangle operations
647
const rect1 = new Rectangle(0, 0, 100, 100);
648
const rect2 = new Rectangle(50, 50, 100, 100);
649

650
const intersects = rect1.intersects(rect2);
651
const intersection = rect1.intersection(rect2);
652
const contains = rect1.contains(75, 75);
653

654
// Circle collision detection
655
const circle = new Circle(50, 50, 25);
656
const pointInCircle = circle.contains(60, 60);
657
const bounds = circle.getBounds();
658

659
// Matrix transformations
660
const matrix = new Matrix();
661
matrix.translate(100, 50);
662
matrix.rotate(Math.PI / 4); // 45 degrees
663
matrix.scale(2, 2);
664

665
// Transform point
666
const originalPoint = new Point(0, 0);
667
const transformedPoint = matrix.apply(originalPoint);
668

669
// Sprite transformation using matrix
670
const sprite = new Sprite(texture);
671
sprite.transform.setFromMatrix(matrix);
672

673
// Observable point for automatic updates
674
const observablePoint = new ObservablePoint(() => {
675
  console.log('Point changed!');
676
}, 0, 0);
677

678
sprite.anchor = observablePoint; // Changes to anchor will trigger callback
679

680
// Collision detection between shapes
681
function checkCollision(sprite1: Sprite, sprite2: Sprite): boolean {
682
  const bounds1 = sprite1.getBounds();
683
  const bounds2 = sprite2.getBounds();
684
  return bounds1.intersects(bounds2);
685
}
686

687
// Custom polygon hit area
688
const triangle = new Polygon([
689
  0, 0,    // Point 1
690
  50, 0,   // Point 2
691
  25, 50   // Point 3
692
]);
693

694
sprite.hitArea = triangle;
695
sprite.interactive = true;
696

697
// Distance calculations
698
const lineStart = new Point(0, 0);
699
const lineEnd = new Point(100, 100);
700
const testPoint = new Point(50, 25);
701

702
const distanceToLine = Math.sqrt(
703
  squaredDistanceToLineSegment(
704
    testPoint.x, testPoint.y,
705
    lineStart.x, lineStart.y,
706
    lineEnd.x, lineEnd.y
707
  )
708
);
709
```