Increasing real-time performance on canvas' effects

Question

I\'m trying to use the following effect on a HTML5 game: http://somethinghitme.com/projects/metaballs/

But since its a game (as opposed to graphical demo) I have ti

Answer 1

There is scope of improvement in programming, in drawing particle section.

instead of using

if(leftover > 0) {
        do {
            this.process(i++);
        } while(--leftover > 0);
    }

you can just use this

while(leftover > 0) {
        this.process(i++);
        leftover --;
   }

This will reduce one step of condition checking of if and also the (--)operator that decrements one value and checks. this will reduce the complexity

with all do while you have (--) that can be removed, with simple statement this will reduce the Cyclomatic Complexity of this particular code and make this code faster.

ultimately this will give the performance improvement with the faster processing of your code and less use of CPU and resources. although Ken's answer is also working one, I have created one more fiddle that is similar to your sample site with more speed.

fiddle

If any problem please leave a comment, and update fiddle with game code for performance check.