Creates a new ObservablePoint
Observer to pass to listen for change events.
Optional
x: numberposition of the point on the x axis
Optional
y: numberposition of the point on the y axis
X coordinate
Y coordinate
Adds other
to this
point and outputs into outPoint
or a new Point.
Only available with pixi.js/math-extras.
The outPoint or a new Point with addition result
// Basic point addition
const point = new Point(10, 20);
const other = new Point(5, 10);
const result = point.add(other);
console.log(result); // Point(15, 30)
// Using output point for efficiency
const output = new Point();
point.add(other, output);
console.log(output); // Point(15, 30)
// Chain multiple additions
const final = point.add(other).add(new Point(2, 3));
Creates a clone of this point.
Optional
observer: Observer<ObservablePoint>Optional observer to pass to the new observable point
A copy of this observable point
// Basic cloning
const point = new ObservablePoint(observer, 100, 200);
const copy = point.clone();
// Clone with new observer
const newObserver = {
_onUpdate: (p) => console.log(`Clone updated: (${p.x}, ${p.y})`)
};
const watched = point.clone(newObserver);
// Verify independence
watched.set(300, 400); // Only triggers new observer
Copies x and y from the given point into this point.
The point to copy from
The point instance itself
// Basic copying
const source = new ObservablePoint(observer, 100, 200);
const target = new ObservablePoint();
target.copyFrom(source);
// Copy and chain operations
const point = new ObservablePoint()
.copyFrom(source)
.set(x + 50, y + 50);
// Copy from any PointData
const data = { x: 10, y: 20 };
point.copyFrom(data);
Copies this point's x and y into the given point.
The point to copy to. Can be any type that is or extends PointLike
The point (p
) with values updated
// Basic copying
const source = new ObservablePoint(100, 200);
const target = new ObservablePoint();
source.copyTo(target);
Computes the cross product of other
with this
point.
Returns the z-component of the 3D cross product, assuming z=0 for both vectors.
Only available with pixi.js/math-extras.
The other point to calculate the cross product with
The z-component of the cross product
// Basic cross product
const v1 = new Point(2, 3);
const v2 = new Point(4, 5);
const result = v1.cross(v2); // 2*5 - 3*4 = -2
// Check if vectors are parallel
const isParallel = v1.cross(v2) === 0;
// Get signed area of parallelogram
const area = Math.abs(v1.cross(v2));
Computes the dot product of other
with this
point.
The dot product is the sum of the products of the corresponding components of two vectors.
Only available with pixi.js/math-extras.
The other point to calculate the dot product with
The scalar result of the dot product
// Basic dot product
const v1 = new Point(2, 3);
const v2 = new Point(4, 5);
const result = v1.dot(v2); // 2*4 + 3*5 = 23
// Check if vectors are perpendicular
const isOrthogonal = v1.dot(v2) === 0;
// Get angle between vectors
const cosTheta = v1.dot(v2) / (v1.magnitude() * v2.magnitude());
Checks if another point is equal to this point.
Compares x and y values using strict equality.
The point to check
true
if both x
and y
are equal
// Basic equality check
const p1 = new ObservablePoint(100, 200);
const p2 = new ObservablePoint(100, 200);
console.log(p1.equals(p2)); // true
// Compare with PointData
const data = { x: 100, y: 200 };
console.log(p1.equals(data)); // true
// Check different points
const p3 = new ObservablePoint(200, 300);
console.log(p1.equals(p3)); // false
Computes the magnitude (length) of this point as Euclidean distance from origin.
Defined as the square root of the sum of the squares of each component.
Only available with pixi.js/math-extras.
The magnitude (length) of the vector
// Basic length calculation
const vector = new Point(3, 4);
console.log(vector.magnitude()); // 5
// Check if unit vector
const isUnit = Math.abs(vector.magnitude() - 1) < 0.0001;
// Compare vector lengths
const longer = v1.magnitude() > v2.magnitude();
Computes the squared magnitude of this point. More efficient than magnitude() for length comparisons.
Defined as the sum of the squares of each component.
Only available with pixi.js/math-extras.
The squared magnitude of the vector
// Efficient length comparison
const v1 = new Point(3, 4);
const v2 = new Point(1, 2);
// Better than: v1.magnitude() > v2.magnitude()
const longer = v1.magnitudeSquared() > v2.magnitudeSquared();
// Check if vector is longer than 5 units
const isLong = v1.magnitudeSquared() > 25; // 5 * 5
Multiplies component-wise other
and this
points and outputs into outPoint
or a new Point.
Only available with pixi.js/math-extras.
The outPoint or a new Point with multiplication result
// Basic point multiplication
const point = new Point(10, 20);
const other = new Point(2, 3);
const result = point.multiply(other);
console.log(result); // Point(20, 60)
// Using output point for efficiency
const output = new Point();
point.multiply(other, output);
console.log(output); // Point(20, 60)
// Chain multiple operations
const final = point.multiply(other).add(new Point(5, 5));
Multiplies each component of this
point with the number scalar
and outputs into outPoint
or a new Point.
Only available with pixi.js/math-extras.
The number to multiply both components with
Optional
outPoint: TOptional Point-like object to store result
The outPoint or a new Point with multiplication result
// Basic scalar multiplication
const point = new Point(10, 20);
const result = point.multiplyScalar(2);
console.log(result); // Point(20, 40)
// Using output point for efficiency
const output = new Point();
point.multiplyScalar(0.5, output);
console.log(output); // Point(5, 10)
// Chain with other operations
const final = point.multiplyScalar(2).add(new Point(5, 5));
Computes a normalized version of this
point.
A normalized vector is a vector of magnitude (length) 1
Only available with pixi.js/math-extras.
Optional
outPoint: TOptional Point-like object to store result
The normalized point
// Basic normalization
const vector = new Point(3, 4);
const normalized = vector.normalize();
console.log(normalized.magnitude()); // 1
// Using output point
const out = new Point();
vector.normalize(out);
// Chain with other operations
const scaled = vector.normalize().multiplyScalar(5);
Computes vector projection of this
on onto
.
Projects one vector onto another, creating a parallel vector with the length of the projection.
Imagine a light source, parallel to onto
, above this
.
The light would cast rays perpendicular to onto
.
this.project(onto)
is the shadow cast by this
on the line defined by onto
.
Only available with pixi.js/math-extras.
The projection of this
onto onto
onto
vectorReflects this
vector off of a plane orthogonal to normal
.
Like a light ray bouncing off a mirror surface.
this
vector is the light and normal
is a vector perpendicular to the mirror.
this.reflect(normal)
is the reflection of this
on that mirror.
Only available with pixi.js/math-extras.
The reflection of this
off the plane
// Basic reflection
const ray = new Point(1, 1);
const surfaceNormal = new Point(0, 1).normalize();
const reflection = ray.reflect(surfaceNormal);
// Using output point
const out = new Point();
ray.reflect(surfaceNormal, out);
// Reflect off angled surface
const slope = new Point(1, 1).normalize();
const bounced = ray.reflect(slope);
Sets the point to a new x and y position.
If y is omitted, both x and y will be set to x.
Position on the x axis
Position on the y axis, defaults to x
The point instance itself
// Basic position setting
const point = new ObservablePoint(observer);
point.set(100, 200);
// Set both x and y to same value
point.set(50); // x=50, y=50
Subtracts other
from this
point and outputs into outPoint
or a new Point.
Only available with pixi.js/math-extras.
The outPoint or a new Point with subtraction result
// Basic point subtraction
const point = new Point(10, 20);
const other = new Point(5, 10);
const result = point.subtract(other);
console.log(result); // Point(5, 10)
// Using output point for efficiency
const output = new Point();
point.subtract(other, output);
console.log(output); // Point(5, 10)
// Chain multiple subtractions
const final = point.subtract(other).subtract(new Point(2, 3));
Returns a string representation of an object.
The ObservablePoint object represents a location in a two-dimensional coordinate system. Triggers a callback when its position changes.
The x and y properties represent the position on the horizontal and vertical axes, respectively.
Example
See