paper.js Points & Angles

Click anywhere on the canvas above, and a dot is places at the onMouseDown(event) event.point (or location of the mouseClick if that is unclear). The coordinates are listed to the right, a dashed line is drawn from the center of the screen (view.center, which I also call CP), and down the left are all sorts of attribute values, which if not self-explanatory, I shall go into further after covering the code.

This is the code that controls the mouse click:
function onMouseDown(event){
    testMouseClick(event);
    updateFeedbackPointText(event);
}
All it does it call two other user defined functions. The second controls the text along the left side of the canvas. The first makes all the graphics. And this is the code for that:
// for onMouseDownTest
var circleOnDown = [];
var textOnDown = [];
var pathOnDown = []; // variables declared outside of function so they stick around
var testCount = 0;
function testMouseClick(event){
    var TP = new Point(event.point); // a simple renaming of the event.point so it's easier to write
    var TPN = TP.normalize(); // normalize is the point, if the point had a lenght of 1, but same angle
    circleOnDown[testCount] = new Path.Circle(TP, 1); // creates the dot that marks the click point
    circleOnDown[testCount].fillColor = 'black'; // colors the dot black
    textOnDown[testCount] = new PointText(new Point(TP)); // creates the text that appears to right of dot
    textOnDown[testCount].position.x += 5; // offsets the text from dot by 5
    textOnDown[testCount].position.y += 3; // same thing, but vertically
    textOnDown[testCount].content = TP + ' ' + TPN; // this doesn't actually work correctly, see below
    textOnDown[testCount].fillColor = 'black'; // sets color of PointText
    pathOnDown[testCount] = new Path(); // creates Path for the dashed line
    pathOnDown[testCount].add(CP); // sets start of Path at view.center, which is what CP is defined as
    pathOnDown[testCount].add(TP); // TP is the event.point, defined above
    pathOnDown[testCount].strokeColor = 'black'; // color for the line is black
    pathOnDown[testCount].dashArray = [2,10]; // this makes the line dashed
    testCount += 1; // and so we don't overwrite the values the next time this function is called, a counter is incremented
}

This line of code (from above) doesn't work correctly. I could not get the PointText's to output more than one variable. I don't know why. I never tried pre-conconating them, which probably would have worked. Nor did I try toString(), which if this had been important, I would have also tried. But as it's not critical, I'm just going to make not of it, here.
textOnDown[testCount].content = TP + ' ' + TPN; // this doesn't actually work correctly, see below

While I'm talking about things I didn't do, I might as well mention that I didn't feel like coding a reset button, so the only way to remove the dashed lines is to refresh the page. Or I suppose, another way of looking at this is, since a refresh is already coded into the browser, it didn't seem like a critical use of my time to recode the exact same functionality.

Feedback PointText Commentary

In the first section (first four values of feedback), I note: above = fillColor, below = strokeColor.
This actually doesn't do anything. But if one goes down into the PointText construction code and one changes the assignment from:
textOnDown[testCount].fillColor = 'black';
to
textOnDown[testCount].strokeColor = 'black';
the text graphics change a little and appear more 'retro' in my opinion. Just something to note.

Next few lines look into the point.angle(anotherPoint) method. Since two points are needed for this method, I list out the points in question. If a Point isn't listed, the Point Object in question is the current event.point. The last two lines in this section are for opposite calls:
    FBText[11].content = 'getDirectedAngle(0,100) = ' + event.point.getDirectedAngle(new Point(0,100));
    FBText[12].content = '(0,100).getDirectedAngle(event.point) = ' + new Point(0,100).getDirectedAngle(event.point);
Utilizing getDirectedAngle() means that they should be of opposite in sign. They are, so all is good in the world.

The final PointText feedback grouping looks into the lastPoint & middlePoint properties. So, we can find the angle between this click and the last click. The angle between the lastPoint & thisPoint should be twice as much as the angle between middlePoint (middle point of thisPoint and lastPoint) and thisPoint; and once again, since that's what shows, all is right in the world (everything and everywhere, JavaScript tells me so).

Somehow, I feel like I should do a basic Path() tutorial next, but I don't feel like it. And instead would rather try and fill the screen with a Hexagram Game Board. So, believe it or not, that's what I'm going to do instead.

previous -- onMouseFunctions        paper.js tutorial index       next -- Hexagram Game Board

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