paperJS (paper.js) walkthrough by Brett Paufler - 8-23-13
paper.Path.Circle(new Point(x,y), diameter)

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

paper.Path.Circle(new Point(x,y), diameter)

Drawing a circle was the first thing I learned in paper.js.
Per code in TextArea below, it's possible to create the new Point() & new Path.Circle() on the same line -- call a new point from within the circle constructor, but I tend to get better results separating them out.

Default color is black.  In below, if the 'black' in strokeColor is spelled wrong, left blank, or some random text is inserted ('Brett Favorite Color'), the code will run, but the color utilized will be black.

//circles var ThisPoint = new paper.Point(50,50); var ThisCircle = new paper.Path.Circle(ThisPoint, 25); ThisCircle.fillColor = 'white'; ThisCircle.strokeColor = 'black'; ThisCircle.strokeWidth = 5; ThisCircle.visible = true;
Draw Canvas #1


Basic Circle Properties

For the programs I've written thus far, the only properties I use are:
nameOfThisCircle.fillColor
nameOfThisCircle.strokeColor
nameOfThisCircle.strokeWidth
nameOfThisCircle.visible

For the most, they are self explanatory.  Visible makes the Path visible or not, so:
ThisCircle.visible = false;
is a good way of toggling the circle on and off without having to recreate the path.  So, like, in a game, if ThisCircle were a game piece, we could set visible to false whenever the ThisCircle gamepiece were to leave play,

// Circles var ThisPoint = new paper.Point(50,50); var ThisCircle = new paper.Path.Circle(ThisPoint, 25); ThisCircle.fillColor = 'green'; ThisCircle.strokeColor = 'red'; ThisCircle.strokeWidth = 10; ThisCircle.visible = true; ThisCircle.dashArray = [10,5];
Draw Canvas #2



Advanced Circle Properties

I take that back, another property I end up using is:
nameOfThisCircle.position.x
nameOfThisCircle.position.x
which sets the x &/or y coordinates of the circles focus (the center).  It's helpful for moving a circle around the canvas.  But animation is handled by onFrame(), which I have found does not work well in conjunction with buttons or other HTML controls, and so shall save till later.

// Circles var ThisPoint = new paper.Point(50,50); var ThisCircle = new paper.Path.Circle(ThisPoint, 25); ThisCircle.fillColor = 'blue'; ThisCircle.strokeColor = 'Mystic Magenta'; ThisCircle.strokeWidth = 20; ThisCircle.visible = true; ThisCircle.dashArray = [1,0]; ThisCircle.selected = true; ThisCircle.data = 'User Generated Tags, Data, etc.'; ThisCircle.position.x = 100; ThisCircle.position.y = 100;
Draw Canvas #3

Regarding the Data Property

nameOfThisCircle.data is a property tag on which user generated data may be hung.  So, I could create:
nameOfThisCircle.data.BrettVariable1 = true;
nameOfThisCircle.data.BrettVariable2 = 27;
nameOfThisCircle.data.BrettVariable3 = 'green';

I've never used the data property, but I have added properties to Paths before I learned about the data property, and let me assure you, if one hangs data off a path like this failure will result:
nameOfThisCircle.BrettDataWillFail = 'plan on a bug appearing down the road'; // ERROR
nameOfThisCircle.BrettDoesntAdvise = 'took me long time to appreciate'; // ERROR

What I do now is create a corresponding object to hold any tracking variables I might need.
For example, if I want to create a bunch of circle shaped game objects, I'll create an array for the circles and then another separate array to keep track of any required data:

var gamePlayCircles = [];
gamePlayCircles[1] = {};
gamePlayCircles[1] = new paper.Path.Circle(new Point(x,y), rad);

var gamePlayCirclesData = [];
gamePlayCirclesData[1].dataFirst = 'second object insulates paper.js object';
gamePlayCirclesData[1].dataSecond = true;
gamePlayCirclesData[1].dataThird = 'works for me';



previous (Code Page Setup)          paper.js tutorial index       next (Stars, Polygons, Rectangles)


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