paper.js random triangle shape

Question

I am trying to make a very simple animation with paper.js. What I want to do is how can I make random shape triangles. I tried to make several layers to show the various shapes but it turned out that it took for long to load the page. Below are the codes that I have now. If anybody know the solution, that would be great. Thank you!

   var count = 30;

   var path = new Path.RegularPolygon({
      center:new Point(30, 100),
       sides: 3,
       radius: 2000,
   });
   path.fillColor = 'rgba(98, 178, 177, 0.18)';
   path.blendMode = 'multiply';
   path.scale(1,0.8);
   path.rotate(-90);


   var symbol = new Symbol(path);


   // Place the instances of the symbol:
   for (var i = 0; i < count; i++) {
      // The center position is a random point in the view:
      var center = Point.random() * view.size;
      var placedSymbol = symbol.place(center);
      placedSymbol.scale(i / count);
   }


   // The onFrame function is called up to 60 times a second:
   function onFrame(event) {
      path.fillColor.hue += .0;
      path.rotate(.1);



      for (var i = 0; i < count; i++) {
         var item = project.activeLayer.children[1];


         item.position.x += item.bounds.width / 1000;
         item.position.y += item.bounds.height / 2000;



         if (item.bounds.left > view.size.width) {
            item.position.x = -item.bounds.width;
         }
         if (item.bounds.top > view.size.height) {
            item.position.y = -item.bounds.height;
         }

      }
   }

This is the JSFiddle that illustrates what I've tried so far.

Answer 1

If you want to have different shapes then do not use a symbol but create every path with new random points and put each into an array.

http://jsfiddle.net/djv4zg9q/

for (var i = 0; i < count; i++) {
    //create a triangle with random points
    path[i] = new Path();
    path[i].add(new Point(50*(Math.random()+0.5), 0));
    path[i].add(new Point(50*(Math.random()+0.5), 100*(Math.random()+0.5)));
    path[i].add(new Point(0, 50));
    path[i].closed = true;

    path[i].fillColor = 'rgba(98, 178, 177, 0.18)';
    path[i].blendMode = 'multiply';
        
    var randomTranslate = view.size * new Point(Math.random()-0.5, Math.random()-0.5) * 2;
    path[i].translate(randomTranslate);
    path[i].rotate(180*Math.random());
    path[i].scale(20 * (i+1) / count);
}

and then walk through that array and move each path

for (var i = 0; i < count; i++) {
    //path[i].fillColor.hue += .1;
    path[i].rotate(.1);
    path[i].position.x += view.size.width / 1000;
    path[i].position.y += view.size.height / 2000;

    if (path[i].bounds.left > view.size.width || path[i].bounds.top > view.size.height) {
        var random = Math.random();
        path[i].position.x = -path[i].bounds.width * random;
        path[i].position.y = -path[i].bounds.height * (1-random);
    }

}