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, который иллюстрирует мои попытки.


javascript paperjs
person shinyatk    schedule 30.05.2014    source источник
comment
Можете ли вы создать скрипку?   -  person Barbara Laird    schedule 30.05.2014
comment
Если вы хотите создать треугольники произвольного размера, вам нужно настроить значения, соответствующие размеру, а не цвету и повороту, как вы делаете в функции onFrame   -  person Foreign Object    schedule 30.05.2014
comment
Я только что сделал скрипку – jsfiddle.net/5EKtL/2   -  person shinyatk    schedule 30.05.2014
comment
Не понятно в чем проблема.   -  person cherouvim    schedule 30.05.2014
comment
На данный момент с приведенным выше кодом все треугольники имеют одинаковую форму. Я хочу сделать их разной формы.   -  person shinyatk    schedule 30.05.2014

Ответы (1)


arrow_upward
5
arrow_downward

Если вы хотите иметь разные формы, не используйте символ, а создайте каждый путь с новыми случайными точками и поместите каждую в массив.

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

}
person Christoph    schedule 31.05.2014
comment
Большое спасибо! Это отличное решение! - person shinyatk; 31.05.2014