Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
154 views
in Technique[技术] by (71.8m points)

javascript - calculating the point of intersection of two lines

I have dynamically generated lines that animate and I want to detect when a lines hits another. I'm trying to implement some basic linear algebra to obtain the equation of the lines and then solving for x,y, but the results are erratic. At this point I'm testing only with two lines which means I should be getting one point of intersection, but I get two. I just want to make sure my math is ok and that I should be looking elsewhere for the problem.

function collision(boid1, boid2) {
    var x1 = boid1.initialX, y1 = boid1.initialY, x2 = boid1.x, y2 = boid1.y, x3 = boid2.initialX, y3 = boid2.initialY, x4 = boid2.x, y4 = boid2.y;

      slope1 = (y1 - y2)/(x1 - x2);
      slope2 = (y3 - y4)/(x3- x4);

      //console.log("slope1:"+slope1);
  //console.log('x2:'+x2+' y2:'+y2);

    if(slope1 != slope2){
        var b1 = getB(slope1,x1,y1);
        var b2 = getB(slope2,x3,y3);

        if(slope2 >= 0){
            u = slope1 - slope2;
        }else{
            u = slope1 + slope2;
        }

        if(b1 >= 0){
            z = b2 - b1;
        }else{
            z = b2 + b1;
        }

        pointX = z / u;

        pointY = (slope1*pointX)+b1;

        pointYOther = (slope2*pointX)+b2;

            console.log("pointx:"+pointX+" pointy:"+pointY+" othery:"+pointYOther);
            //return true;
            context.beginPath();
      context.arc(pointX, pointY, 2, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = '#003300';
      context.stroke();



    }

 return false;


}




function getB(slope,x,y){

    var y = y, x = x, m = slope;

    a = m*x;

    if(a>=0){
        b = y - a;
    }else{

        b = y + a;
    }

    return b;
}

EDIT:

The problem is that I'm getting two different values for the point of intersection. There should only be one, which leads me to believe my calculations are wrong. Yes, x2,y2,x4,y4 are all moving, but they have a set angle and the consistent slopes confirm that.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I found a great solution by Paul Bourke. Here it is, implemented in JavaScript:

function line_intersect(x1, y1, x2, y2, x3, y3, x4, y4)
{
    var ua, ub, denom = (y4 - y3)*(x2 - x1) - (x4 - x3)*(y2 - y1);
    if (denom == 0) {
        return null;
    }
    ua = ((x4 - x3)*(y1 - y3) - (y4 - y3)*(x1 - x3))/denom;
    ub = ((x2 - x1)*(y1 - y3) - (y2 - y1)*(x1 - x3))/denom;
    return {
        x: x1 + ua * (x2 - x1),
        y: y1 + ua * (y2 - y1),
        seg1: ua >= 0 && ua <= 1,
        seg2: ub >= 0 && ub <= 1
    };
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...