Jak przechodzić między wartościami, które zapętlają (takie jak odcień lub obrót)?

Zobacz demo

Próbuję sprawić, aby połączenie obracało się płynnie wokół środka płótna, w kierunku kąta wskaźnika myszy. To, co mam, działa, ale chcę, aby animowało jak najkrótszą odległość, aby uzyskać kąt myszy. Problem występuje, gdy wartość zapętla się wokół linii poziomej ( 3.14i -3.14). Najedź myszką na ten obszar, aby zobaczyć, jak zmienia się kierunek, i zajmie to długą drogę z powrotem.

Odpowiedni kod

// ease the current angle to the target angle
joint.angle += ( joint.targetAngle - joint.angle ) * 0.1;

// get angle from joint to mouse
var dx = e.clientX - joint.x,
    dy = e.clientY - joint.y;  
joint.targetAngle = Math.atan2( dy, dx );

Jak sprawić, by obracał się na najkrótszej odległości, nawet „w poprzek”?

Nie zawsze jest to najlepsza metoda i może być droższa pod względem obliczeniowym (choć ostatecznie zależy to od sposobu przechowywania danych), ale przedstawię argument, że przeszukiwanie wartości 2D działa dość dobrze w większości przypadków. Zamiast ustawiać żądany kąt, możesz przeciągać pożądany znormalizowany wektor kierunku.

Zaletą tej metody w porównaniu z metodą „wybierz najkrótszą drogę do kąta” jest to, że działa ona, gdy trzeba interpolować więcej niż dwie wartości.

Kiedy lerping wartości barwy, można wymienić huew [cos(hue), sin(hue)]wektorze.

W twoim przypadku utrzymanie znormalizowanego kierunku połączenia:

// get normalised direction from joint to mouse
var dx = e.clientX - joint.x,
    dy = e.clientY - joint.y;
var len = Math.sqrt(dx * dx + dy * dy);
dx /= len ? len : 1.0; dy /= len ? len : 1.0;
// get current direction
var dirx = cos(joint.angle),
    diry = sin(joint.angle);
// ease the current direction to the target direction
dirx += (dx - dirx) * 0.1;
diry += (dy - diry) * 0.1;

joint.angle = Math.atan2(diry, dirx);

Kod może być krótszy, jeśli można użyć klasy wektorowej 2D. Na przykład:

// get normalised direction from joint to mouse
var desired_dir = normalize(vec2(e.clientX, e.clientY) - joint);
// get current direction
var current_dir = vec2(cos(joint.angle), sin(joint.angle));
// ease the current direction to the target direction
current_dir += (desired_dir - current_dir) * 0.1;

joint.angle = Math.atan2(current_dir.y, current_dir.x);

Sztuka polega na tym, aby pamiętać, że kąty (przynajmniej w przestrzeni euklidesowej) są okresowe o 2 * pi. Jeśli różnica między bieżącym kątem a kątem docelowym jest zbyt duża (tzn. Kursor przekroczył granicę), po prostu dostosuj aktualny kąt, odpowiednio dodając lub odejmując 2 * pi.

W takim przypadku możesz spróbować wykonać następujące czynności: (Nigdy wcześniej nie programowałem w JavaScript, więc wybacz mój styl kodowania).

  var dtheta = joint.targetAngle - joint.angle;
  if (dtheta > Math.PI) joint.angle += 2*Math.PI;
  else if (dtheta < -Math.PI) joint.angle -= 2*Math.PI;
  joint.angle += ( joint.targetAngle - joint.angle ) * joint.easing;

EDYCJA : W tej implementacji zbyt szybkie przesuwanie kursora wokół środka stawu powoduje jego szarpnięcie. Jest to zamierzone zachowanie, ponieważ prędkość kątowa złącza jest zawsze proporcjonalna do dtheta. Jeśli takie zachowanie jest niepożądane, problem można łatwo rozwiązać, nakładając kołpak na przyspieszenie kątowe stawu.

Aby to zrobić, musimy śledzić prędkość połączenia i nałożyć maksymalne przyspieszenie:

  joint = {
    // snip
    velocity: 0,
    maxAccel: 0.01
  },

Następnie dla naszej wygody wprowadzimy funkcję obcinania:

function clip(x, min, max) {
  return x < min ? min : x > max ? max : x
}

