0

En p5.js tengo:

un punto con una posición específica x, y;

un segmento con un punto x1, y1 para su inicio y x2, y2 para su final.

Quiero saber el punto está a una distancia menor que 2 de cualquier parte del segmento.

¿Existe alguna ecuación con algún for loop o algo para determinar si es cierto lo anterior? Por favor, preguntadme en los comentarios si existe alguna duda. Gracias de antemano.

3
  • Huele a tarea para hoy... Recuerda que en este foro ayudamos si estas atorado en una parte de tu código. Nadie te ayudará si no has hecho algo. Agrega lo que llevas y con gusto te orientamos. Commented el 8 jun. 2019 a las 9:37
  • Va a ser que voy a la escuela y ya me gustaría que diesemos estas cosas allí, estoy haciendo una modificacío de un raycasting en 3d de "The Coding Train" : youtube.com/embed/vYgIKn7iDH8 y quiero saber la distancia de un punto (en el video, particle.pos) a cualquier lugar de una linea (en el video, las lineas son boundaries). La distancia la necesito para que la particula no atraviese la linea (sabiendo si la distancia es menor que dos, podría hacer que la particula no se se mueva). Probablemente no te interese lo de arriba pero si te ayuda a entender el problema que tengo... :)
    – Clipi
    Commented el 8 jun. 2019 a las 9:49
  • Hola, Clipi! El problema no está en que sea o no un problema de clase sino en el hecho de que debería ser "Tengo esta duda, he intentado esto y no he podido" y no "quiero hacer esto, que alguien me lo haga". Te recomiendo leer Cómo preguntar y ejemplo mínimo verificable para evitar que tu pregunta se llene de votos negativos :)
    – Rabegi
    Commented el 10 jun. 2019 a las 15:27

1 respuesta 1

1

Lo que se podria hacer, conociendo los puntos de origen y de destino de la recta, es armar una funcion que vaya calculando la posicion de cada uno de sus puntos intermedios. Una vez que ya se conocen estas posiciones, se puede usar la funcion dist(x1, y1, x2, y2) que proporciona la libreria p5 para averiguar la distancia que hay entre un punto determinado y cada uno de los que conforman la linea.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Distancia punto linea</title>
  <script>
    window.onload = function(){
      dibujar(linea.origen.x,linea.origen.y,linea.destino.x,linea.destino.y, 0);
      dibujar(300-linea.origen.y,300-linea.origen.x,300-linea.destino.y,300-linea.destino.x, 0);
      calcDistancia(punto,linea)

      rangoX = document.getElementById('rangoX')
      rangoY = document.getElementById('rangoY')
      rangoX.addEventListener('input', function(){
        punto.x = this.value
        init()
        calcDistancia(punto,linea)
      })
      rangoY.addEventListener('input', function(){
        punto.y = this.value
        init()
        calcDistancia(punto,linea)

      })
    };
    function init(){
      document.getElementById('canvas').getContext('2d').clearRect(0,0,300,300)
      dibujar(linea.origen.x,linea.origen.y,linea.destino.x,linea.destino.y, 0);
      dibujar(300-linea.origen.y,300-linea.origen.x,300-linea.destino.y,300-linea.destino.x, 0);
    }
   function dibujar(ox, oy, dx, dy, x){
     var canvas =  document.getElementById('canvas');
       var ctx =  canvas.getContext('2d');
       ctx.beginPath();
       ctx.moveTo(ox, oy);
       ctx.lineTo(dx, dy);
       x == 0 ? ctx.strokeStyle = "#000" : x == 1 ?
         ctx.strokeStyle = "rgba(255,0,0,0.2)" : ctx.strokeStyle = "rgba(0,0,255,0.2)"
       ctx.stroke();
    }

    var punto = {
      x: 60,
      y: 10
    }
    var linea = {
      origen: {x: 200, y: 50},
      destino: {x: 230, y:270}
    }

    function calcPendiente(linea){
      if(linea.destino.x == linea.origen.x) return 0.00000000001;
      return (linea.destino.y - linea.origen.y) / (linea.destino.x - linea.origen.x);
    }

    function calcOrdenada(linea, pendiente){
      return linea.origen.y - (pendiente * linea.origen.x);
    }

    // Calcula distancia entre un punto y cada punto de una recta
    function calcDistancia(punto, linea){
      var origX = linea.origen.x;
      var origY = linea.origen.y;
      var destX = linea.destino.x;
      var destY = linea.destino.y;
      var puntX = punto.x;
      var puntY = punto.y;
      var canvasWidth = document.getElementById('canvas').width;

      var pendiente = calcPendiente(linea);
      var ordOr = calcOrdenada(linea, pendiente);

      // Si el valor de X en el punto de destino
      // es mayor que el de el origen
      // se intercambia el nombre de los puntos
      if(origX > destX){
        var aux = origX
        origX = destX
        destX = aux
        aux = origY
        origY = destY
        destY = aux
      }

      // Si la pendiente es menor o igual que 1
      // y mayor o igual que -1 usa los valores normales
      // if(pendiente <= 1 && pendiente >= -1){
        for(var X = origX; X <= destX; X++){
          var Y = pendiente * X + ordOr;
          dibujar(X,Y,puntX,puntY, 1);
          if( dist(X, Y, puntX, puntY) < 2 ){
            // return true
          }
        }
        // return false
      // } else {
        // sino, gira 90 grados el grafico
        // para no perder precision
        var aux = canvasWidth - origX;
        origX = canvasWidth-origY;
        origY = aux;
        aux = canvasWidth-destX;
        destX = canvasWidth-destY;
        destY = aux;
        pendiente = (pendiente**-1);
        aux = canvasWidth-puntX
        puntX = canvasWidth-puntY
        puntY = aux

        if(origX > destX){
          var aux = origX;
          origX = destX;
          destX = aux;
          aux = origY;
          origY = destY;
          destY = aux;
        }
        ordOr = origY - origX * pendiente;
        for(var X = origX; X <= destX; X++){
          var Y = pendiente * X + ordOr;
          dibujar(X,Y,puntX,puntY, 2);
          // Si la distancia entre el punto
          // y alguno de los puntos de la recta
          // es menor que dos, devuelve verdadero
          if( dist(X, Y, puntX, puntY) < 2 ){
            // return true;
          }
        }
        // return false;
      }
    // }

    // Calcula distancia entre dos puntos
    function dist(x1,y1,x2,y2){
      var yMayor, yMenor;
      if(x1 > x2){
        xMayor = x1;
        xMenor = x2;
      } else {
        xMayor = x2;
        xMenor = x1;
      }
      if(y1 > y2){
        yMayor = y1;
        yMenor = y2;
      } else {
        yMayor = y2;
        yMenor = y1;
      }
      return Math.sqrt((xMayor-xMenor)**2 + (yMayor-yMenor)**2);
    }

  </script>
