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.




previous (Ellipse, Line, Arc)          paper.js tutorial index       next (PointText)

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