paperJS (paper.js) walk through by Brett Paufler - 8-30-13
Setting Up Web Page to Use PointText() for Feedback
(It is my intent to work my way through the paper.js library. If this page
doesn't cover the aspect of paper.js that you are interested in, please
see complete index of my paper.js
tutorials completed thus far.)
PointText() as Feedback for Code
Sample Pages
I'm not saying this code is the most ideal, but it works. And
quite frankly, I'm beginning to see the virtue in doing the least
amount of work possible; as in, don't design for what you may want to do one
day, but for what you want to do today. In a month, I'll probably
want to do something more with this code, but by then, I'll probably
have found a different (read better) way to implement the solution; so
any groundwork I laid at this point would likely be wasted. This
works -- now, today, and that is it's virtue.
That said, rather than coding for one feedback PointText() area, I
opted to go with three. In the HTML head section, I initialized
the following global (page scope) variables:
var FBText1 = {};
var FBText2 = {};
var FBText3 = {};
Then I created the following function, which does little more than
recreate the PointText() objects every time this function is called by
the DrawCanvas function (a little ways below):
function InitializeFeedBackText(){
FBText1 = new paper.PointText(new paper.Point(5,15));
FBText1.fillColor = 'black';
FBText2 = new paper.PointText(new paper.Point(5,35));
FBText2.fillColor = 'red';
FBText3 = new paper.PointText(new paper.Point(5,55));
FBText3.fillColor = 'blue';
}
There are perhaps prettier ways of writing this. Certainly,
setting FBText = []; as an array comes to mind and then calling a for/next loop to initialize each instance of the array: for (i = 1; i <= 3; i ++){ FBText[i] = {};
// probably not formally required (as I'm sure .paper internally
declares objects), but I have better luck doing it this way FBText[i] = new paper.PointText(new paper.Point(5*i, (i-1)*20 +15);// talk about ugly
FBText1.fillColor = 'black'; }
But once one gets to the exact placement of the new PointText end of the line (in red above),
the hassle and confusion of a for/next loop readily becomes apparent. Still, if I'm making stacks of PointText()'s (for
button controls, in game instructions, or so on), I'll use the for/next
method. And no, I didn't run the above for/next code, I'm writing
it from memory, so maybe it won't even run. Who knows? Not
I, as it's not the way I went in this situation.
And then, there is the placement of our newly created function into the DrawCanvas function as discussed in the first tutorial of this series.
The only critical factor here is the placement of the
InitializeFeedBackText() function. Too early, and it gets wiped
out by .removeChildren(). Too late, and the PointText() varialbles are NOT initialized and ready for when/if we pass values to them during eval().
function DrawCanvas(thisCanvas, thisTextArea){
paper.setup(document.getElementById(thisCanvas));
paper.project.activeLayer.removeChildren();
InitializeFeedBackText();
document.getElementById(thisCanvas).value =
eval(document.getElementById(thisTextArea).value);
paper.view.draw();
}
Limitations of recreating paper.js Objects
If one simply hits the 'Draw Canvas #2' button below, the Path@ # will
increment by 5 each time. Don't really know what this means, but
I'm guessing it means I'm leaving a lot of garbage behind. By
re-initializing the paths, JavaScript is creating new objects (or so
I'm guessing) at some memory space five increments away from the
last. Hardly meaningful in the age of Megabytes and Gigabytes,
but from a purist point of view, something is lacking.
At this point, all I can say is that it is what it is and if things
start crashing in the future, that will be a place to look. Maybe
I should make a note of it somewhere. OK. Here.
It's also possible that there could be some sort of leak between the
differing canvases, as I'm using the same global FBText1, FBTest2,
FBText3 variables throughout, but so far I haven't seen any cross over.
PointText() Feedback Uses
I'm no master programmer, but so far, I have found PointText() to be
the easiest way for me to determine an Object's State at any given
time. Well, state might be the wrong term for it, but certainly
the current value of any property that an object might have.
FBText3.content = ThisCircle.position.x;
Provides the position of ThisCircle. If ThisCircle was being
animated by the onFrame() method, we could update this value on each
call of onFrame() and thus get a moment by moment account of where
ThisCircle is; thus perhaps explaining why it's not currently visible
or not behaving as we expect.
But the real reason I introduced PointText() at this time is because
I expect to be heading off into unfamiliar paper.js territory shortly
(writing a tutorial on a function being proof that I understand a
function). And since I don't know what I don't know, any feedback
will give me greater clarity into what's going on.
In other words, I expect there to be lots of working examples of how to
integrate PointText() as a feedback mechanism in the pages ahead.
Perhaps unsurprisingly (but I still couldn't resist the urge to try),
none of the following code snippets produce much of interest (inserted
whole or separately).
FBText1.content = FBText1.content;
FBText1.content = FBText2.content;
FBText1.content = FBText1;
Still, this is the type of random plug and chug (I wonder what happens
if I do this) that in the long run grants one a deeper understanding of
the underlying code library.
randomPoint.angle = ??;
&
?? = getAngle(randomPoint);
Through me for a loop whilst working on my last project, so my intent is to wind towards that concept/function from here.
Don't know exactly how I'll start or get there from here, but that's what three day weekends are for.
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)