Làm thế nào để tôi lerp giữa các giá trị vòng lặp (chẳng hạn như màu sắc hoặc xoay)?

Xem bản demo

Tôi đang cố gắng làm cho khớp xoay trơn tru xung quanh tâm của khung vẽ, hướng về góc của con trỏ chuột. Những gì tôi có tác dụng, nhưng tôi muốn nó làm động khoảng cách ngắn nhất có thể để đến góc chuột. Sự cố xảy ra khi các vòng lặp giá trị xung quanh tại đường ngang ( 3.14và -3.14). Di chuột qua khu vực đó để xem cách chuyển hướng và phải đi đường dài xung quanh.

Mã liên quan

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

Làm thế nào tôi có thể làm cho nó xoay khoảng cách ngắn nhất, thậm chí là "trên khoảng cách"?

Nó không phải luôn luôn là phương pháp tốt nhất và nó có thể tốn kém hơn về mặt tính toán (mặc dù điều này cuối cùng phụ thuộc vào cách bạn lưu trữ dữ liệu của bạn), nhưng tôi sẽ đưa ra lập luận rằng việc nới lỏng các giá trị 2D hoạt động hợp lý trong phần lớn các trường hợp. Thay vì nới một góc mong muốn, bạn có thể lerp vectơ hướng chuẩn hóa mong muốn .

Một ưu điểm của phương pháp này so với phương pháp chọn đường đi ngắn nhất đến phương thức góc góc là nó hoạt động khi bạn cần nội suy giữa hơn hai giá trị.

Khi nới các giá trị màu, bạn có thể thay thế huebằng một [cos(hue), sin(hue)]vectơ.

Trong trường hợp của bạn, nới lỏng hướng khớp chuẩn hóa:

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

Mã có thể ngắn hơn nếu bạn có thể sử dụng lớp vectơ 2D. Ví dụ:

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

Bí quyết là hãy nhớ rằng các góc (ít nhất là trong không gian Euclide) được định kỳ bằng 2 * pi. Nếu chênh lệch giữa góc hiện tại và góc mục tiêu quá lớn (tức là con trỏ đã vượt qua ranh giới), chỉ cần điều chỉnh góc hiện tại bằng cách thêm hoặc trừ 2 * pi tương ứng.

Trong trường hợp này, bạn có thể thử các cách sau: (Tôi chưa bao giờ lập trình bằng Javascript trước đây, vì vậy hãy tha thứ cho phong cách mã hóa của tôi.)

  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 : Trong quá trình thực hiện này, việc di chuyển con trỏ quá nhanh xung quanh tâm khớp khiến nó bị giật. Đây là hành vi dự định, vì vận tốc góc của khớp luôn tỷ lệ thuận với dtheta. Nếu hành vi này là không mong muốn, vấn đề có thể dễ dàng được khắc phục bằng cách đặt một nắp trên gia tốc góc của khớp.

Để làm điều này, chúng ta sẽ cần theo dõi vận tốc của khớp và tăng tốc tối đa:

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

Sau đó, để thuận tiện, chúng tôi sẽ giới thiệu chức năng cắt:

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

Bây giờ, mã chuyển động của chúng tôi trông như thế này. Đầu tiên, chúng tôi tính toán dthetanhư trước, điều chỉnh joint.anglekhi cần thiết:

  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;

Sau đó, thay vì di chuyển khớp ngay lập tức, chúng tôi tính toán vận tốc mục tiêu và sử dụng clipđể buộc nó trong phạm vi chấp nhận được.

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

Điều này tạo ra chuyển động trơn tru, ngay cả khi chuyển hướng, trong khi thực hiện các phép tính chỉ trong một chiều. Hơn nữa, nó cho phép vận tốc và gia tốc của khớp được điều chỉnh độc lập. Xem bản demo tại đây: http://codepen.io/anon/pen/HGnDF/

Tôi thích các câu trả lời khác được đưa ra. Rất kỹ thuật!

Nếu bạn muốn, tôi có một phương pháp rất đơn giản để thực hiện điều này. Chúng tôi sẽ giả định góc cho những ví dụ này. Khái niệm này có thể được ngoại suy thành các loại giá trị khác, chẳng hạn như màu sắc.

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

Tôi chỉ tạo cái này trong trình duyệt và chưa bao giờ được thử nghiệm. Tôi hy vọng tôi có logic ngay lần thử đầu tiên.

[Chỉnh sửa] 2017/06/02 - Làm rõ logic một chút.

Bắt đầu bằng cách tính toán distanceForward và distanceBackwards, và cho phép các kết quả mở rộng ra ngoài phạm vi (0-360).

Bình thường hóa các góc đưa các giá trị đó trở lại phạm vi (0-360). Để thực hiện việc này, bạn thêm 360 cho đến khi giá trị trên 0 và trừ 360 trong khi giá trị cao hơn 360. Các góc bắt đầu / kết thúc sẽ tương đương (-285 giống với 75).

Tiếp theo bạn tìm góc Chuẩn hóa nhỏ nhất của khoảng cách Khoảng cách tiến hoặc Khoảng cách lùi. distanceForward trong ví dụ trở thành 75, nhỏ hơn giá trị chuẩn hóa của distanceBackward (300).

Nếu distanceForward là nhỏ nhất VÀ endAngle <startAngle, hãy mở rộng endAngle ngoài 360 bằng cách thêm 360. (ví dụ: nó trở thành 375).

Nếu distanceBackward là nhỏ nhất VÀ endAngle> startAngle, hãy mở rộng endAngle xuống dưới 0 bằng cách trừ 360.

Bây giờ bạn sẽ chuyển từ startAngle (300) sang endAngle mới (375). Công cụ sẽ tự động điều chỉnh các giá trị trên 360 bằng cách trừ 360 cho bạn. Nếu không, bạn sẽ phải lerp từ 300 đến 360, THÌ lerp từ 0 đến 15 nếu động cơ không bình thường hóa các giá trị cho bạn.