无法找到坐标和线接触的位置 (p5.js)

Question

我在 p5.js (p5) 工作，我无法确定一条线是否触及不断变化的坐标。我在许多不同的网站上查看了许多不同的主题和帖子，包括这个，但我要么不完全理解如何实现它，它是如何工作的，要么它不是正确的主题。我有一组坐标构成数组中的一条线，并且我有一个 x 和 y 变量，如果触及该线，我需要找到它们。任何帮助表示赞赏。

Answer 1

给定一条线和另一个点的一组坐标，确定该点是否在线上。

将线的坐标转换为等式 y = mx + b
将给定点的 x、y 代入等式，看看等式是否在一定公差范围内。

示例：

 var line1 = [{x:25, y:10},{x:225, y:50}];

function setup() {
  createCanvas(300, 300);
}

function draw(){
  background(255);
  line(line1[0].x, line1[0].y, line1[1].x,line1[1].y);
  var p = {};
  p.x = mouseX;
  p.y = mouseY;

  ellipse(p.x, p.y, 2, 2);
 
  console.log(p.x + " " + p.y);
  var tolerance = 0.5;
   
    // find the slope of the line and store it in variable m
    // by finding the difference in y values (rise) and dividing by the difference in x values (run)
    var m = (line1[0].y - line1[1].y)/(line1[0].x - line1[1].x);
    
    // find the line's y intercept, the point at which the line crosses the y axis
    // b = y - mx
    var b = line1[0].y - (m * line1[0].x);

    // now determine how close the given point is to falling on the line
    var y = m * p.x + b;
    var delta = Math.abs(y - p.y);
    console.log("delta: " + delta);
    if (delta < tolerance){
      console.log("The point is on the line");
    }  else {
      console.log("The point is not on the line");
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>

无法找到坐标和线接触的位置 (p5.js)

Having trouble finding where a coordinate and a line touch (p5.js)

p5.js