ng-particles polygon mask bubble.speed and polygon.type not defined

[francoismg]

Hi, I'm trying to add a polygon mask to an angular website but the bubble.speed and polygon.type properties in the particlesOption are keeping me from building the app and without the type property the particles are just randomly distributed without following any pattern.

I used the ISourceOptions from ng-particles to fix some issues but it doesn't seem to work for those two.

I tried two of the codepen polygon mask demos (one using a svg and the other using paths) but i'm running on the same issues with both.

The ngparticles examples on github works so everything seem to be imported correctly.

Is there someting I'm missing or didn't understand ?

Thanks for your help.

EDIT : I tried to import the PolygonMaskType Enum like this
import {Type as PolygonMaskType} from "tsparticles/Plugins/PolygonMask/Enums/Type"
and used it like this
type: "inline" as PolygonMaskType.inline
after that the compilation doesn't fail but I only got a black canvas

export class HeroComponent implements OnInit {

  id = "tsparticles";
  
  particlesOptions: ISourceOptions;
  
  constructor() {
    this.particlesOptions = {
          background: {
            color: "#000"
          },
          detectRetina: false,
          fpsLimit: 60,
          interactivity: {
            detectsOn: "canvas",
            events: {
              onHover: {
                enable: true,
                mode: "bubble"
              },
              resize: true
            },
            modes: {
              bubble: {
                color: "#ffff00",
                distance: 100,
                duration: 2,
                opacity: 1,
                size: 10,
                speed: 3
              }
            }
          },
          particles: {
            color: {
              value: "#fff"
            },
            links: {
              blink: false,
              color: "#fff",
              consent: false,
              distance: 20,
              enable: true,
              opacity: 0.8,
              width: 1
            },
            move: {
              attract: {
                enable: false,
                rotate: {
                  x: 600,
                  y: 1200
                }
              },
              bounce: false,
              direction: "none",
              enable: true,
              outMode: "bounce",
              random: false,
              speed: 1,
              straight: false
            },
            number: {
              density: {
                enable: false,
                area: 2000
              },
              limit: 0,
              value: 400
            },
            opacity: {
              animation: {
                enable: true,
                minimumValue: 0.3,
                speed: 0.5,
                sync: false
              },
              random: { enable: true, minimumValue: 0.3 },
              value: 0.8
            },
            shape: {
              type: "circle"
            },
            size: {
              value: 1
            }
          },
          polygon: {
            move: {
              radius: 10
            },
            inlineArrangement: "equidistant",
            scale: 1,
            type: "inline",
            position: {
              x: 20,
              y: 40
            },
            data: {
              path:
                "M129.6,200.8c0,62.6-26.5,78.4-80.2,105c6.9,4.6,16.2,10.1,32,17.6c41.4-19.6,81.4-45.3,81.4-113.8V65.1h-33.2V200.8z M98.1,65.1H0v28.7h65v91.9c0,42-2.5,45.9-57.1,70.5c3.8,9.6,9.3,19,16.5,27.5c61.7-27.5,73.7-41.7,73.7-89.3V65.1z",
              size: {
                width: 162.7,
                height: 323.3
              }
            }
          }
        }

  }

[matteobruni]

Hi @francoismg,

I made a CodeSandbox sample here: https://codesandbox.io/s/youthful-bardeen-cncxr?file=/src/app/app.component.ts

About this

type: "inline" as PolygonMaskType.inline

it's preferred to write like this:

type: PolygonMaskType.inline

And bubble.speed is non-existing, also particles.js don't use it, if you see that in other configurations you can safely remove since the bubble hover/click interaction is not using it.

Let me know if the sample works

[francoismg]

Hi @matteobruni ,

Thanks a lot for the answer.

I don't know if there's something I'm missing but I can't see any particles on the codesandbox link you gave. There's the angular logo svg but no particles or anything.

The console output this error
`ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'numberOfItems' of undefined
TypeError: Cannot read property 'numberOfItems' of undefined

at parsePaths (https://cncxr.csb.app/node_modules/tsparticles/Plugins/PolygonMask/PolygonMaskInstance.js:46:30)`

So I guess that's why the polygon isn't drawn.

I tried using your code on my project anyway with the
type: PolygonMaskType.inline
thing and everything compiles fine the angular svg is there but there's no particles either and I got the same error as with codesandbox.

EDIT : I saw somewhere that you spoke about some pathseg library or something like that, could it be related to that since the error seems to occur with the pathSegList property ?

[matteobruni]

My bad I forgot to import the pathseg library. I've updated the CodeSandbox I sent you before and it should work now.

That issue is with Chrome and I'm using Safari that is not affected.

[francoismg]

The "import pathseg" dit it, thanks a lot :)