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){
    document.getElementById(thisCanvas).value = eval(document.getElementById(thisTextArea).value);

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.  

Or in my OctoGon Wars game (never really complete), I use PointText() feedback boxes extensively:
OctoGon Wars (from start)
OctoGon Wars (some really nice PointText() examples)

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.

previous -- PointText()           paper.js tutorial index       next (Points & Angles)

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