Absorber Split on Click or Size limit reached
Author: RegiByteCreated Mar 14, 2024Updated Mar 15, 2024
Labelsenhancementhelp wantedgood first issueup-for-grabspluginfeature_request
Contact Details
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
Source: tsparticles/tsparticles