Point, Size and Rectangle

In Paper.js, basic types such as Point, Size and Rectangle are objects that describe geometric attributes of graphical items. They are an abstract representation of geometric values such as location and dimension, but do not directly represent a graphical item within a project.

Please note:

Graphical items in a Paper.js project are items that appear in the layer list and visually in the project. An analogy can be drawn to 'physical' items in the real world. To describe their location and dimension, Paper.js deploys different basic types, which are merely containers for numeric values that describe their geometric qualities.

This means that when we create a Point object in code, we are in fact only creating a description of a location in the view, but we are not creating a path item that contains this point as a segment:

In order to create a path item that contains this point as a segment, we would need to explicitly use the new Path() constructor to create a path and add the point as a first segment to it. The Working with Path Items tutorial describes paths and segments in more detail.

var myPath = new Path();
myPath.add(myPoint);

Running this script would produce a 'physical' path item in the Paper.js project with one segment at the location of myPoint.

Please note:

Again, the 'physically' appearing segment of myPath and the point called myPoint are not the same. myPoint is simply describing the coordinates that were used to produce the first segment of myPath. Modifying myPoint would not change that segment after it was created.

The Point object describes a two dimensional location. It has two properties x and y, representing the x and y coordinate of the location.

Point objects can be created either by directly providing the coordinates for x and y or by omitting them, in which case they are initialized with 0. The x and y coordinate properties can be accessed and changed separately too.

Here we are creating a new point without providing values for x and y, and then change the values after. The console.log() function is used to log the resulting values to the console.

Please note:

All basic types in Paper.js offer such a copying constructor. An easier way of making copies of objects in order to avoid modifying variables references is by calling the clone() function on any object:

The Point object offers an alternative numeric way of describing the location, in opposition to the cartesian coordinate x, y: The properties angle and length, which describe the location in the polar coordinate system, defined by the distance (length) and angle to the coordinate sytstem's origin.

The Size object describes abstract dimensions in two dimensional space. It has two properties width and height, representing the width and height values of the size.

Just like with Point objects, Size objects can be created either by directly providing the values for width and height or by omitting them, in which case they are initialized with 0. The width and height properties can be accessed and changed separately too. As an example, the same steps from the Point object are executed with a Size object here. Anything that was said about the Point object applies to the Size object too, the only difference being the different property names.

The Rectangle object can be described as the combination of a Point object and a Size object, describing both a two dimensional location and a size. Therefore it posseses the four properties x, y, width and height. The properties x and y describe the coordinates of the top left point of the rectangle, width and height describe its dimensions. Additionally, it also defines the point and size properties, giving access to these values in form of Point and Size objects.

Rectangle objects can be created in a multitude of ways. One possibility is to pass a Point and a Size object to the new Rectangle(point, size) constructor:

A third possibility is to use the new Rectangle(point1, point2) constructor, which receives two corner points of the Rectangle object. These do not necessarily need to be the top left and bottom right corners, the constructor figures out how to fit a rectangle between them: