How to get better performance with a LOT of particles? Canvas

Question

Alright, I was really intrigued with how i-remember.fr made their circle out of particles on their homepage. Not the fact that they made a circle, but how there seems to be thousands of the particles, all while there is no performance issue. So I went about trying to replicate this circle, trying to get the same performance - without any luck thus far.

I can seem to get about 3000 particles in there before everything starts to get choppy, but I'm not getting anywhere near as many particles as they have. I am using RequestAnimationFrame to help out with performance, and everything else I can think of... Can I get some help to get more particles in there?

The Engine

---

Javascript

$('.blackhole').click(function() {
    $(this).toggleClass('open_blackhole');
    $(this).toggleClass('close_blackhole');
});


// Define Apparatus Variables.
var cw = window.innerWidth,
    ch = window.innerHeight,
    blackhole_entities = {},
    blackhole_entitiesIndex = 0,
    blackhole_entitieAmount = 3000, //6000
    canvas = $('<canvas/>').attr({
        width: cw,
        height: ch,
        id: "apparatus"
    }).appendTo('body'),
    context = canvas.get(0).getContext("2d");

var requestframe = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    // IE Fallback, you can even fallback to onscroll
    function(callback) {
        window.setTimeout(callback, 1000 / 60)
    };

// Default Entity "Class"
apparatus.blackhole = function(orbit) {
    blackhole_entitiesIndex++;
    this.id = blackhole_entitiesIndex;
    blackhole_entities[blackhole_entitiesIndex] = this;

    this.width = 1;
    this.height = 1;
    this.orbit = orbit;

    this.velocity = Math.floor((Math.random() * 3200) + 3000);

    this.angle = (Math.PI * 2 / this.width) * Math.floor((Math.random() * cw*4) + 10);;
    var choice = Math.random() * 5;

    var rands = [];
    rands.push(Math.random() * 100 + 1);
    rands.push(Math.random() * 10 + 241);

    var choice2 = Math.random() * 4;

    var rands2 = [];
    rands2.push(Math.random() * 100 + 1);
    rands2.push(Math.random() * 180 + 211);

    this.distance = (rands.reduce(function(p, c) {
        return p + c;
    }, 0) / rands.length);

    this.distance2 = (rands2.reduce(function(p, c) {
        return p + c;
    }, 0) / rands2.length);
    this.increase = Math.PI * 2 / this.width;

    this.distancefix = this.distance;
    this.distance2fix = this.distance2;

    this.color = "255,255,255";
    this.alpha = 0.6

    this.bx = Math.random() * 20 + 1;
    this.by = Math.random() * 20 + 1;
    this.inplace = true;
}

apparatus.blackhole.prototype.draw = function() {
    if (this.orbit >= 2) {
        this.x = this.bx + this.distance * Math.cos(this.angle / this.velocity) + cw / 2;
        this.y = this.by + this.distance * Math.sin(this.angle / this.velocity) + ch / 2;
        this.alpha = 0.6;
    } else {
        this.x = this.bx + this.distance2 * Math.cos(this.angle / this.velocity) + cw / 2;
        this.y = this.by + this.distance2 * Math.sin(this.angle / this.velocity) + ch / 2;
        this.alpha = 0.4;
    }
    if ($('.blackhole').hasClass('open_blackhole')) {
      $('.blackhole').removeClass('close_blackhole');

        if (this.distance >= 171) {
            this.distance = this.distance - 4;
        } else if (this.distance <= 161) {
            this.distance= this.distance + 8;
        }

        if (this.distance2 >= 201) {
            this.distance2 = this.distance2 - 6;
        } else if (this.distance2 <= 161) {
            this.distance2 = this.distance2 + 6;
        }
    }
    if($('.blackhole').hasClass('close_blackhole')){
        if (this.distance >= this.distancefix + 4) {
            this.distance = this.distance - 4;
        } else if (this.distance <= this.distancefix - 5) {
            this.distance= this.distance + 5;
        }

        if (this.distance2 >= this.distance2fix + 10) {
            this.distance2 = this.distance2 - 4;
        } else if (this.distance2 <= this.distance2fix - 10) {
            this.distance2 = this.distance2 + 4;
        }

    }

    this.angle += this.increase;

    context.fillStyle = "rgba(" + this.color + "," + this.alpha + ")";
    context.fillRect(this.x, this.y, this.width, this.height);
}

apparatus.start = function() {
    apparatus('true');
}

apparatus.stop = function() {
    apparatus('false');
}

for (var i = 0; i < blackhole_entitieAmount; i++) {
    new apparatus.blackhole((Math.random() * 4));
}

var mode;
apparatus.spawn_blackhole = function(){
  for (i in blackhole_entities) {
    blackhole_entities[i].draw();
  }
}
function apparatus(mode) {
    if (mode == 'true') {
        var i;
        requestframe(function() {
            context.clearRect(0, 0, cw, ch);

            apparatus.spawn_blackhole(); 

            apparatus('true');
        });
    }
}

apparatus.start();

HTML

<div class="blackhole button closed_blackhole">
  BLACKHOLE
</div>

Hopefully this isn't a duplicate, I've been searching for quite a while.

Here is a CodePen link to my current engine. ( If you change the blackhole_entitieamount variable to, lets say 6000, you'll see it get VERY laggy.)

Answer 1

I think one of the biggest drawbacks is using jQuery inside the draw function. Things like that $('.blackhole').hasClass('close_blackhole') are terribly slowing you down in your case, when you do this thousands of times per frame. You're doing it three times for a whole, which means 9000 times per frame.. Either cache $('.blackhole') so that you get it down to blackhole_entitieAmount or best - remove it and think of some inner way to store it.

First try putting var blackhole = $('.blackhole'); at the very beginning of your code, and replace the later usages, then test again :)