paperJS (paper.js) walkthrough by Brett Paufler - 8-28-13
pathObject.add();
pathObject.join();
Adding additional segments to a paper.Path through .add() & .join()
(It is my intent to work my way through the paper.js library, if 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)
.add()
Two points together make a line. Adding a new point to said line
is simplicity itself, the structure of the command being: pathLineObject.add(newPoint);
.add() continued
Now, I would have thought that the add() method would connect two
lines, but it doesn't (we need join() for that).
Still, one can try and check out the results. Personally, I can't
tell you what's happening. And I'm not entirely sure how I feel
about it simply not rejecting a line as an input argument as an error. But all the
same, paste this to the bottom of the textarea to see what happens: topLine.add(bottomLine);
To add the two lines together, as I initially intended, comment out the
last two lines of code (or simply delete from the textarea): //var bottomLine = new
paper.Path.Line(P3, P4); //bottomLine.strokeColor = 'red';
And then insert this line (or any combination of additional points as
you desire): topLine.add(P3, P4, P1);
The last can also be achieved by: topLine.add(P3, P4); topLine.closePath();
.join()
As stated previously, when joining two paths (lines or presumably other shapes) together, rather than
adding a point, we need to join the paths.
Starting with the same two parallel lines as before, if the following
lines of code are cut and pasted into the textarea box, the first line
of code joins the two drawn path lines together (note how the color of the second
path is lost), and the second line of code closes the path off
(connects the last Point to the first Point) : topLine.join(bottomLine); topLine.closePath();
I've never used either of these methods before, but I had been trying
to make a 'treeGrowth' program a while back and I can definitely see
how adding lines or segments to an existing path would be the way to go
for something like that.
Next up is the PointText constructor:
paper.Path.PointText(new Point(x, y));
Which as much as anything else, I use to for debugging, it being an
ideal way to extract State Conditions from paper.js Objects.
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)