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

JavaScript Tutorial & paper.js primer

onMouseDown(), onMouseUp(), onMouseMove(), onMouseDrag()

We created an onMouseDown() function a few tutorials back. All the other functions follow a similar formate.

Order isn't important.
I group them together.
I principally use them to call other functions.

function onMouseDrag(event){
    updateDragEventPointText(event);
    addDragCircle(event);
}

function onMouseUp(event){
    thisMouseClickUp(event);
}

function onMouseDown(event){
    thisMouseClickDown(event);
}

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

The event that is passed to a called function is the event created by the mouseHandler function. It doesn't last and is transitory.

Having covered the updateXXXPointText(event) functions elsewhere (PointText Creation && Using PointText's for FeedBack), I won't go into either here. So, within each onMouseFunction, there is really only one user defined function (so, yeah, all this code could be dropped within the onMouseFunction, but long term, I think it's better not to).

thisMouseClickUp(event) & thisMouseClickDown(even) are essentially the same (the circle is a different size and color, that's all):

// mouseUP & mouseDown functions
var mouseCircle = [];
var mouseCount = 0;
function thisMouseClickDown(event){
    mouseCircle[mouseCount] = new Path.Circle(event.point, 10);
    mouseCircle[mouseCount].fillColor = 'red';

    mouseCount += 1;
}
function thisMouseClickUp(event){
    mouseCircle[mouseCount] = new Path.Circle(event.point, 5);
    mouseCircle[mouseCount].fillColor = 'blue';
    mouseCount += 1;
}

I like circles. We've seen circles before. No sense going into the details here.

The onMouseDrag uses circles, too. Every time the onMouseDrag(event) fires, a new circle is added to the canvas. This sort of code should be self documenting at this point.
// onMouseDrag create a circle
function addDragCircle(event){
    var dragCircle = new Path.Circle(event.point, 5);
    dragCircle.strokeColor = 'black';
    dragCircle.strokeWidth = 1;
}

I'd never created a Path() before. But it seemed simple enough, so I went for it. Took me forever to realize that I had coded heatMap.strokeColor = 'purple'; as heatMap.strokColor = 'purple';. Of course, with the error, it wouldn't run. And so I had to tear it down and build it up again (using circles, my goto), until I figured it out. But having figured it out, it's astonishingly simple.
// create heatMap
var heatMap = new Path(); // creates the Path (strokeColor & dashArray, probably better here)
function addToHeatMap(event){
    heatMap.add(event.point); // adds a point to the path every time the event fires
    heatMap.strokeColor = 'purple'; // this and the line of code below should probably go outside the function
    heatMap.dashArray = [2,10]; // but it works and optimization is overrated (I optimize for my convenience)
}

Comments in code above are all I have to say on this for now. At some point, I'm sure I'll have a whole tutorial devoted to this sort of Path(), so I'll cover this then.

PointText Feedback for onMouseDrag()

Note: to get most of the PointText feedback boxes to activate in the canvas at the top of this web page, the mouse needs to be dragged (move the mouse while it is clicked and held down and then release).

The top four PointText's breakout the onFrame(event), showing that it's fully callable.

The next four directly relate to the onMouseDrag(event):
The onMouseDrag(event) is the Event Object being called.
Note how event.count resets to zero at each instance of onMouseDrag, so the first event of any onMouseDrag sequence is always 1.

onMouseMove(move) is tracked by the heatMap Path Object, which is what the remainder of the PointText Objects track. Please note, the heatMap is not being added to by onMouseDrag(). It is called by onMouseMove(). So, the heatMap PointText data is NOT being updated in real time, but rather is updated based upon it's last instance at every onMouseDrag. Suffice to say, if one were really interested in probing deeper into the heatMap Path Object, it would make sense to update the PointText's that relate to the heatMap while the heatMap itself is being updated (i.e. pass the onMouseMove(event) to these PointTexts). Though for now, I think it's lesson enough to realize that not all Path's and Objects get updated at the same time. While some are dynamically changing (onMouseDrag(event) in this case) others (the heatMap, here) are fixed and unchanging.

And now, maybe it's time to return to angles. The reason (in theory, anyway) that I was going to the trouble of creating a paper.js sandbox environment. Going to have to give some thought to how I want to accomplish that, so maybe this is as good as place as any to break for the weekend.

previous -- contains() paper.js tutorial index next = Angles Revisited

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