PixiJS API Documentation

Class: ObservablePoint

ObservablePoint

The ObservablePoint object represents a location in a two-dimensional coordinate system, where x represents the position on the horizontal axis and y represents the position on the vertical axis.

An ObservablePoint is a point that triggers the onUpdate method on an observer when the point's position is changed.

new ObservablePoint (observer, x, y)

ts:34

Creates a new ObservablePoint

Name	Type	Attributes	Default	Description
`observer`	Observer<ObservablePoint>			Observer to pass to listen for change events.
`x`	number	<optional>	0	position of the point on the x axis
`y`	number	<optional>	0	position of the point on the y axis

Implements

PointLike

Members

x number

Position of the observable point on the x axis.

y number

Position of the observable point on the y axis.

Methods

add (other, outPoint) PointData

ts:17

Adds other to this point and outputs into outPoint or a new Point.

Note: Only available with pixi.js/math-extras.

Name	Type	Attributes	Description
`other`	PointData		The point to add to `this`.
`outPoint`	PointData	<optional>	A Point-like object in which to store the value, optional (otherwise will create a new Point).

Returns:

Type	Description
PointData	The `outPoint` reference or a new Point, with the result of the addition.

clone (observer) ObservablePoint

ts:48

Creates a clone of this point.

Name	Type	Attributes	Description
`observer`	Observer<ObservablePoint>	<optional>	Optional observer to pass to the new observable point.

Returns:

Type	Description
ObservablePoint	a copy of this observable point

copyFrom (p) this

ts:77

Copies x and y from the given point (p)

Name	Type	Description
`p`	PointData	The point to copy from. Can be any of type that is or extends `PointData`

Returns:

Type	Description
this	The observable point instance itself

copyTo (p) T

ts:94

Copies this point's x and y into that of the given point (p)

Name	Type	Description
`p`	T	The point to copy to. Can be any of type that is or extends `PointData`

Returns:

Type	Description
T	The point (`p`) with values updated

cross (other) number

ts:182

Computes the cross product of other with this point. Given two linearly independent R3 vectors a and b, the cross product, a × b (read "a cross b"), is a vector that is perpendicular to both a and b, and thus normal to the plane containing them. While cross product only exists on 3D space, we can assume the z component of 2D to be zero and the result becomes a vector that will only have magnitude on the z axis.

This function returns the z component of the cross product of the two points.

Note: Only available with pixi.js/math-extras.

Name	Type	Description
`other`	PointData	The other point to calculate the cross product with `this`.

Returns:

Type	Description
number	The z component of the result of the cross product.

dot (other) number

ts:152

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.

Note: Only available with pixi.js/math-extras.

Name	Type	Description
`other`	PointData	The other point to calculate the dot product with `this`.

Returns:

Type	Description
number	The result of the dot product. This is an scalar value.

equals (p) boolean

ts:106

Accepts another point (p) and returns true if the given point is equal to this point

Name	Type	Description
`p`	PointData	The point to check

Returns:

Type	Description
boolean	Returns `true` if both `x` and `y` are equal

magnitude () number

ts:259

Computes the magnitude of this point (Euclidean distance from 0, 0).

Defined as the square root of the sum of the squares of each component.

Note: Only available with pixi.js/math-extras.

Returns:

Type	Description
number	The magnitude (length) of the vector.

magnitudeSquared () number

ts:286

Computes the square magnitude of this point. If you are comparing the lengths of vectors, you should compare the length squared instead as it is slightly more efficient to calculate.

Defined as the sum of the squares of each component.

Note: Only available with pixi.js/math-extras.

Returns:

Type	Description
number	The magnitude squared (length squared) of the vector.

multiply (other, outPoint) PointData

ts:85

Multiplies component-wise other and this points and outputs into outPoint or a new Point.

Note: Only available with pixi.js/math-extras.

Name	Type	Attributes	Description
`other`	PointData		The point to multiply with `this`.
`outPoint`	PointData	<optional>	A Point-like object in which to store the value, optional (otherwise will create a new Point).

Returns:

Type	Description
PointData	The `outPoint` reference or a new Point, with the component-wise multiplication.

multiplyScalar (scalar, outPoint) PointData

ts:119

Multiplies each component of this point with the number scalar and outputs into outPoint or a new Point.

Note: Only available with pixi.js/math-extras.

Name	Type	Attributes	Description
`scalar`	number		The number to multiply both components of `this`.
`outPoint`	PointData	<optional>	A Point-like object in which to store the value, optional (otherwise will create a new Point).

Returns:

Type	Description
PointData	The `outPoint` reference or a new Point, with the multiplication.

normalize (outPoint) PointData

ts:223

Computes a normalized version of this point.

A normalized vector is a vector of magnitude (length) 1

Note: Only available with pixi.js/math-extras.

Name	Type	Attributes	Description
`outPoint`	PointData	<optional>	A Point-like object in which to store the value, optional (otherwise will create a new Point).

Returns:

Type	Description
PointData	The normalized point.

project (onto, outPoint) PointData

ts:318

Computes vector projection of this on onto.

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 .

Note: Only available with pixi.js/math-extras.

Name	Type	Attributes	Description
`onto`	PointData		A non zero vector describing a line on which to project `this`.
`outPoint`	PointData	<optional>	A Point-like object in which to store the value, optional (otherwise will create a new Point).

Returns:

Type	Description
PointData	The `this` on `onto` projection.

reflect (normal, outPoint) PointData

ts:364

Reflects this vector off of a plane orthogonal to normal. normal is not normalized during this process. Consider normalizing your normal before use.

Imagine a light source bouncing onto a mirror. 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.

Note: Only available with pixi.js/math-extras.

Name	Type	Attributes	Description
`normal`	PointData		The normal vector of your reflecting plane.
`outPoint`	PointData	<optional>	A Point-like object in which to store the value, optional (otherwise will create a new Point).

Returns:

Type	Description
PointData	The reflection of `this` on your reflecting plane.

set (x, y) this

ts:58

Sets the point to a new x and y position. If y is omitted, both x and y will be set to x.

Name	Type	Attributes	Default	Description
`x`	number	<optional>	0	position of the point on the x axis
`y`	number	<optional>	x	position of the point on the y axis

Returns:

Type	Description
this	The observable point instance itself

subtract (other, outPoint) PointData

ts:51

Subtracts other from this point and outputs into outPoint or a new Point.

Note: Only available with pixi.js/math-extras.

Name	Type	Attributes	Description
`other`	PointData		The point to subtract to `this`.
`outPoint`	PointData	<optional>	A Point-like object in which to store the value, optional (otherwise will create a new Point).

Returns:

Type	Description
PointData	The `outPoint` reference or a new Point, with the result of the subtraction.