Поворот холста объекта вокруг курсора мыши

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

Все предложения являются более прием, заранее спасибо!

P.S. Я знаю, что код для заостренного примера легко найти, но я относительно новичок в javascript, и я не так хорошо разбираюсь в коде других людей и не могу понять логику позади него.

Answer 1

В настоящее время целью ваших частиц является курсор мыши. Но это не та цель, которую вы хотите. Вы хотите, чтобы цель перемещалась вокруг вашего курсора. И вы хотите, чтобы у каждой частицы была другая цель, поэтому они не парят на одном месте.

Есть также некоторые другие вещи, которые оригинал делает, и вы не:

• в оригинале, скорость частицы зависит от расстояния до цели
• , кажется, они не могут изменить направление мгновенно, но изменить направление их движения относительно медленно.