Come interpolare un rettangolo?

Voglio realizzare un'animazione di fantasia in cui un punto viaggia attorno a un rettangolo. Voglio trovare la posizione del punto alla volta t.

Il rettangolo è dato da X, Y, Widthe Height.

C'è un algoritmo per questo?

Ho usato sin/ cosper i circoli. Qual è l'approccio equivalente per i rettangoli?

Suppongo che la tua t vada da 0 a 1 . (In caso contrario, basta moltiplicare per ridimensionarlo in modo appropriato.)

Scopri quale proporzione ( 0 - 1 ) ogni lato è del perimetro. ( lunghezza laterale / perimetro totale )

Per scoprire quanta parte di ogni lato viene "riempita" al momento t , scorrere i lati, sottraendo le loro proporzioni fino a quando t viene ridotto a un valore negativo. L'ultimo bordo (che ha fatto sì che t diventi negativo) è riempito da una proporzione di (lunghezza lato + rimanente) / lunghezza lato . Il resto non è pieno.

Per ottenere il vettore posizione esatta in t , si moltiplicano vettore di ogni lato dalla proporzione di quel lato che è piena, e aggiungerli.

Questo funziona per qualsiasi poligono in realtà!

Il seno e il coseno di t sono rispettivamente la coordinata yey di un punto sul cerchio formando un angolo t con l'asse x. Non ce n'è bisogno in un rettangolo! Un rettangolo è composto da quattro linee. Se tva da 0a 1, raggiunge il punto (px,py)at t==0e to (qx,qy)at t==1con la linea data da:

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

se invece di 0e 1, il tempo passa da t0a t1, puoi prima normalizzare l'ora e poi applicare la formula sopra.

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

Ora, per te rettangolo, dividi in quattro casi con un ifper ogni bordo che copre uno dei periodi di tempo e applica un movimento di linea.

Nota che se il tuo rettangolo è allineato all'asse, avrai sempre il valore x o il valore y che è costante. Ad esempio, per t tra 0e a/4(e supponendo che (X, Y) sia in basso a sinistra),

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

Ciò equivale anche a:

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

Non so se esiste un vero algoritmo per questo, ma ne ho creato uno io stesso (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;
}

È necessario trasformare le variabili xe yper ottenere l'animazione grande o piccola come desiderato (moltiplicando) e dove si desidera (aggiungendo / sottraendo da xe y).

Non ho testato questo codice, ma penso che dovrebbe funzionare. Questo dovrebbe funzionare anche per qualsiasi poligono con un numero qualsiasi di punti (potresti anche usare un po 'di codice per generare il poligono).

Dato:

a=total time

perimeter = WIDTH *2 + HEIGTH * 2;

Dato tempo T1come salire Psul perimetro (assumendo la posizione corretta a 0,0)?

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

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

ora qualche facile geometria primaria scool e la matematica (che spero che mi scorta) per ottenere P.xe P.ydadistT1