(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.).
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)