Como interpolar em torno de um retângulo?

Quero fazer uma animação chique em que um ponto viaja ao redor de um retângulo. Eu quero encontrar a posição do ponto de cada vez t.

O retângulo é dada por X, Y, Widthe Height.

Existe um algoritmo para isso?

Eu usei sin/ cospara círculos. Qual é a abordagem equivalente para retângulos?

Eu assumo que seu t vai de 0 a 1 . (Caso contrário, apenas multiplique para dimensioná-lo adequadamente.)

Descubra qual a proporção ( 0 - 1 ) de cada lado do perímetro. ( comprimento lateral / perímetro total )

Para descobrir quanto de cada lado é "preenchido" no momento t , itere pelos lados, subtraindo suas proporções até que t seja esgotado para um valor negativo. Essa última aresta (que causou t ficar negativo) é preenchida por uma proporção de (comprimento lateral + restante) / comprimento lateral . O resto não está cheio.

Para obter a posição exata do vetor em t , multiplique o vetor de cada lado pela proporção daquele lado que é preenchido e adicione-os.

Isso funciona para qualquer polígono, na verdade!

O seno e o cosseno de t são, respectivamente, as coordenadas yex de um ponto no círculo, formando um ângulo t com o eixo x. Não há necessidade disso em um retângulo! Um retângulo é composto de quatro linhas. Se tvai de 0para 1, atinge o ponto (px,py)at t==0e (qx,qy)at t==1com a linha dada por:

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

se em vez de 0e 1, o tempo passar de t0para t1, você poderá normalizar o horário primeiro e depois aplicar a fórmula acima.

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

Agora, para seu retângulo, divida em quatro casos com um ifpara cada aresta que cubra um período de tempo e aplique um movimento de linha.

Observe que se o seu retângulo estiver alinhado ao eixo, você sempre terá o valor x ou o valor y constante. Por exemplo, para t entre 0e a/4(e supondo (X, Y) fica no canto inferior esquerdo),

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

O que também é igual a:

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

Não sei se existe um algoritmo real para isso, mas eu mesmo criei um (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;
}

Você deve transformar as variáveis xe ypara obter sua animação tão grande ou pequena quanto desejar (multiplicando) e onde desejar (adicionando / subtraindo de x e y).

Não testei esse código, mas acho que deve funcionar. Isso também deve funcionar para qualquer polígono com qualquer número de pontos (você também pode usar um pouco do código para gerar o polígono).

Dado:

a=total time

perimeter = WIDTH *2 + HEIGTH * 2;

Com o tempo, T1como chegar Pao perímetro (assumindo a posição correta em 0,0)?

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

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

agora algumas fáceis geometria primária scool e matemática (que espero que você me poupar) para obter P.xe P.ydedistT1