Creating a Spiral Path

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

Step 1: When in doubt, look at someone else's code

I don't know how to do a spiral, so first step, find out how.
And since there's a 'Spriral Raster' sample on the paperJS site (www.paperJS.org), why not start with that?
A code sample from which follows:

        function growSpiral() {
                count++;
                var vector = new Point({
                    angle: count * 5,
                    length: count / 100
                });
                var rot = vector.rotate(90);
                var color = raster.getAverageColor(position + vector / 2);
                var value = color ? (1 - color.gray) * 3.7 : 0;
                rot.length = Math.max(value, 0.2);
                path.add(position + vector - rot);
                path.insert(0, position + vector + rot);
                position += vector;
        }

        function onFrame(event) {
            if (grow) {
                if (raster && (view.center - position).length < max) {
                    for (var i = 0, l = count / 36 + 1; i < l; i++) {
                        growSpiral();
                    }
                    path.smooth();
                } else {
                    grow = false;
                }
            }
        }

It's somebody's else's code and I'm not going to spend too much time deciphering it, but what I gleam from the above is:

And that's pretty much it.
Though, I claim the right to revisit that code later once I'm further along.

Step 2: Get Something on the Screen

The joy of working with graphics is that the graphic itself is one of the major debugging tools.  If it doesn't look right on screen, something is wrong.  And if it looks as desired and throws no errors, the project is finished (or at least, I'm finished).  So, first things first.  Let's get something on the screen.  And since spirals have a center, that seems like the logical place to start.

Of course, the following does more than just put something at the center, it also draws a line of objects emanating from the center.

The code should be self explanatory.  As always, one may change the text in the box to effect the image in the canvas directly below.






Step 3: Rotating the Spiral

ray.length += 1; increased vector length.

ray = ray.rotate(1); rotates the ray about the origin Canvas(0,0)., which isn't exactly what I want.






Step 4: A Working Spiral

Add the ray.length +=1; back in and amend the rotate function to rotate around the CenterPoint of the screen (CP) and this is pretty much what I want.






I've come to the conclusion that I should wrap more of my code in functions, so that's what I'm going to do next.



previous - Montana          paper.js tutorial index       next - Spiral Function


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