Как мне перебрать значения в этом цикле (например, оттенок или поворот)?

Посмотреть демо

Я пытаюсь заставить сустав вращаться плавно вокруг центра холста, к углу указателя мыши. То, что у меня есть, работает, но я хочу, чтобы оно анимировало кратчайшее расстояние, чтобы добраться до угла мыши. Проблема возникает, когда значение зацикливается на горизонтальной линии ( 3.14и -3.14). Наведите указатель мыши на эту область, чтобы увидеть, как меняется направление, и он проходит долгий путь назад.

Соответствующий код

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

Как я могу заставить его вращаться на кратчайшее расстояние, даже «через зазор»?

Это не всегда лучший метод, и он может быть более затратным в вычислительном отношении (хотя в конечном итоге это зависит от того, как вы храните ваши данные), но я приведу аргумент, что в большинстве случаев разумное использование 2D-значений работает достаточно хорошо. Вместо того, чтобы отклонять желаемый угол, вы можете привязать желаемый нормализованный вектор направления.

Одно из преимуществ этого метода перед методом «выбрать кратчайший путь к углу» состоит в том, что он работает, когда вам нужно интерполировать между более чем двумя значениями.

При переносе значений оттенков вы можете заменить hueих [cos(hue), sin(hue)]вектором.

В вашем случае, нормализованное направление суставов:

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

Код может быть короче, если вы можете использовать 2D векторный класс. Например:

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

Хитрость заключается в том, чтобы помнить, что углы (по крайней мере, в евклидовом пространстве) периодичны на 2 * пи. Если разница между текущим углом и целевым углом слишком велика (т. Е. Курсор пересек границу), просто отрегулируйте текущий угол, добавив или вычтя 2 * пи соответственно.

В этом случае вы можете попробовать следующее: (Я никогда раньше не программировал в Javascript, так что простите мой стиль кодирования.)

  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;

РЕДАКТИРОВАТЬ : В этой реализации слишком быстрое перемещение курсора вокруг центра соединения приводит к его рывку. Это предполагаемое поведение, так как угловая скорость сустава всегда пропорциональна dtheta. Если это поведение нежелательно, проблему можно легко решить, установив крышку на угловое ускорение сустава.

Для этого нам нужно отслеживать скорость соединения и наложить максимальное ускорение:

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

Затем для нашего удобства введем функцию отсечения:

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

Теперь наш код движения выглядит следующим образом. Сначала мы рассчитываем, dthetaкак и прежде, корректируя joint.angleпри необходимости:

  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;

Затем, вместо того, чтобы немедленно перемещать соединение, мы вычисляем целевую скорость и используем ее, clipчтобы заставить ее в пределах нашего приемлемого диапазона.

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

Это обеспечивает плавное движение даже при переключении направлений при выполнении расчетов только в одном измерении. Кроме того, это позволяет независимо регулировать скорость и ускорение соединения. Смотрите демо здесь: http://codepen.io/anon/pen/HGnDF/

Я люблю другие ответы. Очень технично!

Если вы хотите, у меня есть очень простой способ сделать это. Мы примем углы для этих примеров. Концепция может быть экстраполирована на другие типы значений, такие как цвета.

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

Я только что создал это в браузере и никогда не проверял. Надеюсь, я правильно понял логику с первой попытки.

[Редактировать] 2017/06/02 - немного прояснил логику.

Начните с вычисления distanceForward и distanceBackwards, и позвольте результатам выйти за пределы диапазона (0-360).

Нормализация углов возвращает эти значения в диапазон (0-360). Чтобы сделать это, вы добавляете 360, пока значение не станет выше нуля, и вычтите 360, пока значение не превысит 360. Результирующие начальный / конечный углы будут эквивалентны (-285 равно 75).

Затем вы найдете наименьший нормализованный угол либо distanceForward, либо distanceBackward. distanceForward в примере становится 75, что меньше нормализованного значения distanceBackward (300).

Если distanceForward является наименьшим AND endAngle <startAngle, увеличьте endAngle за пределы 360, добавив 360. (в примере это 375).

Если distanceBackward является наименьшим AND endAngle> startAngle, увеличьте endAngle до значения ниже 0, вычитая 360.

Теперь вы переходите от startAngle (300) к новому endAngle (375). Двигатель должен автоматически отрегулировать значения выше 360, вычитая 360 для вас. В противном случае вам пришлось бы подскочить с 300 до 360, ТО - с 0 до 15, если двигатель не нормализует значения для вас.