Ottieni punti su una linea tra due punti

Sto realizzando un semplice gioco spaziale in JavaScript, ma ora ho colpito un muro per quanto riguarda i vettori.

La vista di gioco è dall'alto verso il basso su una griglia 2d. Quando l'utente fa clic sulla griglia, la nave spaziale volerà in quel punto.

Quindi, se ho due serie di punti:

{ x : 100.2, y : 100.6 }; // the ship
{ x : 20.5,  y : 55.95 }; // the clicked coordinates

Se il loop di gioco passa a 60 iterazioni al secondo e la velocità della nave desiderata è 0,05 punti per tick (3 punti al secondo), come posso calcolare il nuovo set di coordinate per la nave per ogni tick del loop di gioco?

ps Non voglio tenere conto dell'inerzia o di più vettori che influenzano la nave, voglio solo che la nave si fermi qualunque cosa stia facendo (cioè volando in una direzione) e si sposti alle coordinate cliccate a velocità statica.

In Pseudocodice:

speed_per_tick = 0.05
delta_x = x_goal - x_current
delta_y = y_goal - y_current
goal_dist = sqrt( (delta_x * delta_x) + (delta_y * delta_y) )
if (dist > speed_per_tick)
{
    ratio = speed_per_tick / goal_dist
    x_move = ratio * delta_x  
    y_move = ratio * delta_y
    new_x_pos = x_move + x_current  
    new_y_pos = y_move + y_current
}
else
{
    new_x_pos = x_goal 
    new_y_pos = y_goal
}

LERP - Interpolazione lineare

Ho dato questa risposta per un problema simile qualche giorno fa, ma eccoci qui:

L'interpolazione lineare è una funzione che ti dà un numero tra due numeri, in base all'avanzamento. In realtà potresti ottenere un punto tra due punti.

La grande formula - Come calcolarla

La formula generale LERP è data da pu = p0 + (p1 - p0) * u. Dove:

• pu: il numero del risultato
• p0: il numero iniziale
• p1: il numero finale
• u: i progressi. Viene espresso in percentuale, tra 0 e 1.

Come ottenere la percentuale

Forse ti starai chiedendo "Come posso ottenere questa percentuale !?". Non ti preoccupare. È così: quanto tempo impiegherà il punto a viaggiare affinché il vettore iniziale finisca? Ok, dividilo per il tempo che è già passato. Questo ti darà la percentuale.

Guarda, qualcosa del genere: percentage = currentTime / finalTime;

Vettori calcolatori

Per ottenere un vettore risultante, tutto ciò che devi fare è applicare la formula due volte, una per il componente X e una per il componente Y. Qualcosa come questo:

point.x = start.x + (final.x - start.x) * progress;
point.y = start.y + (final.y - start.y) * progress;

Calcolo del tempo variabile

Potresti voler far muovere i tuoi punti a una velocità di 0,5 punti, vero? Quindi diciamo, una distanza più lunga verrà percorsa in un tempo più lungo.

Puoi farlo come segue:

• Ottieni la lunghezza della distanza Per questo, avrai bisogno di due cose. Ottieni il vettore della distanza, quindi trasformalo in un valore di lunghezza.

  distancevec = final - start;
distance = distancevec.length();

Spero che tu conosca la matematica dei vettori. In caso contrario, puoi calcolare una lunghezza vettoriale con questa formula d = sqrt(pow(v.x, 2) + pow(v.y, 2));.

• Prendi il tempo necessario e aggiorna finaltime. Questo è facile. Se vuoi che ogni tick abbia una lunghezza di 0,5, dobbiamo solo dividere e ottenere quanti tick abbiamo.

  finalTime = distance / 0.5f;

Fatto.

AVVISO: forse, questa potrebbe non essere la velocità prevista per te, ma questa è la giusta. quindi hai un movimento lineare, anche su mosse diagonali. Se vuoi fare x + = 0,5f, y + = 0,5f, leggi un libro di matematica vettoriale e ricontrolla i tuoi piani.

Questo può essere fatto calcolando la normale della direzione e quindi calcolando la posizione corrente tramite l'equazione parametrica

newPoint = startPoint + directionVector * velocity * t

Dove t è il tempo trascorso da quando la nave ha iniziato a viaggiare nella direzione desiderata. Puoi anche eseguire questo per aggiornamento tramite

newPoint = currentPoint + directionVector * velocity * timeDelta

E lo calcoli solo in ogni frame / fisica / ecc. aggiornare fino a quando la nave non raggiunge la sua destinazione.