Возникли проблемы с поиском точки соприкосновения координат и линии (стр. 5. js) - PullRequest
Новая
       67

Возникли проблемы с поиском точки соприкосновения координат и линии (стр. 5. js)

1 голос
/ 20 июня 2020

Я работаю в p5. js (p5), и мне трудно определить, касается ли линия постоянно меняющейся координаты. Я просмотрел множество разных тем и сообщений на многих разных веб-сайтах, включая этот, но я либо не понимал, как именно это реализовать, как это работает, либо это был не тот топи c. У меня есть набор координат, которые составляют строку в массиве, и у меня есть переменные ax и y, которые мне нужно найти, если коснется линии. Любая помощь приветствуется.

1 Ответ

1 голос
/ 20 июня 2020

Учитывая набор координат для линии и другой точки, определите, находится ли эта точка на линии.

  1. Преобразуйте координаты линии в уравнение y = mx + b
  2. Подставьте 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>
...