Creating a Spiral Path

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

Step 8: Dynamic Spiral

Eventually, I'm going to want to animate the spirals (turn them into pinwheels), and that will take tracking the individual points on the spiral as separate objects and pushing those objects out from the center one by one.

In the below code, the for loop increments i, which in turn increments tP.x & tP.y, which are used as the center for a new Star Object.  If we pushed this into an onFrame method and only used one object, it would cause that single object to move in a spiral pattern.

Step 9: Tricking it Out

Same basic code, but I varied the size and hue as a function of i in the for loop.

Step 10: Reducing to a Function

It may be hard to read in the textArea below, so here's the relevant code.
function starForSpiralFunction(x, y, inRad, outRad){
        var newStar = new paper.Path.Star({
            center: [x, y],
            points: 5,
            radius1: inRad,
            radius2: outRad,
            fillColor: 'red'   
        return newStar; // star will draw without a return, but cannot later be modified

var spiralArray = [];

for(i = 0; i <=100; i++){

    var tP = new paper.Point({
        length: 2.5 * i,
        angle: 10 * i

    tP.x = tP.x + CP.x;
    tP.y = tP.y + CP.y;
    spiralArray[i] = starForSpiralFunction(
        tP.x, tP.y, 1/17.5, 1/2);  // this step creates the star
    spiralArray[i].fillColor.hue += 5 * i;  // here the hue is modified
    spiralArray[i].scale(i);    // here the size is modified

It's the same output as before, just created differently (so that an object remains that we can play with).

The next step is to animate this using onFrame() -- and of course, modifying the code further, so that it animates nicely into sparklies and pinwheels.

previous - Spiral-02         paper.js tutorial index       next - Spiral-04 - pinwheel animation

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 =

© Copyright 2013 Brett Paufler