Teraz nasz kod ruchu wygląda tak. Najpierw obliczamy dthetajak poprzednio, dostosowując joint.anglew razie potrzeby:

  var dtheta = joint.targetAngle - joint.angle;
  if (dtheta > Math.PI) joint.angle += 2*Math.PI;
  else if (dtheta < -Math.PI) joint.angle -= 2*Math.PI;

Następnie, zamiast natychmiastowego przesunięcia stawu, obliczamy prędkość docelową i używamy jej clipdo wymuszenia jej w dopuszczalnym zakresie.

  var targetVel = ( joint.targetAngle - joint.angle ) * joint.easing;
  joint.velocity = clip(targetVel,
                        joint.velocity - joint.maxAccel,
                        joint.velocity + joint.maxAccel);
  joint.angle += joint.velocity;

Zapewnia to płynny ruch, nawet przy zmianie kierunku, podczas wykonywania obliczeń tylko w jednym wymiarze. Ponadto umożliwia niezależną regulację prędkości i przyspieszenia złącza. Zobacz demo tutaj: http://codepen.io/anon/pen/HGnDF/

Uwielbiam inne udzielone odpowiedzi. Bardzo techniczne!

Jeśli chcesz, mam bardzo prostą metodę, aby to osiągnąć. Przyjmiemy kąty dla tych przykładów. Pojęcie to można ekstrapolować na inne typy wartości, takie jak kolory.

double MAX_ANGLE = 360.0;
double startAngle = 300.0;
double endAngle = 15.0;
double distanceForward = 0.0;  // Clockwise
double distanceBackward = 0.0; // Counter-Clockwise

// Calculate both distances, forward and backward:
distanceForward = endAngle - startAngle;    // -285.00
distanceBackward = startAngle - endAngle;   // +285.00

// Which direction is shortest?
// Forward? (normalized to 75)
if (NormalizeAngle(distanceForward) < NormalizeAngle(distanceBackward)) {
    // Adjust for 360/0 degree wrap
    if (endAngle < startAngle) endAngle += MAX_ANGLE; // Will be above 360
}

// Backward? (normalized to 285)
else {
    // Adjust for 360/0 degree wrap
    if (endAngle > startAngle) endAngle -= MAX_ANGLE; // Will be below 0
}

// Now, Lerp between startAngle and endAngle. 

// EndAngle can be above 360 if wrapping clockwise past 0, or
// EndAngle can be below 0 if wrapping counter-clockwise before 0.
// Normalize each returned Lerp value to bring angle in range of 0 to 360 if required.  Most engines will automatically do this for you.


double NormalizeAngle(double angle) {
    while (angle < 0) 
        angle += MAX_ANGLE;
    while (angle >= MAX_ANGLE) 
        angle -= MAX_ANGLE;
    return angle;
}

Właśnie utworzyłem to w przeglądarce i nigdy nie byłem testowany. Mam nadzieję, że dobrze zrozumiałem logikę przy pierwszej próbie.

[Edytuj] 2017/06/02 - Trochę wyjaśniono logikę.

Zacznij od obliczenia odległości do przodu i odległości do tyłu i pozwól, aby wyniki wykroczyły poza zakres (0–360).

Normalizowanie kątów przywraca te wartości z zakresu (0–360). Aby to zrobić, dodajesz 360, aż wartość przekroczy zero, i odejmujesz 360, gdy wartość jest wyższa niż 360. Wynikowe kąty początkowe / końcowe będą równoważne (-285 jest takie samo jak 75).

Następnie znajduje się najmniejszy znormalizowany kąt odległości do przodu lub do tyłu. distanceForward w tym przykładzie staje się 75, czyli mniej niż znormalizowana wartość distanceBackward (300).

Jeśli distanceForward jest najmniejszym ORAZ endAngle <startAngle, przedłuż endAngle poza 360 poprzez dodanie 360. (w przykładzie staje się 375).

Jeśli distanceBackward jest najmniejszym ORAZ endAngle> startAngle, przedłuż endAngle do wartości poniżej 0, odejmując 360.

Będziesz teraz lerp od startAngle (300) do nowego endAngle (375). Silnik powinien automatycznie dostosowywać wartości powyżej 360, odejmując dla Ciebie 360. W przeciwnym razie musiałbyś lerp od 300 do 360, NASTĘPNIE lerp od 0 do 15, jeśli silnik nie znormalizuje dla ciebie wartości.