¿Como representar una trayectoria? [sin transiciones CSS]

[Albuss]

Buenas a todos!


Llevo un par de dias intentando hallar la manera mas adecuada de representar una trayectoria para mover un elemento dentro de un sistema que estoy creando.

Vease, tengo un Div en unas coordenadas concretas dentro del body, ejemplo (100,100), y tengo dos puntos por ejemplo A(150,150) B(300,300) que unidos entre si
representan una trayectoria por la cual quiero que pase mi Div.

Hasta ahora lo que hacia era representar trayectorias en linea recta en base a cualquiera de los dos ejes y sumar o restar pixeles con las herramientas de intervalos,
con lo que creaba la animacion y mi div se podia mover en linea recta de forma vertical o hotizontal.

El problema con el que me encuentro, es que no encuentro forma de como mover el div para una trayectoria especifica (que no sea linea recta en vertical o u horizontal),
sumando o restando pixeles con los intervalos, Para calcular la trayectoria solo dispongo de dos puntos (A y B) y las coordenadas de Div.

Descartando por completo el uso de herramientas como las transiciones de CSS, Me he planteado usar Vectores o funciones lineales aunque no se muy bien como aplicarlos a esto
(soy de humanidades, aunque no me gustan las matematicas).



Gracias de antemano a todos los que intentéis ayudarme!

[Alexis88]

Aún estoy algo aturdido por el concierto al que asistí anteayer, pero como me pareció interesante este hilo, me propuse a hacer algo al respecto.

Código Javascript:

var div = document.getElementsByTagName("div")[0],
    limite = prompt("Distancia:"),
    x = 0,
    fn = function(){
        x += 5;
        if (x <= limite){
            div.style.top = x + "px";
            div.style.left = x + "px";
        }
    };
 
setInterval(fn, 1000);
 

El usuario ingresará la cantidad máxima de píxeles que el Div debe desplazarse, luego, cada segundo ejecuto la función que realizará el desplazamiento. En cada ocasión, compruebo que el valor del contador que utilizo para el desplazamiento sea menor o igual al límite, mientras se cumpla esta condición, sigo desplazando al Div, caso contrario, dejo de hacerlo.

DEMO

Si no es exactamente lo que buscabas, al menos te puede dar una idea para lo que deseas realizar.

Saludos

[Albuss]

gracias por participar alexis88 !

viendo tu ejemplo, pienso que es mas o menos lo que yo ya podia obtener, es decir, hasta ahora no tenia problema en hacer una trayectoria recta sobre el eje X y sobre el eje Y , y tu has propuesto mas o menos lo mismo , es decir, sumar un valor fijo para x y para y al mismo tiempo dando lugar a una trayectoria que baja en Y u suma en X tantos pixeles como les sumes cada intervalo.


Lo que yo inteto conseguir es representar fielmente trayectorias que no se basen en un valor fijo para x o y, imaginate que quiero trazar una linea recta en base desde el 0,0 con un valor de 15º, ¿como lo hago? , como represento rectas que no se basen en valores fijos para x e y ? , espero que se me entienda lo que busco, uno de mis grandes problemas es expresarme

[Alexis88]

Francamente, no se me ocurre cómo hallar las magnitudes de los vectores que forman un ángulo dado si no tengo al menos la magnitud de uno de ellos. Lo más cercano que llegué a estar es realizando el desplazamiento pero dando valores a los vectores.

Código Javascript:

var div = document.getElementsByTagName("div")[0],
    limX = prompt("Eje X:"),
    limY = prompt("Eje Y:"),
    x = 0, y = 0,
    fn = function(){
        if (++x <= limX)
            div.style.top = x + "px";
        
        if (++y <= limY)
            div.style.left = y + "px";
        
        if (div.style.top == limX + "px" && div.style.left == limY + "px")
            clearInterval(intervalo);
    },
    intervalo = setInterval(fn, 50);
 

De este modo, el Div se desplazará hasta los límites dados.

DEMO

Saludos

[Albuss]

Si tenemos las coordenadas de los puntos, junto a las coordenadas del punto (0,0) y las coordenadas del div en cuestión creo que hay toda la informacion necesaria...


Por ejemplo, podemos obtener los grados de la linea recta (que es la trayectoria) respecto al punto 0 Y y la x de div , simplemente formando un triguangulo y ob teniendo los grados de cada vertice. Pitagoras to rescue!

Aunque sinceramente si uso intervalos y quiero que en cada intervalo se represente fielmente la posicion de la trayectoria. Pienso que la unica salida es una funcion lineal.

Pero en mates estoy muy verde, no se como obtener una ecuacion de primer grado para hallar una recta , resolverla si, pero obtenerla ...

Luego seria ir dando valores a las X y a las Y para cada llamada del intervalo, o al menos desde mi punto de vista puede ser asi . Aunque francamente puede que este equivocado.