Creating a Spiral Path

paperJS (paper.js) JavaScript Library Survey
© Brett Paufler - 12-14-13

Step 5: Reduce Code to a Function Call

This function is perhaps too complicated (with too many parameters), but what the heck.  It works.

var CP = new paper.Point(250,125);

function drawSimpleSpiral(centerPoint, rotationSpeed, growthSpeed, numberOfIterations, objectFunction){
    var tempRay = new paper.Point(centerPoint.x, centerPoint.y);
    for(i = 0; i <= numberOfIterations; i++){
        var newObject = objectFunction(tempRay.x, tempRay.y);
        tempRay = tempRay.rotate(rotationSpeed, CP);
        tempRay.length += growthSpeed;
    }
}

function circleForSpiralFunction(x,y){
        var newCircle = new paper.Path.Circle({
            center: [x, y],
            radius: 1,
            strokeColor: 'black'   
        });
}

The function is coded behind the scene (prior to the eval() that fires the textBox code), so a quick call to the function to insure it works.  (It does.)  And we're ready to go on to bigger and better things.





Step 6: Test Spiral Function by Passing a Custom Function

Another way to test the drawSimpleSpiral function that we just made is to pass it a different object function, so here we go:

starsForSpiralFunction(x,y); being the function we're going to create on the fly and pass in.






Step 7: Spiraling Spirals

It would take more ingenuity (or work around hack) to pass the drawSimpleSpiral function to itself, so I simply passed in a new function that drew a bunch of circles in a spiral in lieu of a single object.





Looks cool enough if you ask me.

Though, the effect is highly constant specific, change any of those 'Magic Numbers' and things quickly grow into sparse nothingness or chaotic randomness.

Still, I got a spiralling spiral and that's something.

Next up, code for a 'spiral shower' that can be loaded into an onFrame() function to expand dynamically and hence look like a pinwheel or shower of sparks.  Or if that's not clear, another way of drawing a spiral.



previous - Spiral-01
         paper.js tutorial index       next - Spiral-03


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