paperJS (paper.js) JavaScript Library walk through by Brett Paufler -
9-5-13
JavaScript Tutorial & paper.js primer
TOSTRING(), GETDISTANCE(),
????
(It is my intent to work my way through the JavaScript paper.js library. If this page
doesn't cover the aspect of JavaScript's paper.js that you are
interested in, please
see complete index of my paper.js
tutorials completed thus far.)
TOSTRING() & GETDISTANCE()
I am of the opinion that the below code is very self documenting at
this point. We create the points, which I'm not going to belabor
and assume you understand.
So, the only thing new is the toString() & getDistance() methods.
In this example (and as shown in the PointText feedback), toString does
little in this instance, but if one were to export the Point Object
into the DOM or regular Javascript, this could be helpful.
However, since I have found that paper.js does not work well with other
components (say for instance if this page were animated with onFrame(),
the event handlers for the buttons -- the onClick() methods -- would grind into each
other. Don't really know how to explain it better (since I don't
really know what's going on); but suffice to say, it has been my
experience that standard buttons and paper.js animations don't
mix. And then, I use the paper.js internal PointText for
feedback, so I don't have much reason to export a string of a paper.js
object in the first place. But if you do, the toString() is the method you want.
To my mind, the getDistance() method has far more obvious
applications (the distance between two points, just as a for instance)
and is simple to call: var thisResult = firstPointObject.getDistance(toYourSecondPointObject);
Or if that's overly complicated: point.getDistance(secondPoint);
Though, truthfully, one of the hardest things for me to wrap my mind
around when just start to learn to code (in JavaScript or any language)
was the difference between an object, it's constructor,
an object's property, and/or an object's method -- and naming an
instance of an Object with the same name provided absolutely no clarity
to me. var point = new Point(x,y);
or var object = new Object();
I found (and still find) confusing because point & Point (or object and Object) are so similiar. var yourPointObject = new Point(x,y) is just way more clear to me.
or even better: var thisInstanceOfAnObject = new ObjectConstruction();
The first PointText (FBText1) utilizes the toString() method.
The Second PointText (FBText2) utilizes the getDistance() method.
NORMALIZE()
I use normalize a lot. It essentially 'normalizes' the
unit length of the Point Object in question to a length of '1' as
measured from the Origin = Point(0,0).
In the code below, we create a blue circle with it's center at
(100,100), normalize the center point (which is myPoint in this
example), and then create a red circle located at the now normalized
myPoint (which is 1 away from the origin, by definition).
Also note: I started caconating additional values onto the
PointText feedback area's, so it should be clearer what they refer to
from here on out. (Also, I might bring reverse the order between
my comments and the code sample area in future posts, but obviously I
haven't done that yet.)
ROTATE()
The rotate() method dwells in a corner of my mind where things sort of go
fuzzy. Sure, this this method in itself is simple, a Point Object at (100,100) is
rotated 45 degrees so that the Point Object is now at (0, 141) or so.
Or another way to look at it is: myPoint.angle = 45; // blue dot
myPoint.angle += 45; // is the same as myPoint = myPoint.rotate(45); myPoint.angle == 90; // true, red dot
But even if rotate() itself is simple enough, actually doing anything
with it, requires a bit more mental gymnastics, and flipping the Y
origin upside down (as the canvas element does) doesn't help me any. Still, rotate itself is
as simple as can be, it rotates the Point Object in question about the
origin, or any other center passed in as an optional Point Object parameter rotate(angle [,point])
I believe is the formal way to call that out.
And I think it's time for a bigger sandbox (something interactive), so
next, I believe I will set up a default onFrame() webpage to utilize
for such contingencies (i.e. no textarea, no buttons, just a paper.js
interactive environment with comments to appear below a fullscreen
canvas).
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)