chuyển động màu nâu hạt theo hướng

Question

Tôi đang cố gắng sử dụng chuyển động màu nâu để tạo ra một nhóm các hạt chuyển động ngẫu nhiên. http://jsfiddle.net/J75Em/16/

Cho đến nay tôi đã có các hạt chuyển động ngẫu nhiên nhưng tôi không chắc chắn cách đặt hướng chuyển tiếp để làm cho nó trông tự nhiên hơn.

Tôi đã cố gắng sử dụng thay đổi trong trục x và y để tính toán xoay bằng cách sử dụng atan, bạn có thể thấy điều này bằng cách xoay vòng chưa hoàn thành nhưng điều này dường như không hoạt động tốt.

Đây có phải là phương pháp phù hợp cho loại chuyển động này không? cảm ơn;

Answer 1

Điều này khá gọn gàng!

Bạn sắp sửa thực hiện đúng cách nhưng bạn thực sự nên sử dụng hàm atan2. Điều này loại bỏ sự cần thiết cho bất kỳ 0 kiểm tra.

Chức năng atan2 mang đến cho bạn một góc mà là ngược từ vector x dương

(1, 0) --->

Những con ong là 90 độ ra khỏi góc bắt đầu này, do đó bạn phải trừ 90 độ từ hướng. (tùy thuộc vào cách mà bạn thực hiện phép tính dy và dx, bạn có thể cần phải thêm)

Bạn có thể thấy hướng thay đổi nhanh chóng, vì vậy bạn có thể xem xét giới hạn thay đổi tiếp theo cho một tập hợp các thay đổi gây ra một góc thay đổi dưới ngưỡng nào đó. Điều này sẽ làm cho chuyển động mượt mà hơn một chút.

Tôi thực sự sẽ đi về nó bằng cách tạo ra một góc giữa nói -pi/8 và pi/8 radian, và một chiều dài ngẫu nhiên. Về cơ bản sử dụng tọa độ cực. Sau đó thêm ngẫu nhiên mới này cực bù đắp cho x và vị trí y như

newX = currentX + (randomLength * cos(randomAngle + currentAngle)) and 
newY = currentY + (randomLength * sin(randomAngle + currentAngle)) 

Nếu bạn làm việc với góc bạn cũng có thể tạo những hiệu ứng tự nhiên hơn như thế nào nếu bạn muốn các con ong để ở lại trong một khu vực nhất định, bạn có thể buộc một thiên vị về phía trung tâm của khu vực khi chúng tiến gần hơn và gần hơn với mép.

Cập nhật:

Vì vậy, tôi đã xem xét kỹ hơn. Vấn đề là bạn mong đợi. Xoay vòng để đặt xoay khi nó thực sự thêm vào vòng quay

Có 2 tùy chọn để sửa lỗi này.

1. Xoay bởi sự khác biệt giữa trước và góc hiện

2. Đặt xoay bằng cách sử dụng phương pháp .transform

Bạn có thể thấy giải pháp 2 trong hành động ở đây http://jsfiddle.net/c5A2A/