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