paper.JS Tutorial - onFrame, rotate, viewcenter, segments

paperJS (paper.js) JavaScript Library walk through by Brett Paufler - 9-8-13
JavaScript Tutorial & paper.js primer
ONFRAME(), ROTATE(), & VIEWCENTER

ONFRAME()

Just a quick review, whatever is placed into the onframe function is called automatically +/- 60 seconds by the program. For this page, this is my onFrame() method:
function onFrame(){
    updateFeedbackPointText();
    animateObjects();
}

And for this to make any sense, one of those other methods needs to be looked at a little closer. So, why not go with the user created animateObjects() function, which I defined as follows:

function animateObjects(){
    // drop test circle, insure animation is working
    //testCircle.position.y += 1; // no longer a valid value

    // rotate the cardPoints, cardObjects, & cardStar
    for (i = 1; i <= 4; i++){
    cardPoint[i] = cardPoint[i].rotate(1, CP);
    cardObjects[i].position = cardPoint[i];
    cardStar[i] = cardStar[i].rotate(-i);
    cardStar[i].position = cardPoint[i];
    }
}

Notice that since I didn't want the circles to drop on this page, I commented that part of the code out (it's part of the default code I included on my blank/default copy of this web page -- no sense starting from scratch each time).

To rotate() everything, I wrapped them in a for loop that stepped through the three different arrays (with four items each).

ROTATE()

Two of those Arrays of Objects are rotated.

cardPoint[i] = cardPoint[i].rotate(1, CP);
This rotates the cardPoints around the CP. Since, cardObject (the circles) and cardStar (the stars) are both updated by the same general code:
cardObjects[i].position = cardPoint[i];
cardStar[i].position = cardPoint[i];
cardPoint determines the centerPoint for each of these objects.

The stars themselves are rotated by the following code.
cardStar[i] = cardStar[i].rotate(-i);
Objects that are rotated rotate around their postion attribute (their centerPoint). Since the i variable is incremented at each step of the for loop, this is why the cardStar objects with more points rotate faster (the points being assigned the same way (3 * i) during the construction process).

cardPoint[] stands for the cardinal Points and there are 4 of them

cardObject[] is the center circle, used mainly to mark each cardPoint[]

And then, cardStar[] is the rotating star Object at each cardinal point.

VIEWCENTER

When I started this page, my real intent was to look at view.center in greater depth. Suffice to say, a call to view.center as in:
var CP = new Point(view.center);
turns the variable CP into a Point Object that has it's X & Y coordinates at the center of the screen.
This means:
screenHeight = 2 * CP.y;
screenWidth = 2 * CP.x;
Or twice the value of view.center. Also note, when I declared each one, I declared it as:
var screenHeight = 0;
screenHeight = 2 * CP.y;
I did this to insure the browser does NOT confused as to type of value I wanted the variable to be.
(Or maybe I'm just such a bad programmer, I'm starting to get superstitious.)

The black border rectangle should wrap around (more or less) an area the size of your screen. Whereas, the dashed red square is the largest square that will fit in that area (centered on CP). At code time, this is an unknown variable, but defined when the user launches the page. So, no matter the user's screen size, the rotating stars will always be visible and fit on the screen. Walla! Instant portability to smart phones, tablets, and large screen monitors.

From here on out, I'm just going to assume everyone knows that when I'm talking about CP, view.center, or the centerPoint of the screen, I mean essentially the same thing for each. (I'm actually very sloppy when I talk and think. The center is the center and I trust that the compiler in your head can make sense of what I mean based on context.)

SEGMENTS

From there, I'd really done what I'd set out to do, but I'd only filled out like ten or so of those pointText feedback boxes (and I've coded it now so there are like twenty of those by default), so I was just going down, filling in whatever for the different values. And those values should be self explanatory.

I find it sort of interesting that cardStar[1] & cardStar[4] kick back the same value, cardStar[] crashes the program (don't ask me why), and that cardStar (with no closing brackets) kicks back a list of Path Memory Addresses (or so I presume).

And cardStar[1].bounds is something we've seen before.
But cardStar[1].segments is interesting. That's a bunch of points. So, segments are composed of points, and sure enough having called a segment, I can call a point, and having called a point, I can split that as well, which would have been so much gobbledygook to me only a few short months ago, so let me break it down a little better than that.

This is the line of the last feedBack pointText Object:
cardStar[1].firstSegment.point.x
And it's component parts (standard 'dot' notation) break down as follows:
cardStar[1] = an array called cardStar, location 1 of that array, it's a user defined variable and it holds a paper.js Path.Star Object
firstSegment = the first Segment of that Path.Star Object (sort of akin to it's first object or first word, not a general property of Objects per say, but a property of paper.js Path Objects)
point = the first Segment is only a point, but the point is wrapped in a Segment Object, this pulls the Point out as a Point Object
x = the X coordinate of the Point Object in question
cardStar[1].firstSegment.point.x drills this Object down as far as it will go.

And the wonderful thing about this? The truly fantastically amazing thing about this?

That Point Object can be used as the endPoint Object I was searching for in my previous tutorial. Not only should I be able to make a compound pendulum at this point, I should be able to make that pendulum as compound as deeply layered as I like (as in two, three, five, ten, or five-hundred layers deep, quickly and easily with a for statement).

Or that's my presumption. And quite honestly, I'm sort of excited to give it a go.

previous - onFrame()        paper.js tutorial index       next - compoundPendulum

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