Wie kann ich zwischen Werten wechseln, die sich in einer Schleife befinden (z. B. Farbton oder Drehung)?

Demo ansehen

Ich versuche, das Gelenk gleichmäßig um die Mitte der Leinwand in Richtung des Mauszeigers zu drehen. Was ich habe, funktioniert, aber ich möchte, dass es die kürzest mögliche Entfernung animiert, um zum Mauswinkel zu gelangen. Das Problem tritt auf, wenn der Wert an der horizontalen Linie ( 3.14und -3.14) eine Schleife durchläuft . Fahren Sie mit der Maus über diesen Bereich, um zu sehen, wie sich die Richtung ändert, und es dauert den langen Weg zurück.

Relevanter Code

// 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 );

Wie kann ich ihn auf die kürzeste Distanz drehen lassen, sogar "über die Lücke"?

Es ist nicht immer die beste Methode und kann rechenintensiver sein (obwohl dies letztendlich davon abhängt, wie Sie Ihre Daten speichern), aber ich werde argumentieren, dass das Lerpen von 2D-Werten in den meisten Fällen recht gut funktioniert. Anstatt einen gewünschten Winkel zu verändern, können Sie den gewünschten normalisierten Richtungsvektor verändern.

Ein Vorteil dieser Methode gegenüber der Methode "Wählen Sie die kürzeste Route zum Winkel" ist, dass sie funktioniert, wenn Sie zwischen mehr als zwei Werten interpolieren müssen.

Wenn Sie Farbtonwerte einlesen, können Sie diese durch hueeinen [cos(hue), sin(hue)]Vektor ersetzen .

In Ihrem Fall unterbrechen Sie die normalisierte Gelenkrichtung:

// 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);

Der Code kann kürzer sein, wenn Sie eine 2D-Vektorklasse verwenden können. Zum Beispiel:

// 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);

Der Trick besteht darin, sich daran zu erinnern, dass die Winkel (zumindest im euklidischen Raum) um 2 * pi periodisch sind. Wenn der Unterschied zwischen dem aktuellen Winkel und dem Zielwinkel zu groß ist (dh der Cursor hat die Grenze überschritten), passen Sie den aktuellen Winkel einfach an, indem Sie 2 * pi entsprechend addieren oder subtrahieren.

In diesem Fall können Sie Folgendes versuchen: (Ich habe noch nie in Javascript programmiert. Verzeihen Sie also meinen Codierungsstil.)

  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;

BEARBEITEN : In dieser Implementierung ruckelt der Cursor, wenn er zu schnell um die Gelenkmitte bewegt wird. Dies ist das beabsichtigte Verhalten, da die Winkelgeschwindigkeit des Gelenks immer proportional ist dtheta. Wenn dieses Verhalten unerwünscht ist, kann das Problem leicht behoben werden, indem eine Kappe auf die Winkelbeschleunigung des Gelenks aufgesetzt wird.

Dazu müssen wir die Geschwindigkeit des Gelenks verfolgen und eine maximale Beschleunigung auferlegen:

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

Aus praktischen Gründen führen wir eine Clipping-Funktion ein:

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

Unser Bewegungscode sieht nun so aus. Zuerst berechnen wir dthetawie zuvor und passen joint.anglenach Bedarf an:

  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;

Anstatt das Gelenk sofort zu bewegen, berechnen wir eine Zielgeschwindigkeit und cliperzwingen sie innerhalb unseres akzeptablen Bereichs.

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

Dies erzeugt eine gleichmäßige Bewegung, selbst wenn die Richtung geändert wird, während Berechnungen in nur einer Dimension ausgeführt werden. Darüber hinaus können Geschwindigkeit und Beschleunigung des Gelenks unabhängig voneinander eingestellt werden. Sehen Sie die Demo hier: http://codepen.io/anon/pen/HGnDF/

Ich liebe die anderen Antworten. Sehr technisch!

Wenn Sie möchten, habe ich eine sehr einfache Methode, um dies zu erreichen. Für diese Beispiele nehmen wir Winkel an. Das Konzept kann auf andere Werttypen, z. B. Farben, extrapoliert werden.

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;
}

Ich habe dies gerade im Browser erstellt und wurde noch nie getestet. Ich hoffe, ich habe die Logik beim ersten Versuch richtig verstanden.

[Bearbeiten] 02.06.2017 - Die Logik wurde ein wenig geklärt.

Beginnen Sie mit der Berechnung von distanceForward und distanceBackwards und lassen Sie die Ergebnisse über den Bereich (0-360) hinausgehen.

Durch das Normalisieren der Winkel werden diese Werte wieder in den Bereich von (0-360) gebracht. Dazu addieren Sie 360, bis der Wert über Null liegt, und subtrahieren 360, während der Wert über 360 liegt. Die resultierenden Start- / Endwinkel entsprechen dem Äquivalent (-285 entspricht 75).

Als nächstes finden Sie den kleinsten normalisierten Winkel von distanceForward oder distanceBackward. distanceForward im Beispiel wird zu 75, was kleiner als der normalisierte Wert von distanceBackward (300) ist.

Wenn distanceForward das kleinste AND endAngle <startAngle ist, erweitern Sie endAngle über 360 hinaus, indem Sie 360 ​​hinzufügen (im Beispiel wird es 375).

Wenn distanceBackward das kleinste AND endAngle> startAngle ist, erweitern Sie endAngle auf unter 0, indem Sie 360 ​​subtrahieren.

Sie würden jetzt von startAngle (300) zu dem neuen endAngle (375) springen. Der Motor sollte automatisch Werte über 360 anpassen, indem er 360 für Sie subtrahiert. Andernfalls müssten Sie von 300 bis 360 lerpen, DANN von 0 bis 15 lerpen, wenn die Engine die Werte für Sie nicht normalisiert.