javascript – paper.js随机三角形

我正在尝试使用paper.js制作一个非常简单的动画.
我想要做的是如何制作随机形状的三角形.
我试图制作几个图层来显示各种形状,但事实证明,加载页面需要很长时间.
以下是我现在的代码.如果有人知道解决方案,那就太棒了.
谢谢！

   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;
         }

      }
   }

这是JSFiddle,说明了我到目前为止所尝试的内容.

解决方法:

如果你想拥有不同的形状,那么不要使用符号,而是使用新的随机点创建每个路径,并将每个路径放入一个数组中.

http://jsfiddle.net/76X8G/1/

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);
}

然后遍历该数组并移动每个路径

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);
    }

}

标签：javascript,paperjs
来源： https://codeday.me/bug/20190830/1770488.html