The Point object represents a point in the two dimensional space of the Paper.js project. It is also used to represent two dimensional vector objects.
Example — Create a point at x: 10, y: 5
var point = new Point(10, 5);
1
2
3
var point = new Point(10, 5);
console.log(point.x); // 10
console.log(point.y); // 5
Creates a Point object with the given x and y coordinates.
Example — Create a point at x: 10, y: 5
var point = new Point(10, 5);
1
2
3
var point = new Point(10, 5);
console.log(point.x); // 10
console.log(point.y); // 5
Creates a Point object using the numbers in the given array as coordinates.
Example — Creating a point at x: 10, y: 5 using an array of numbers:
var point = new Point(array);
1
2
3
4
var array = [10, 5];
var point = new Point(array);
console.log(point.x); // 10
console.log(point.y); // 5
Example — Passing an array to a functionality that expects a point:
var path = new Path.Circle(new Point(50, 50), 30);
1
2
3
4
5
6
// Create a circle shaped path at x: 50, y: 50
// with a radius of 30:
var path = new Path.Circle([50, 50], 30);
path.fillColor = 'red';
// Which is the same as doing:
Creates a Point object using the properties in the given object.
Example — Creating a point using an object literal with length and angle properties:
console.log(point.length); // 10
1
2
3
4
5
6
var point = new Point({
length: 10,
angle: 90
});
console.log(point.length); // 10
console.log(point.angle); // 90
Example — Creating a point at x: 10, y: 20 using an object literal:
console.log(point.x); // 10
1
2
3
4
5
6
var point = new Point({
x: 10,
y: 20
});
console.log(point.x); // 10
console.log(point.y); // 20
Example — Passing an object to a functionality that expects a point:
// Creates a circle shaped path at x: 50, y: 50
1
2
3
4
5
6
var center = {
x: 50,
y: 50
};
// Creates a circle shaped path at x: 50, y: 50
Creates a Point object using the width and height values of the given Size object.
Example — Creating a point using a size object.
// Create a Size with a width of 100pt and a height of 50pt
1
2
3
4
5
// Create a Size with a width of 100pt and a height of 50pt
var size = new Size(100, 50);
console.log(size); // { width: 100, height: 50 }
var point = new Point(size);
console.log(point); // { x: 100, y: 50 }
Creates a Point object using the coordinates of the given Point object.
Returns the addition of the supplied value to both coordinates of the point as a new point.
The object itself is not modified!
Example
console.log(result); // {x: 25, y: 30}
1
2
3
var point = new Point(5, 10);
var result = point + 20;
console.log(result); // {x: 25, y: 30}
Returns the addition of the supplied point to the point as a new point.
The object itself is not modified!
Example
console.log(result); // {x: 15, y: 30}
1
2
3
4
var point1 = new Point(5, 10);
var point2 = new Point(10, 20);
var result = point1 + point2;
console.log(result); // {x: 15, y: 30}
Returns the subtraction of the supplied value to both coordinates of the point as a new point.
The object itself is not modified!
Example
console.log(result); // {x: 5, y: 15}
1
2
3
var point = new Point(10, 20);
var result = point - 5;
console.log(result); // {x: 5, y: 15}
Returns the subtraction of the supplied point to the point as a new point.
The object itself is not modified!
Example
var result = firstPoint - secondPoint;
1
2
3
4
var firstPoint = new Point(10, 20);
var secondPoint = new Point(5, 5);
var result = firstPoint - secondPoint;
console.log(result); // {x: 5, y: 15}
Returns the multiplication of the supplied value to both coordinates of the point as a new point.
The object itself is not modified!
Example
console.log(result); // {x: 20, y: 40}
1
2
3
var point = new Point(10, 20);
var result = point * 2;
console.log(result); // {x: 20, y: 40}
Returns the multiplication of the supplied point to the point as a new point.
The object itself is not modified!
Example
var result = firstPoint * secondPoint;
1
2
3
4
var firstPoint = new Point(5, 10);
var secondPoint = new Point(4, 2);
var result = firstPoint * secondPoint;
console.log(result); // {x: 20, y: 20}
Returns the division of the supplied value to both coordinates of the point as a new point.
The object itself is not modified!
Example
console.log(result); // {x: 5, y: 10}
1
2
3
var point = new Point(10, 20);
var result = point / 2;
console.log(result); // {x: 5, y: 10}
Returns the division of the supplied point to the point as a new point.
The object itself is not modified!
Example
var result = firstPoint / secondPoint;
1
2
3
4
var firstPoint = new Point(8, 10);
var secondPoint = new Point(2, 5);
var result = firstPoint / secondPoint;
console.log(result); // {x: 4, y: 2}
The modulo operator returns the integer remainders of dividing the point by the supplied value as a new point.
Example
console.log(point % 5); // {x: 2, y: 1}
1
2
var point = new Point(12, 6);
console.log(point % 5); // {x: 2, y: 1}
The modulo operator returns the integer remainders of dividing the point by the supplied value as a new point.
Example
console.log(point % new Point(5, 2)); // {x: 2, y: 0}
1
2
var point = new Point(12, 6);
console.log(point % new Point(5, 2)); // {x: 2, y: 0}
Checks whether the coordinates of the point are equal to that of the supplied point.
Example
console.log(point == new Point(5, 10)); // true
1
2
3
4
var point = new Point(5, 10);
console.log(point == new Point(5, 10)); // true
console.log(point == new Point(1, 1)); // false
console.log(point != new Point(1, 1)); // true
The length of the vector that is represented by this point's coordinates.
Each point can be interpreted as a vector that points from the origin (x = 0, y = 0) to the point's location.
Setting the length changes the location but keeps the vector's angle.
The vector's angle in degrees, measured from the x-axis to the vector.
The angle is unsigned, no information about rotational direction is given.
The vector's angle in radians, measured from the x-axis to the vector.
The angle is unsigned, no information about rotational direction is given.
The quadrant of the angle of the point.
Angles between 0 and 90 degrees are in quadrant 1. Angles between 90 and 180 degrees are in quadrant 2, angles between 180 and 270 degrees are in quadrant 3 and angles between 270 and 360 degrees are in quadrant 4.
Example
console.log(point.quadrant); // 1
1
2
3
4
5
6
var point = new Point({
angle: 10,
length: 20
});
console.log(point.quadrant); // 1
Returns the distance between the point and another point.
Normalize modifies the length of the vector to 1 without changing its angle and returns it as a new point. The optional length parameter defines the length to normalize to.
The object itself is not modified!
Returns the smaller angle between two vectors. The angle is unsigned, no information about rotational direction is given.
Returns the smaller angle between two vectors in radians. The angle is unsigned, no information about rotational direction is given.
Rotates the point by the given angle around an optional center point.
The object itself is not modified.
Read more about angle units and orientation in the description of the angle property.
Checks whether the point is inside the boundaries of the rectangle.
Checks if the point is within a given distance of another point.
Checks if the vector represented by this point is colinear (parallel) to another vector.
Checks if the vector represented by this point is orthogonal (perpendicular) to another vector.
Checks if this point has both the x and y coordinate set to 0.
Checks if this point has an undefined value for at least one of its coordinates.
Returns the dot product of the point and another point.
Returns the cross product of the point and another point.
Returns a new point with the nearest greater non-fractional values to the specified x and y values. The object itself is not modified!
Example
console.log(ceilPoint); // {x: 11, y: 11}
1
2
3
var point = new Point(10.2, 10.9);
var ceilPoint = point.ceil();
console.log(ceilPoint); // {x: 11, y: 11}
Returns a new point with the nearest smaller non-fractional values to the specified x and y values. The object itself is not modified!
Example
console.log(floorPoint); // {x: 10, y: 10}
1
2
3
var point = new Point(10.2, 10.9);
var floorPoint = point.floor();
console.log(floorPoint); // {x: 10, y: 10}
Returns a new point object with the smallest x and y of the supplied points.
Example
var minPoint = Point.min(point1, point2);
1
2
3
4
var point1 = new Point(10, 100);
var point2 = new Point(200, 5);
var minPoint = Point.min(point1, point2);
console.log(minPoint); // {x: 10, y: 5}
Returns a new point object with the largest x and y of the supplied points.
Example
console.log(maxPoint); // {x: 200, y: 100}
1
2
3
4
var point1 = new Point(10, 100);
var point2 = new Point(200, 5);
var maxPoint = Point.max(point1, point2);
console.log(maxPoint); // {x: 200, y: 100}
Returns a point object with random x and y values between 0 and 1.
Example
// A point between {x:0, y:0} and {x:100, y:100}:
1
2
3
4
5
var maxPoint = new Point(100, 100);
var randomPoint = Point.random();
// A point between {x:0, y:0} and {x:100, y:100}:
var point = maxPoint * randomPoint;
Copyright © 2011 Jürg Lehni & Jonathan Puckey. All Rights Reserved.