Absorber Split on Click or Size limit reached

[RegiByte]

Contact Details

reginaldo.junior696@gmail.com

What is your request?

Hello @matteobruni! First of all I'd like to congratulate you for the amazing work on this library,
The performance is great and there is a lot of flexibility to come up with all kinds of effects.

There is one type of effect that I am trying to achieve and I would like to ask if it is possible to do it with the existing plugins or if I should craft my own.

The effect idea is this:

• Have an absorber on the center of the screen
• Have two emitters, one on the left side and another on the right side of the screen emitting heart shapes
• When the absorber reaches it's size limit I would like to split that observer into new particles that get spread around the screen and a new observer in place of the old one
• Same thing should happen if the absorber gets clicked

Right now I don't see how I would detect that the absorber reached it's size limit or a click to destroy the absorber to create a new one.

Here is a sample config code that I am using for testing:

import { ISourceOptions } from "@tsparticles/engine";

export const orbitingLoveConfig: ISourceOptions = {
  name: "orbiting-love",
  particles: {
    number: {
      value: 0,
      density: {
        enable: true,
      },
    },
    color: {
      value: ["#ffffff", "#77ccff", "#ff3333", "#ffff33"],
    },
    shape: {
      type: "heart",
    },
    opacity: {
      value: 1,
    },
    size: {
      value: {
        min: 1,
        max: 10,
      },
    },
    links: {
      enable: false,
      distance: 150,
      color: "#ff0000",
      opacity: 0.4,
      width: 1,
    },
    move: {
      enable: true,
      speed: 0.5,
      warp: true,
    },
  },
  interactivity: {
    detectsOn: "window",
    events: {
      onClick: {
        enable: true,
        mode: "split",
      },
    },
    modes: {
      push: {
        quantity: 4,
      },
    },
  },
  absorbers: {
    orbits: false,
    destroy: true,
    size: {
      value: 5,
      density: 500,
      limit: 100,
    },
    position: {
      x: 50,
      y: 50,
    },
    color: "#000",
  },
  emitters: [
    {
      position: {
        x: 75,
        y: 50
      },
      rate: {
        delay: 0.5,
        quantity: 1
      },
    },
    {
      position: {
        x: 25,
        y: 50
      },
      rate: {
        delay: 0.5,
        quantity: 1
      },
    },
  ],
  background: {
    color: "#fff",
    image: "",
    position: "50% 50%",
    repeat: "no-repeat",
    size: "cover",
  },
};

tsParticles Version

3.3.0

Code of Conduct

• I agree to follow this project's Code of Conduct

[matteobruni]

Hi @RegiByte,

It's not possible to split the Absorber using the current plugins, sorry. You can customize it starting from the existing plugin or you can submit a PR with this.