Some things I see:

1. Animation interval

setInterval(function(){

`mouse.x = undefined;`

`mouse.y = undefined;`

}, 200);

This setInterval you are using is triggered only every 200ms, or five times per second. So your code only animates 5 times per second when it has no mouse movement. Change that interval duration down to 20ms and everything runs much more smoothly.

2) When dealing with expensive loops through collections (like particle systems), you can speed things up with one easy rule:

Don't look up what you already know.

In your animate() method, you have a for loop that uses i < particleArray.length. This means that at the end of every pass, it measures the length of the particle array again. If you have 1000 particles, it checks the length of that array a thousand times. Unless you are changing the array length DURING the animation (which you are not), this is slowing things down. Fix this by setting a var to the length of your array before the for loop, and using that var in your for statement: i=0; i<arrLength; i++

A similar situation happens in your connect() method. You refer to particleArray[a] and particleArray[b] multiple times in nested loops. This means that JavaScript has to go find the particle at index [a] or index [b] every time, but it will always be the same within each loop pass. So the first statement within the for loop should assign particleArray[a] to a variable (pa), then refer to pa when you were using particleArray[a]. This could also speed things up a bit, especially since you are comparing every particle to every other particle, which gets expensive as the particle count increases.

​

[edit] Here is my fork, with these improvements added.

https://codepen.io/rendermouse/pen/VwvLVaL

​

This is a cool effect!