paperJS (paper.js) walkthrough by Brett Paufler - 9-3-13
Points & Angles

(It is my intent to work my way through the JavaScript paper.js library.  If this page doesn't cover the aspect of paper.js that you are interested in, please see complete index of my paper.js tutorials completed thus far.)

POINTS AND THEIR BASIC PROPERTIES

Points are easy enough to construct; so easy, we've already constructed quite a few of them and I've never felt the need to dedicate a page to the process before.  It just takes the one line of code:
var ThisPoint = new paper.Point(100,100);

Points don't have any dimensions and no color, stroke, or fill properties, so it's news to me if they can be seen directly.
(When I wanted to make "bullets" for a game, I used 1x1x1x1 rectangles instead.)
None the less, paper.Point is one of the basic building blocks of paper.js.  And we've used loads of them, so far.

In the canvas below, I use the three feedback PointText areas to provide information on the:
ThisPoint object
ThisPoint's x position
ThisPoint's y position

MORE POINT PROPERTIES

Same point as before, writing this constructor will become second nature if you do any amount of programming in paper.js:
var ThisPoint = new paper.Point(100,100);

And then for feedback, we have:
ThisPoint the object
ThisPoint's angle  -- this is the angle from the X-axis to the point, going clockwise
And finally, ThisPoint's angle in radians -- as if regular degrees wasn't complicated enough

If the last two feedback lines are uncommented:
ThisPoint.quadrant; let's you know which quadrant the point is located in.  (Note, even though the point is located below the X-axis, paper.js counts quadrants backwards -- in my humble opinion -- so the quadrant is 1.
ThisPoint.selected; is undefined and will remain undefined unless the point is added to a Path, and then the selected property takes on the 'selected' property of the Path, which is either true or false.

Lastly, I added a blue circle, so we can all see the point on the screen.
Note, that the origin (0,0) is at the top left of the canvas.  The Y-axis is counted backwards from how it typically figured in algebra or when utilizing Cartesian coordinates.  So, rather than being above the X-axis, point (100, 100) is below the X-axis.

FUN WITH POINTS

In my opinion, that pretty much covers the basics of points.  But just because it's easy to explain doesn't mean it's easy to understand.  Personally, on account of the backwards coordinate system, I have a hard time getting the angles and such straight.  And to that end, this last section is designed to be more of a sandbox for the angle property of various point positions.

Remember, the angle is the difference between the X-axis to an imaginary line drawn to the point in question from the origin Point(0,0), rotating clockwise from the X-axis (maybe I'll work up a demo of that in a few days and/or lessons).

If you think you've got it, it's probably a waste of time to delve into this much further.
If not, change the variables for ThisPoint around as much as you want to see how that affects the angle and quadrant properties.

I've only shown one of the Point constructors in paper.js (the only one I've ever used).  But there are four other constructors available, so exploring those along with some of the simpler Point Methods is next on the drawing board.

And then, the more complex methods, of course.  But likely, we'll have to come back to points again after covering some of the more complex objects as points pretty much interweave with most everything else in paper.js (Circles, Rectangles, custom Paths, etc.).

previous -- PointText feedback          paper.js tutorial index       next -- Points Simple Methods

Back to BrettCode Home

Brett Words
my writing site (Home to the writing of Celli the Happy Go Lucky Celaphopod, Eddie Takosori, Fritz Heinmillerstein, Morgan Feldstone, Kevin Stillwater, and of course, me, your host, Brett Paufler)

paper.js official site = http://www.paperJS.org