CODEWITHSUNDEEP
javascripthtmlcanvas
GrandonBroseph
GrandonBroseph

Reputation: 163

Dragging point along vector with mouse

I've been experimenting with trigonometry for the past few days, and came up with one of those neat stat pentagons you find in some games. (fiddle!)

I'd really like to allow the vertices of the inner polygon to be draggable to change the stat values. I have mouse functionality working well, but what's the best way to drag a point on the line with the mouse?

I've created a picture to visualize my problem; the red polygon is the "current" polygon, the pink lines represent the new polygon, the pink circle emphasizes the new point for the vertex, the blue line is the vector tangent, and the green circle is the cursor.

Pentagon Diagram

I've written a program which deals with vectors before, but I'm not sure how to apply it to this situation.

Here's some code (in the loop function):

for(var i = 0; i < innerPolygonKnobs.length; i ++){
    var knob = innerPolygonKnobs[i];
    distX = knob.x-mouse.x;
    distY = knob.y-mouse.y;
    distTotal = Math.sqrt(distX*distX + distY*distY);
    if(distTotal < 8){
        if(!knob.over)change = true;
        knob.over = true;
        if(mouse.down){
            // What goes here?
        }
    } else {
        if(knob.over)change = true;
        knob.over = false;
    }
}
if(change)redraw();

Thanks so much in advance! :D

Upvotes: 2

Views: 318

Answers (1)

markE
markE

Reputation: 105015

This function will give you the closest point to the mouse on any given line:

// given a line defined like this
var line={x0:50,y0:50,x1:150,y1:150};

// calculate the closest point on the line to [x,y]
function getClosestPointOnLine(line,x,y) {
    //
    lerp=function(a,b,x){ return(a+x*(b-a)); };
    var dx=line.x1-line.x0;
    var dy=line.y1-line.y0;
    var t=((x-line.x0)*dx+(y-line.y0)*dy)/(dx*dx+dy*dy);
    t=Math.min(1,Math.max(0,t));
    var lineX=lerp(line.x0, line.x1, t);
    var lineY=lerp(line.y0, line.y1, t);
    return({x:lineX,y:lineY});
};

Then just redraw your inner polygon to connect to the point found above.

Interesting app...good luck with it!

Upvotes: 2

Related Questions