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