paperJS (paper.js) walk through by Brett Paufler - 9-4-13
JavaScript paper.js Tutorial

Other Point Constructors & Simple Point Methods

(It is my intent to work my way through the 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.)

POINT(array), POINT(object), & EQUALS() method

Per TextArea & Canvas below;
These two lines of code creates a paper.Point utilizing the Array Constructor:
var myArray = [100,0];
var myFirstPoint = new paper.Point(myArray);

This line of code creates a paper.Point utilizing the Object Constructor
var mySecondPoint = new paper.Point({ length: 100, angle: 0})

I never use either of these, I find
var myPoint  = new paper.Point(x,y);
to work adequately for my uses.

But I can see how passing a collection or list of Arrays into a Constructor could be useful.  And if I knew more about Json, I might want to utilize the Object Constructor more.  But since I don't have this knowledge, I don't.  (And obviously, the observation is more of a guess than guidance.)  But that saidm, to utilize the basic constructor with an array, I might write:
var samplePointFromArray = new paper.Point(myArray[1], myArray[2];
And yes, I know array's start at 0, but I'm not comfortable with that, so I usually leave myArray[0] blank.
In fact, I've found it useful to jump hundreds of numbers and go from myArray[1] to myArray[101] on the presumption that the performance hit (if it even exists) is meaningless in this day and age.

For example, rather than creating an object, I might manage properties manually, so for instance:
myArray(xx1) might stand for width
myArray(xx2) might stand for height
myArray(xx3) might stand for color
with the different obects stored at 10x, 20x, 30x, etc..

Getting back to the code at hand in the sample below, the equals() method is fairly straightforward (simple, really):
var areTheyTheSame = myFirstPoint.equals(mySecondPoint);
Basically, take one point, use the equals method on it, and pass a second point as an argument.  Truthfully, it's probably overkill to break it out and explain it.  samplePoint.equals(anotherPoint);  seems to be more or less self documenting to me.

And on that premise (self documenting), I will assume you can figure out what's happening with the PointText feedback.
One thing I will note, however, is that the object construction method presuposses one knows the length to the point in question (from the origin).  That's easy enough on (100,0), but I didn't use (100,100) for the example because:
1) Not only did I not want to figure out the length
2) But due to rounding errors, the equals() might not have returned true
So, it would be nice if the equals() method took a second optional arguement that indicated a margin of error.  (Sometimes 1.0000 is functionally the same as 1.0001, even if they aren't 'equal'.)







POINT(size) & POINT(point)

Well, you learn something new everyday.  paper.js has a Size object, which is news to me.  A Size Object looks a lot like a Point Object, but based on the PointText feedback below rather than deliminating an (X,Y) coordinate as per a Point, a Size denotes width by height.  I've never used a Size Object before, but I'm sure there is a Rectangle Constructor out there that uses it.  And yep, there is, just checked:
Rectangle(point, size);
In fact, I'd probably tried using that before and didn't realize that Size refered to an actual JavaScript Object, so I got the syntax all wrong and couldn't get it to work properly.

Below is the code used to construct a Size Object (nothing could be easier); and then, we use that Size to construct a point:
var mySize = new paper.Size(100,0);
var mySizePoint = new paper.Point(mySize);

And here's the code to construct a Point with another Point -- the point in question being the mySizePoint that we just got finished constructing:
var myPointPoint = new paper.Point(mySizePoint);

I think the feedback assignments should be self explanatory at this point.






POINT.CLONE() METHOD

The code in the final example area today does almost nothing.  How's that for enthusiasm?

The action in the order it appears in the code below consists of:
1) mySize is created as a paper.Size Object
2) mySizePoint is created as a paper.Point Object from mySize
3) myPointPoint is created using the Point Constructor using the mySizePoint Point Object as a template
4) then, we actually do something interesting and clone the mySizePoint:
mySizePoint.clone();
clone() is amazingly useful.  I use it far more than Symbols.
5) and finally, the two secondardy Point Objects that we just created are compared with the handy-dandy equals() method:
myPointPoint.equals(myClonedPoint); // in the last line
and believe it or not, they are equal.

So, the Point(point) Constructor and the Point.clone() method to my mind are astonishingly similiar.
It's nice to have more than one way of doing things.  (Your way, my way, and the right way.  Needless to say, I intend on doing things my way, while I expect you'll insist on doing them your way.)




And once again, that's it for today.  I for one learned (TIL) about Size Objects, which is ironic since I was studying Point Objects.  But one thing I'm quickly learning: in these libraries, everything is interelated.

Tommorow, more Point methods.


previous (Points & Angles)          paper.js tutorial index       next (Point to Point 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


© Copyright 2013 Brett Paufler