围绕鼠标光标旋转画布对象

Question

我正在尝试复制这种效果：http://hakim.se/experiments/html5/trail/03/

我有这个作为粒子构造函数：

function Particle(x, y) {
    this.x = x;
    this.y = y;
    this.radius = 4;
    this.color = '#f0f';
    this.speed = 15;
    this.angle = 0;
}

我正在使用这个循环来为所有粒子实例设置动画：

for (var i = 0, len = particles.length; i < len; i++) {
    var dx = mouse.x - particles[i].x,
        dy = mouse.y - particles[i].y,
        angle = Math.atan2(dy, dx);

    particles[i].vx = Math.cos(angle) * particles[i].speed;
    particles[i].vy = Math.sin(angle) * particles[i].speed;
    particles[i].x += particles[i].vx;
    particles[i].y += particles[i].vy;
    particles[i].draw(ctx);
}

粒子跟随鼠标，但到达光标并开始在其周围闪烁，这不是预期的行为。我想在光标周围转一圈，如示例中所示。有趣的部分是，如果我将particle.speed 设置为30 并将角度添加1000，粒子围绕光标旋转，但速度非常快并且破坏效果...

你可以在这里看到一个活生生的例子：http://codepen.io/gbnikolov/pen/EwafI

欢迎所有建议，提前致谢！

附：我知道指向示例的代码很容易找到，但我对 javascript 比较陌生，而且我不太擅长阅读其他人的代码，也不太了解其背后的逻辑。..

Answer 1

当前粒子的目标是鼠标光标。但这不是你想要的目标。您需要一个围绕光标移动的目标。而且您希望每个粒子都有一个不同的目标，这样它们就不会悬停在同一个地方。

还有一些其他的东西是原版做的而你没有做的：

• 在原文中，粒子速度取决于到目标的距离
• 他们似乎不能立即改变方向，而是相对缓慢地改变他们的运动方向。