Como lerp entre valores desse loop (como matiz ou rotação)?

Ver demonstração

Estou tentando fazer a junta girar suavemente em torno do centro da tela, em direção ao ângulo do ponteiro do mouse. O que tenho funciona, mas quero que ele anime a menor distância possível para chegar ao ângulo do mouse. O problema ocorre quando o valor circula na linha horizontal ( 3.14e -3.14). Passe o mouse nessa área para ver como a direção muda e leva o longo caminho de volta.

Código relevante

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

Como posso fazê-lo girar a menor distância, mesmo "atravessando a lacuna"?

Nem sempre é o melhor método, e pode ser mais caro computacionalmente (embora isso dependa de como você armazena seus dados), mas argumentarei que a leitura de valores 2D funciona razoavelmente bem na maioria dos casos. Em vez de ler um ângulo desejado, você pode ler o vetor de direção normalizado desejado .

Uma vantagem desse método em relação ao método “escolher a rota mais curta para o ângulo” é que ele funciona quando você precisa interpolar entre mais de dois valores.

Ao ler valores de matiz, você pode substituir huepor um [cos(hue), sin(hue)]vetor.

No seu caso, lendo a direção da junta normalizada:

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

O código pode ser mais curto se você puder usar uma classe de vetores 2D. Por exemplo:

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

O truque é lembrar que os ângulos (pelo menos no espaço euclidiano) são periódicos em 2 * pi. Se a diferença entre o ângulo atual e o ângulo alvo for muito grande (ou seja, o cursor cruzou o limite), basta ajustar o ângulo atual adicionando ou subtraindo 2 * pi de acordo.

Nesse caso, você pode tentar o seguinte: (nunca havia programado em Javascript antes, perdoe meu estilo de codificação.)

  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;

EDIT : Nesta implementação, mover o cursor muito rapidamente ao redor do centro da articulação faz com que ele se solte. Este é o comportamento pretendido, uma vez que a velocidade angular da articulação é sempre proporcional a dtheta. Se esse comportamento for indesejável, o problema pode ser facilmente resolvido colocando uma tampa na aceleração angular da articulação.

Para fazer isso, precisamos acompanhar a velocidade da articulação e impor uma aceleração máxima:

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

Em seguida, para nossa conveniência, apresentaremos uma função de recorte:

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

Agora, nosso código de movimento se parece com isso. Primeiro, calculamos dthetacomo antes, ajustando joint.angleconforme necessário:

  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;

Em seguida, em vez de mover a articulação imediatamente, calculamos uma velocidade alvo e a usamos clippara forçá-la dentro de nossa faixa aceitável.

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

Isso produz movimento suave, mesmo ao mudar de direção, enquanto realiza cálculos em apenas uma dimensão. Além disso, permite que a velocidade e a aceleração da junta sejam ajustadas independentemente. Veja a demonstração aqui: http://codepen.io/anon/pen/HGnDF/

Eu amo as outras respostas dadas. Muito técnico!

Se você quiser, eu tenho um método muito simples para fazer isso. Assumiremos ângulos para esses exemplos. O conceito pode ser extrapolado para outros tipos de valor, como cores.

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

Acabei de criar isso no navegador e nunca foi testado. Espero ter acertado a lógica na primeira tentativa.

02/06/2017 - Esclareceu um pouco a lógica.

Comece calculando distanceForward e distanceBackwards e permita que os resultados ultrapassem o intervalo (0-360).

A normalização de ângulos traz esses valores de volta ao intervalo de (0-360). Para fazer isso, você adiciona 360 até que o valor esteja acima de zero e subtrai 360 enquanto o valor está acima de 360. Os ângulos iniciais / finais resultantes serão equivalentes (-285 é igual a 75).

Em seguida, você encontrará o menor ângulo Normalizado de distanceForward ou distanceBackward. distanceForward no exemplo se torna 75, que é menor que o valor normalizado de distanceBackward (300).

Se distanceForward for o menor AND endAngle <startAngle, estenda endAngle além de 360 ​​adicionando 360. (torna-se 375 no exemplo).

Se distanceBackward for o menor AND endAngle> startAngle, estenda endAngle para abaixo de 0 subtraindo 360.

Você agora leria de startAngle (300) para o novo endAngle (375). O mecanismo deve ajustar automaticamente os valores acima de 360 ​​subtraindo 360 para você. Caso contrário, você teria que lerp de 300 a 360, ENTÃO lerp de 0 a 15 se o mecanismo não normalizar os valores para você.