paperJS (paper.js) JavaScript Library walk through by Brett Paufler -
10-14
Groups
I was going to do Styles next. But it doesn't look like styles
have much meaning unless one is operating on a Group, so let's cover
that first.
In paper.js, a group is a conglomeration of path objects.
To add objects to the group, use the addChild() method.
As follows is pertinent part of the createHexaGoneBoard() function, with a Grouping Function added.
var thisGroup = {}; // variable is declared outside the function so it is global in scope
// probably not good
code, should probably transfer out the effects of a function by
parameters
//
but this is easier, and lets face it, I'm only a fair to midlin
programmer
//
this works
function createHexaGonBoard(){
thisGroup = new Group(); // I will use this function to do the initial draw and redraw of the game board
// so
the Group() declaration must take place inside the function
gTNV = 0;
for (hexCenter.y = 0; hexCenter.y <= (screenHeight + pushHeight); hexCenter.y + hexSize){
gameHex[gTNV] = [];
hexCenter.x = 0;
gTNH = 0;
for (hexCenter.x = 0; hexCenter.x <= (screenWidth + pushWidth); hexCenter.x + hexSize){
if (gTNH === 0){
hexCenter.x += (gTNV % 2) * hexSize;
} // this shifts the octagons by half a size, every other
gameHex[gTNV][gTNH] = {};
gameHex[gTNV][gTNH] = new Path.RegularPolygon(hexCenter, 6, hexSize);
//gameHex[gTNV][gTNH].strokeColor = 'black';
gameHex[gTNV][gTNH].fillColor = 'red';
gameHex[gTNV][gTNH].fillColor.hue += gTNV*gTNH;
// yada, yada... all of the above remains unchanged
// see HexaGramGameBoard if interested in the specifics
// added grouping code
thisGroup.addChild(gameHex[gTNV][gTNH]); // and this adds the current gameHex object to thisGroup
function continues...
So, really, it's not that complicated. Three steps. To see
it's utility, let's call thisGroup and apply some changes. This
is the code for the 6 clickBoxes up top. It's a long function,
but the parts we're interested in are in red. And truthfully,
there's not much to say. Rather than having to create code to
loop through all the Path Objects, once one calls the Group
(thisGroup), paper.js takes care of the rest. Handy, whenever
uniform changes are required.
function checkClickBox(event){ // interested in gameControl Click Boxes, see this tutorial
for (i = 1; i <= 6; i++){
if (clickBox[i].contains(event.point)){
switch (i){
case 1:
thisGroup.strokeColor = 'blue';
updateFeedbackPointText();
break;
case 2:
thisGroup.strokeWidth += 1;
updateFeedbackPointText();
break;
case 3:
thisGroup.fillColor = 'red';
updateFeedbackPointText();
break;
case 4:
thisGroup.fillColor = 'blue';
updateFeedbackPointText();
break;
function continues...
As to un-uniform changes, well, I don't know. But let's see what we can do with Styling next.
Oh, I suppose I should go down the highlights of the pointText feedBack
text, first. Most, you can just go over on your own. I
will, however, point out:
- thisGroup.bounds exceeds the screen size (it includes the objects offscreen),
- both thisGroup.hitTest(CP) & thisGroup.contains(CP) yield
inconsistent results: (changing the size of the screen changes the
result, so perhaps inconsistent isn't the right word -- screenSize
dependent); and finally,
- when thisGroup.hitTest(CP) returns a result it a Path {ex: type: 'fill', item: Path @84}
previous (Raster Animation) paper.js tutorial
index next (Styles)
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