Animation lagging after sometime - Easeljs caching

Question

The animation works alright on load but after sometime it's lagging. I was creating new drops variables inside the for loop at first. Making it global didn't help. fps is 40 with 5 particles. Any help?

function init(){
  stage = new createjs.Stage("rain-canvas");
  createjs.Ticker.setFPS(fps);
  createjs.Ticker.addEventListener("tick", refresh);
}

function refresh(){
  for(var i = 0; i < particles; i++){
    drops = new createjs.Shape();
    xxx = Math.random() * viewportWidth;
    yyy = -10 + Math.random() * 10;
    drops.graphics.beginFill('#fff').rect(xxx, yyy, 2, 18);
    drops.alpha = 0.15 + Math.random() * 0.5;
    stage.addChild(drops);

    TweenLite.to(drops, 1.25, {y: viewportHeight + 150,
      onComplete: function(){
        stage.removeChild(drops);
      }, ease: Power1.easeNone
    });
  };
  stage.update();
}

Answer 1

@derz answer is sufficient, but I wanted to make a suggestion.

Particles should almost definitely not be shapes. Shapes get really expensive to render after you have a few hundred. Caching can make a huge difference, and in your case, you only have one shape, although you draw its x/y differently every time.

To simplify this:

1. Draw the shape once (at 0,0) and cache it
2. Use bitmaps instead, and point to the cached shape
3. Set the x/y directly each time

Here is a quick sample: http://jsfiddle.net/r0f04fvt/

Caching A Shape

var template = new createjs.Shape();
template.graphics.beginFill('#fff').rect(0, 0, 2, 18);
template.cache(0,0,2,18); // Cache it

var drops = new createjs.Bitmap(template cacheCanvas);

One additional thing you can do, which is common in particle engines is to pool your particles, rather than constantly destroying/creating them. Look into Object Pooling for more info.