Polygon "mask" support

[vincurekf]

Added full support for polygon mask. Particles can now be generated only inside, outside or on path of polygon generated from given SVG file. In case of "inline" config the particles bounce randomly in specified radius, otherwise bounce off of polygon sides.

New settings:

"polygon": {
    "debug": false,
    "type": 'inside',
    "move": {
      "radius": 10
    },
    "url": 'demo/svg/deer.svg'
}

By setting debug to true, the polygon mask will be drawn on canvas.

Generating of the polygon from SVG file is limited to the first path found in given SVG file and it should be closed. And in case of inside or outside settings the path lines should not overlap otherwise you get weird bouncing effect.

One drawback is that calculating polygon intersection is expensive and even in chrome (on my not so powerfull pc) 100-200 particles is the recommended ammount. Demo can be seen here: http://particles.vincurekf.cz/demo/

[dlewand691]

Doesn't seem to be working. Have tried putting the json in both the "shape" and "particles" section but doesn't seem to recognize my SVG. Are there any specific requirements for the SVG? Also, your demo link doesn't seem to be live. Thank you!

[vincurekf]

Hi Daniel, I am sorry about the link, here is working example:
http://meshr.cz/particles/demo/

For your problem. Is the SVG in the right format? Check the SVG in demo folder:
https://github.com/vincurekf/particles.js/blob/master/demo/svg/deer.svg
The basic structure is <svg><path/></svg>, the script is looking for the first <path> tag, and then generates array of vectors.

Also, the polygon options should be in the root of the config object:

particlesJS('particles-js',{
    "particles": {...},
    ... rest of the config ...
    "polygon": {
        "debug": false,
        "type": "inline",
        "move": {
          "radius": 20
        },
        "url": "svg/deer.svg"
    }
});

Sources are here:
https://github.com/vincurekf/particles.js/tree/master/demo

[yannlodewijck-nurun]

Thanks Vinçent, this works perfectly in Firefox but no longer works in Chrome due to the removal of the "getPathSegAtLength" method (see google dev). I tried to use the pathseg polyfill without any success (crash my tab). I'm not an SVG expert and I was wondering if there was another workaround?

[TheAbyss]

same issue as @yannlodewijck-nurun

[sandcastles]

same issue as yann and The Abyss, can't get a workaround for Chrome

[vincurekf]

Thanks @yannlodewijck-nurun for noticing.
I've just tried the pathseg polyfill and everything seems to be working as it should, you can check the demo again which now uses the mentioned polyfill.
I hope that helps.

[JPLemelin]

@vincurekf I create a PR to your fork.

I reduce the polygon generation time from svg, it's almost instant now!
vincurekf#1

[aaronfischer]

I'm sorry to be the guy to do this, but this doesn't seem to be working in IE (IE 11 or Edge). No console errors though. I'm not sure if maybe the SVG appears really "zoomed" or if it just ignores the shape boundaries altogether.

If it is zoom, how would I control the size since this is converted to canvas?

[RouillerRomain]

any news about this issue ?...