¿Cómo interpolar alrededor de un rectángulo?

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, Widthy Height.

¿Hay un algoritmo para esto?

He usado sin/ cospara círculos. ¿Cuál es el enfoque equivalente para los rectángulos?

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!

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 tva de 0a 1, llega al punto (px,py)en t==0y a (qx,qy)en t==1con la línea dada por:

(l(x),l(y)) = (t*qx + (1-t)*px, t*qy + (1-t)*py)

si en lugar de 0y 1, su tiempo pasa de t0a t1, puede normalizar el tiempo primero y luego aplicar la fórmula anterior.

(l(x),l(y)) = (  ((t-t0)/(t1-t0))*qx + ((t1-t)/(t1-t0))*px, ((t-t0)/(t1-t0))*qy + ((t1-t)/(t1-t0))*py  )

Ahora, para su rectángulo, divida en cuatro casos con un ifpara 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 0y a/4(y suponiendo que (X, Y) esté en la parte inferior izquierda),

(l(x),l(y)) = ((4*t/a)*(X+Width) + (1-4*t/a)*(X), Y+Height)

Lo que también es igual a:

(l(x),l(y)) = (X + (1-4*t/a)*(Width), Y+Height)

No sé si hay un algoritmo real para esto, pero lo hice yo mismo (Java):

int points = 4; // for a rectangle
double progress = 0.0; // 0.0 -> 1.0 (with 1.0 being 100%)
double pp = points * progress; // This calculation would otherwise be done multiple times

int p1 = Math.floor(pp);
int p2 = Math.ceil(pp);

while (p1 >= points) p1 -= points;
while (p2 >= points) p2 -= points;

double tmp = 2 * Math.PI / points;

int p1x = Math.cos(tmp * p1);
int p1y = Math.sin(tmp * p1);
int p2x = Math.cos(tmp * p2);
int p2y = Math.sin(tmp * p2);

double p = pp - Math.floor(pp);

int x = (1.0 - p) * p1x + p * p2x; // between -1.0 and 1.0
int y = (1.0 - p) * p2x + p * p2y; // between -1.0 and 1.0

if (p == 0.0) { // prevent a weird glitch when p = 0.0 (I think this is a glitch)
    x = p1x;
    y = p1y;
}

Debes transformar las variables xy ypara 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).

Dado:

a=total time

perimeter = WIDTH *2 + HEIGTH * 2;

Dado el tiempo, T1¿cómo llegar Pal perímetro (asumiendo la posición recta en 0,0)?

T1=T1%a; //use mod to have T1<a

distT1 = (T1*Perimeter)/a; //distance traveled in time T1

ahora un poco de geometría y matemática escolar primaria fácil (que espero que me ahorre) para obtener P.xy P.ydedistT1