paperJS (paper.js) walkthrough by Brett Paufler - 8-23-13
Stars, RegularPolygons, & Rectangles

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

STAR - CRAFT (creating a paper.js star)

Once the basic form of a Path is understood (from Circles), creating a star is child's play.

The basic form is:
var centerOfstar = new paper.Point(x, y);
var myStar = new paper.Path.Star(centerOfstar, # of points, outside diameter, inside diameter);

Note: in below, I mispelled the stroke.Color, but rather than hanging, the color defaults to black.

This is a lot more complicated looking than it needs to be.  I included most of the properties below so as to be more complete and for fun in playing with the code.  To simple make a blue star, the minimum code required is:
var centerOfstar = new paper.Point(100,100);
var myStar = new paper.Path.Star(centerOfstar, 10, 50, 5);
myStar.fillColor = 'blue';
(clear everything else and it will run.)

And though this will also work, I don't like it as much:
var myStar = new paper.Path.Star(new paper.Point(100,100), 25, 100, 5);
myStar.fillColor = 'green';
(cut and paste, try it out)






REGULAR POLYGONS

The core part of the code is once again the first three lines:
var CP = new paper.Point(100,100); // CP = centerpoint
var Polly = new paper.Path.RegularPolygon(CP, 5, 100);
Polly.fillColor = 'blue';
Polly.strokeColor = 'blue';
Either the fillColor or strokeColor needs to be initialized or the property will default to Null and therefore invisible.

If the RegularPolygon constructor is replaced with a Star constructor, I think the effect is kind of interesting.  I had forgotten to change this at first, and so, thought I had not passed enough arguments to the RegularPolygon constructor.
var Polly = new paper.Path.Star(CP, 5, 100);

For the dashArray, the first variable is the length of dash visible, followed by the length of the blank dash part
Polyy.dashArray = [dashPartSeen, dashPartNotSeen];
So, a Zero for the first argument yields an invisible line, while a zero in the second yields a solid line.



 



RECTANGLES

Once again, the first few lines of the code are key:
var P1 = new paper.Point(50,50);
var P2 = new paper.Point(200,100);
var myRect = new paper.Path.Rectangle(P1, P2);
myRect.fillColor = 'teal';
myRect.strokeColor = 'purple';

There are all sorts of way of making a Rectangle, but for static pictures, two points, connected to make a rectangle seems to be the most straightforward to me.

I don't know how to smooth out the corners.  In theory, the strokeJoin property is supposed to control that, but it doesn't do me any good.
myRect.strokeJoin = 'round';  // 'miter' & 'bevel' being the other two choices.

The only time I've ever used rectangles was to make 'bullets' for a game, and that because I couldn't get a point to draw onto the screen (a point having no dimension, I'm guessing.)




Needless to say, I'm displeased with the way the rectangle looks, but when using the default paper.js  Rectangle constructor, I don't know how to change it -- except for by saying only using fillColor and not strokeColor and.or utilizing two separate Rectangles if that's the sort of effect I want.  But that seems like a inefficient work around.  Anyway, a few more basic objects to go, and then it's off to points, paths, and self-constructed shapes (user defined).

NOTE: Figured it out, to get the edges of the rectangle to look right, simple remove the dashArray line of code or comment it out:
// myRect.dashArray = [1,0];
Sometimes, it's the little things that make all the difference.

previous (Circles)          paper.js tutorial index       next (Ellipse, Line, Arcs)

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