Quiero hacer una animación elegante donde un punto viaja alrededor de un rectángulo. Quiero encontrar la posición del punto a la vez t
.
El rectángulo está dada por X
, Y
, Width
y Height
.
¿Hay un algoritmo para esto?
He usado sin
/ cos
para círculos. ¿Cuál es el enfoque equivalente para los rectángulos?
animation
geometry
interpolation
Raildex
fuente
fuente
Respuestas:
Asumiré que tu t va de 0 a 1 . (Si no, simplemente multiplique para escalarlo adecuadamente).
Calcule qué proporción ( 0 - 1 ) tiene cada lado del perímetro. ( longitud lateral / perímetro total )
Para encontrar la cantidad de cada lado que se "rellena" en el tiempo t , itera por los lados, restando sus proporciones hasta que t se agote a un valor negativo. Ese último borde (que causó que t se volviera negativo) se llena con una proporción de (longitud lateral + restante) / longitud lateral . El resto no está lleno.
Para obtener la posición exacta del vector en t , multiplique el vector de cada lado por la proporción de ese lado que está lleno y agréguelos.
¡Esto funciona para cualquier polígono en realidad!
fuente
El seno y el coseno de t son respectivamente las coordenadas y y x de un punto en el círculo que forma un ángulo t con el eje x. ¡No hay necesidad de eso en un rectángulo! Un rectángulo está hecho de cuatro líneas. Si
t
va de0
a1
, llega al punto(px,py)
ent==0
y a(qx,qy)
ent==1
con la línea dada por:si en lugar de
0
y1
, su tiempo pasa det0
at1
, puede normalizar el tiempo primero y luego aplicar la fórmula anterior.Ahora, para su rectángulo, divida en cuatro casos con un
if
para cada borde que cubra uno de los períodos de tiempo y aplique un movimiento de línea.Tenga en cuenta que si su rectángulo está alineado con el eje, siempre tendrá el valor x o el valor y que es constante. Por ejemplo, para t entre
0
ya/4
(y suponiendo que (X, Y) esté en la parte inferior izquierda),Lo que también es igual a:
fuente
No sé si hay un algoritmo real para esto, pero lo hice yo mismo (Java):
Debes transformar las variables
x
yy
para que tu animación sea tan grande o pequeña como quieras (multiplicándola) y donde quieras (sumando / restando de x e y).No he probado este código, pero creo que debería funcionar. Esto también debería funcionar para cualquier polígono con cualquier número de puntos (también podría usar un poco del código para generar el polígono).
fuente
Dado:
Dado el tiempo,
T1
¿cómo llegarP
al perímetro (asumiendo la posición recta en 0,0)?ahora un poco de geometría y matemática escolar primaria fácil (que espero que me ahorre) para obtener
P.x
yP.y
dedistT1
fuente