)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

### Line to Line Intersection

1. `// line to line intersection https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection`
2. `function lineIntersection(p1, p2, p3, p4) {`
3. `  let ip = { x: 0, y: 0 };`
4. `  // rare case where I use `_` in a non-constant variable name`
5. `  // to make this easy to read to with the wikipedia info`
6. `  const x4_x3 = p4.x - p3.x;`
7. `  const y4_y3 = p4.y - p3.y;`
8. `  const x2_x1 = p2.x - p1.x;`
9. `  const y2_y1 = p2.y - p1.y;`
10. `  const x1_x3 = p1.x - p3.x;`
11. `  const y1_y3 = p1.y - p3.y;`
12. `  let nx, ny, dn;`
13. ` `
14. `  nx = x4_x3 * y1_y3 - y4_y3 * x1_x3;`
15. `  ny = x2_x1 * y1_y3 - y2_y1 * x1_x3;`
16. `  dn = y4_y3 * x2_x1 - x4_x3 * y2_y1;`
17. ` `
18. `  nx /= dn;`
19. `  ny /= dn;`
20. ` `
21. `  // has intersection`
22. `  if (nx >= 0 && nx <= 1 && ny >= 0 && ny <= 1) {`
23. `    ny = p1.y + nx * y2_y1;`
24. `    nx = p1.x + nx * x2_x1;`
25. `    ip.x = nx;`
26. `    ip.y = ny;`
27. `  } else {`
28. `    // no intersection`
29. `    ip = null;`
30. `  }`
31. `  return ip;`
32. `}`
33. ` `
34. `const el = document.body.appendChild(`
35. `  document.createElement('div'));`
36. ` `
37. `// hard coding line values for simplicity and ease of understanding`
38. `el.innerHTML = ``
39. `  <svg width="100%" height="100%" viewBox="0 0 550 496">`
40. `    <path id='path' d="M 10 10 L 300 300 M 100 10 L 160 320" stroke="black" fill='none' vector-effect="non-scaling-stroke"/>`
41. `    <rect id="intersecton" x="0" y="0" width="10" height="10" fill="red" />`
42. `  </svg>`
43. `  <style>`
44. `    svg, div, body, html {`
45. `      overflow: visible; `
46. `      height: 100%; `
47. `      width: 100%;`
48. `      margin: 0; padding: 0;`
49. `    }`
50. `  </style>`
51. ``;`
52. ` `
53. `const loc = lineIntersection(`
54. `  {x: 10, y: 10}, {x: 300, y:300},`
55. `  {x: 100, y: 10}, {x: 160, y:320}`
56. `);`
57. ` `
58. `// subtract half the size of the rect from both axis to center it`
59. `intersecton.x.baseVal.value = loc.x - 5;`
60. ` `
61. `// @NOTE: using the `id` global `window.intersection` `
62. `// is just good for demos - little risky for real stuff `
63. `// since it lends itself to easy collision`
64. `window.intersecton.y.baseVal.value = loc.y - 5;`

Line to line intersection rendered with SVG.

snippet.zone ~ 2021-24 /// {s/z}