paperJS (paper.js) JavaScript Library walk through by Brett Paufler - 9-10-13

JavaScript Tutorial & paper.js primer

onMouseDown()

onMouseDown is a PaperScript method, but it is constructed like any other function:
function onMouseDown(event){
    testMouseClick(event);
}
When the mouse is clicked down, the code inside the function will run. In this case, I have it calling another function, which I had previously defined and which places a red circle on the canvas at the event.point of the onMouseDown click event.
function testMouseClick(event){
    circleOnDown = new Path.Circle(event.point, 5);
    circleOnDown.fillColor = 'red';
    testCount += 1;
}

And that really is that. I spent most of my time today, updating the default sandbox environment for these tutorials. At top, there is an additional group of headText PointText areas for providing page identification info, so I don't feel obligated to place any HTML above the canvas.

Below that are six (count them, six) square boxes, which I will use in the future for interactive input (see the next tutorial for a full explaination on this, but in short, we'll use the .contains(point) method to perform a check form within an if/then statement; if true, if the click is within the square, the dependent code will execute, but more on that next time).

It's a lot of code to create the clickBox[], but a lot of that derives from the accompanying PointText, which is always hard to condense (because every line of copy tends to be different and so there is no way to automate it):

// create clickBox[
var clickBox = [];
var clickBoxText = [];
for (i = 0; i <= 2; i++){
    for (j = 0; j <= 1; j++){
        var thisN = (2 * i) + j + 1;
        var pointOne = new Point(50 * j, 60 + i * 50);
        var pointTwo = new Point(50 + (50 * j), 60 + (i + 1) * 50);
        clickBox[thisN] = new Path.Rectangle(pointOne, pointTwo);
        clickBox[thisN].strokeColor = 'black';
        clickBoxText[thisN] = new PointText(new Point(120, 60 + thisN * 20 + i * 10));
        clickBoxText[thisN].content = 'holding = ' + thisN;
        clickBoxText[thisN].fillColor = 'black';
    }
}
clickBoxText[1].content = 'These will be operational next time';
clickBoxText[2].content = 'What they will do, I know not, yet';
clickBoxText[3].content = 'It will vary, default clickBoxes';
clickBoxText[4].content = '';
clickBoxText[5].content = 'clickBoxText 5';
clickBoxText[6].content = 'clickBoxText 6';

The gibberish in red locates the different objects on the screen. I like separating PointText's by about 20 lines. But other than that, locating objects on the screen is all hit or miss, plug and chug, and/or by trial and error with me. If trying to make something that will be usable by smart phones, I believe input boxes should be reasonably large (too small and it won't register as a finger click). I'm using 50x50 here.

USING POINTTEXT FOR FEEDBACK

Every day (in every way), I'm getting more and more sold on using PointText Objects as feedback tools. Of course, I'm getting absolutely nowhere in my quest to drill down into the Event Object. But let me tell you, it's a lot quicker and easier to fail loading a non-existant call or variable into a PointText Object than it is to write some code and then try to troubleshoot said code when it goes wrong, because the thing that you're calling doesn't exist.

First PointText feedback line shows everything a person could want to know about the onFrame(event) Event Object.
I called it with 'event' from a PointText Object:
FBText[1].content = 'event = ' + event;

But at the next line down (the next PointText), event.delta crashes the program (it won't load past that point). I don't know why. But I know exactly where the error is (where & when the program crashes). But sooner or later, I'll hit the magic combination, because, now, I know the Event Object is in there somewhere.

The Event Object (event) contains everything I want. I just don't know how to access it.
event.delta
event.time
event.count
all fail.

And getting the Event Object to the PointText Objects was a bit of an ordeal in itself. (So, maybe I'm messing up somewhere in the chain; but then, since I got event to read, that doesn't really make much sense sense. event doesn't fail, so why does event.count? Bottom line, the answer is in there somewhere. I just don't know where or how to call it, yet)

function onFrame(event){
    updateFeedbackPointText(event);
    animateObjects();
}

In the above,
onFrame(event) passes the event into the onFrame() function.
updateFeedbackPointText(event); passes the event into that function.
Then at the updateFeedbackPointText(event) function, I had to carry the event object in, and only then was it callable by the PointText Objects.

On the plus side, I learned that I could call a function from a PointText Object, and I would get a full print out of that function to the screen.

onMouseDown
testMouseClick
updateFeedbackPointText
were all called by name in their corresponding PointText Objects:
function updateFeedbackPointText(event){
    FBText[9].content = onMouseDown;
    FBText[12].content = tool.onMouseDown;
    FBText[20].content = updateFeedbackPointText;
}
Of course, this is only a partial listing of this particular function. If you want to see the full listing, you have to open the page and look at the raw code. Or, I know. I've got a better idea, just look at the PointText copy up in the canvas. If your screen is big enough, the updateFeedbackPointText(event) function is listed out completely, all the way to the bitter end, with every comment included. Now, that's handy to know. I expect I'll be utilizing that quite a bit in the future.

previous (CompoundPendulum)        paper.js tutorial index       next = .contains(point)

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