</head>
  <body>
    <div>
    x<input id='rangoX'  min="0" max="300" type="range">
    y<input id='rangoY'  min="0" max="300" type="range">
  </div>
  <canvas style="margin: 50px; background-color: lightyellow; border: 1px solid black" id="canvas" width="300" height="300"></canvas>
</body>
</html>

Me entusiasme y hice un ejemplo grafico. Ahi se puede ver como se gira el grafico cuando la pendiente es mayor que 1 o menor que -1, para no perder precision. Las lineas rojas son cada medicion de distancia usando la funcion original y las azules las que se hacen despues de girar noventa grados el grafico.

14
  • cual es el destino? Origen deberia de ser un punto, pero destino una linea...
    – Clipi
    Commented el 8 jun. 2019 a las 11:02
  • Seria un objeto Linea que tiene dos objetos Punto (origen, destino), que tienen su valor en X y su valor en Y. Ahi agrego el ejemplo asi queda mas claro.
    – imili
    Commented el 8 jun. 2019 a las 11:10
  • Ahhh, ahora lo he entendido... Ahora mismo no puedo provar si esta bien el codigo... pero en cuanto pueda te lo daré como valido si funciona... pero estas seguro de que el denominador de pendiente es destino menos destino? ... Eso no tiene mucho sentido (destino - destino = 0 siempre)
    – Clipi
    Commented el 8 jun. 2019 a las 11:18
  • Ah si, no me habia dado cuenta. Ahi lo corregi.Lo que no se es si habria alguna manera mas facil de hacerlo con la libreria que estas usando.
    – imili
    Commented el 8 jun. 2019 a las 11:24
  • Hola, una respuesta que es sólo código se considera de baja calidad y no es bien recibida. Te sugiero leer Cómo responder. Si crees que puedes mejorarla, puedes hacer clic en editar. Saludos Commented el 8 jun. 2019 a las 11:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.