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:
There is no Spiral function built into paperJS (a stackOverflow post
confirmed this, as well)
To 'Spiral' we're just going to take a variable ('count' in above) and
push a circle outwards at each step
path.smooth(); will play some role
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.
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)