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

We'll see how that goes.


previous  (simple point methods)        paper.js tutorial index       next (Full Canvas Sandbox Creation)


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