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
, Width
e Height
.
Existe um algoritmo para isso?
Eu usei sin
/ cos
para círculos. Qual é a abordagem equivalente para retângulos?
animation
geometry
interpolation
Raildex
fonte
fonte
Respostas:
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!
fonte
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
t
vai de0
para1
, atinge o ponto(px,py)
att==0
e(qx,qy)
att==1
com a linha dada por:se em vez de
0
e1
, o tempo passar det0
parat1
, você poderá normalizar o horário primeiro e depois aplicar a fórmula acima.Agora, para seu retângulo, divida em quatro casos com um
if
para 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
0
ea/4
(e supondo (X, Y) fica no canto inferior esquerdo),O que também é igual a:
fonte
Não sei se existe um algoritmo real para isso, mas eu mesmo criei um (Java):
Você deve transformar as variáveis
x
ey
para 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).
fonte
Dado:
Com o tempo,
T1
como chegarP
ao perímetro (assumindo a posição correta em 0,0)?agora algumas fáceis geometria primária scool e matemática (que espero que você me poupar) para obter
P.x
eP.y
dedistT1
fonte