Absorber Split on Click or Size limit reached

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

[X] I agree to follow this project's Code of Conduct

tsparticles / tsparticles