paper.js random triangle shape

javascript, paperjs

Solution

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

}

Problem

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.

Original source