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:
 



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