Languages
[Edit]
EN

JavaScript - dynamic calculation of two lines intersection point

10 points
Created by:
Kate_C
19790

In this article cross point animation for this article has been presented.

1. Animated cross point example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    #my-canvas { border: 1px solid gray; }
    
  </style>
  <script>
    
    function drawLine(context, p1, p2, color) {
      	context.strokeStyle = color;
      
        context.beginPath();
        context.moveTo(p1.x, p1.y);
        context.lineTo(p2.x, p2.y);
        context.stroke();
    }

    function drawPoint(context, x, y, label, color, size) {
      	if (color == null) {
        	color = '#000';
        }
      
        if (size == null) {
            size = 5;
        }

        context.beginPath();
        context.fillStyle = color;
        context.arc(x, y, size, 0 * Math.PI, 2 * Math.PI);
        context.fill();
      
      	if (label) {
            var textX = x;
          	var textY = y - size - 3;
          
          	var text = label + '=(' + x + '; ' + y + ')';
          
            context.font = 'Italic 14px Arial';
            context.fillStyle = color;
            context.textAlign = 'center';
            context.fillText(text, textX, textY);
        }
    }

  </script>
</head>
<body>
  <canvas id="my-canvas" width="350" height="300"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    function calculateIntersection(p1, p2, p3, p4) {
    	
      	// down part of intersection point formula
      	var d1 = (p1.x - p2.x) * (p3.y - p4.y); // (x1 - x2) * (y3 - y4)
      	var d2 = (p1.y - p2.y) * (p3.x - p4.x); // (y1 - y2) * (x3 - x4)
      	var d  = (d1) - (d2);
      
      	if(d == 0) {
        	throw new Error('Number of intersection points is zero or infinity.');
        }
      
      	// down part of intersection point formula
      	var u1 = (p1.x * p2.y - p1.y * p2.x); // (x1 * y2 - y1 * x2)
      	var u4 = (p3.x * p4.y - p3.y * p4.x); // (x3 * y4 - y3 * x4)
          
      	var u2x = p3.x - p4.x; // (x3 - x4)
      	var u3x = p1.x - p2.x; // (x1 - x2)
      	var u2y = p3.y - p4.y; // (y3 - y4)
      	var u3y = p1.y - p2.y; // (y1 - y2)
      
      	// intersection point formula
      	
      	var px = (u1 * u2x - u3x * u4) / d;
      	var py = (u1 * u2y - u3y * u4) / d;
      	
      	var p = { x: px, y: py };
      
      	return p;
    }
    
    // line 1
    var p1 = { x:  85, y:  124 }; // P1: (x1, y1)
    var p2 = { x: 260, y: 180 }; // P2: (x2, y2)
    
    // line 2
    var p3 = { x: 150, y:  30 }; // P3: (x4, y4)
    var p4 = { x:  170, y: 260 }; // P4: (x4, y4)

    var dy = 1;
    
    setInterval(function() {
      
      	if(p2.y < 0 || p2.y > canvas.height) {
        	dy = -dy;
        }
      
      	p2.y += dy;
    
      	context.clearRect(0, 0, canvas.width, canvas.height);
      	console.clear();
      
      	drawLine(context, p1, p2, 'red');
        drawPoint(context, p1.x, p1.y, 'P1', 'red', 5);
        drawPoint(context, p2.x, p2.y, 'P2', 'red', 5);
      
        console.log('P1=(' + p1.x + '; ' + p1.y + ')');
        console.log('P2=(' + p2.x + '; ' + p2.y + ')');

        drawLine(context, p3, p4, 'blue');
        drawPoint(context, p3.x, p3.y, 'P3', 'blue', 5);
        drawPoint(context, p4.x, p4.y, 'P4', 'blue', 5);

        console.log('P3=(' + p3.x + '; ' + p3.y + ')');
        console.log('P4=(' + p4.x + '; ' + p4.y + ')');

        // intersection point
        var p = calculateIntersection(p1, p2, p3, p4); // intersection point
        drawPoint(context, p.x, p.y, 'P', 'green', 5);

        console.log('P=(' + p.x + '; ' + p.y + ')');

    }, 10);

  </script>
</body>
</html>

See also

  1. JavaScript - how to calculate intersection point of two lines for given 4 points?
Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join