javascript - whether - properties canvas html5

Mover un punto a lo largo de una línea en JavaScript Canvas

Question

Tengo una pregunta para mi proyecto de feria de ciencias de noveno grado y necesito ayuda. Para mi proyecto, quiero hacer un simulador de tráfico, pero una cosa me está dando problemas ...

Digamos que tengo las coordenadas de una línea (25,35 45,65, 30,85 - Sería una línea de dos partes). Necesito mover un punto (carro) a lo largo de esa línea a una distancia constante en cada cuadro. ¿Cómo puedo hacer esto?

Gracias, C.Ruhl

Answer 1

Considere la línea (25,35 45,65). El vector desde el principio hasta el final es (20, 30). Para mover un punto (x, y) en esa dirección, podríamos simplemente agregar ese vector:

V = (20, 30) (x, y) => (x + 20, y + 30).

Si comenzamos al principio de la línea, llegaremos al final. Pero ese es un gran paso. Queremos algo más pequeño pero en la misma dirección, así que multiplicamos el vector por, digamos, 0.1:

V = (2, 3) (x, y) => (x + 2, y + 3) => (x + 4, y + 6) => ...

Es conveniente normalizar , es decir, hacer su longitud 1, lo cual hacemos dividiendo por su longitud:

V => V / | V | = (2,3) / sqrt (2 ² + 3 ² ) = (7.21, 10.82)

Entonces puedes multiplicar eso por el tamaño de paso que quieras.

Answer 2

Oye, entonces tienes las coordenadas (25,35) (45,65) (30,85) para tus 2 líneas, el punto que deseas mover se colocará en la primera de estas coordenadas (25,35) y desea que se mueva hacia la segunda coordenada (45,65) (el final del primer segmento de línea).

El primer paso es obtener la orientación en la que se moverá el punto, la orientación es el ángulo entre la posición del punto y la posición del objetivo. Para encontrar este ángulo puede usar Math.atan2() , pasando como primer argumento la target position Y - the point position Y , y como segundo argumento la target position X - the point position X

var Point = {X: 25, Y: 35};
var Target = {X:45, Y:65};

var Angle = Math.atan2(Target.Y - Point.Y, Target.X - Point.X);

Ahora obtenga el seno y el coseno de ese ángulo, el seno es el valor para moverse a lo largo del eje Y, y el coseno es cuánto mover en el eje X. Multiplique el seno y el coseno por la distancia que desea mover cada cuadro.

var Per_Frame_Distance = 2;
var Sin = Math.sin(Angle) * Per_Frame_Distance;
var Cos = Math.cos(Angle) * Per_Frame_Distance;

Ok, lo que queda por hacer ahora es simplemente configurar el método de redibujar donde se agrega el seno a la posición Y del punto y el coseno a la posición X del punto en cada llamada. Compruebe si el punto ha llegado a su destino y luego haga el mismo proceso para avanzar hacia el final del segundo segmento de línea.

Answer 3

A veces no es tan obvio cómo traducir una fórmula matemática en un código. La siguiente es una implementación de una función que mueve un punto de distancia especificada a lo largo de una línea. Utiliza notación vectorial:

function travel(x, y, dx, x1, y1, x2, y2)
{
    var point = new Vector(x, y),
        begin = new Vector(x1, y1),
        end = new Vector(x2, y2);
    return end.sub(begin).norm().mul(dx).add(point);
}

class Vector
{
    constructor(x = 0, y = 0) {
        this.x = x;
        this.y = y;
    }

    clone() {
        return new this.constructor(this.x, this.y);
    }

    add(v) {
        this.x += v.x;
        this.y += v.y;
        return this;
    }

    sub(v) {
        this.x = this.x - v.x;
        this.y = this.y - v.y;
        return this;
    }

    mul(x) {
        this.x *= x;
        this.y *= x;
        return this;
    }

    div(x) {
        this.x /= x;
        this.y /= x;
        return this;
    }

    get mag() {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    }

    norm() {
        var mag = this.mag;
        if (mag > 0) {
            this.div(mag);
        }
        return this;
    }
}

Y una versión sin clase Vector :

function travel(x, y, dx, x1, y1, x2, y2)
{
    var a = {x: x2 - x1, y: y2 - y1},
        mag = Math.sqrt(a.x*a.x + a.y*a.y);
    if (mag == 0) {
        a.x = a.y = 0;
    }
    else {
        a.x = a.x/mag*dx;
        a.y = a.y/mag*dx;
    }
    return {x: x + a.x, y: y + a.y};
}