A guide to select packages according to the use case

[longnguyen2004]

Contact Details

nguyen.long.908132@gmail.com

What is your request?

I'm trying to get used to the new micro-package system of v2, but I couldn't get it working for several hours. I ended up importing the slim package instead, which works, but it comes with a few features that I didn't use. It'd be very helpful to have a guide on how to select the correct packages for a particular config.

tsParticles Version

2.0.6

Which library are you using?

Svelte (svelte-particles)

Code of Conduct

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

[matteobruni]

This is already in my todo list, if you need help using only some features let me know

[longnguyen2004]

So with this config

const particles = {
	move: {
		enable: true
	},
	size: { value: 20 },
	shape: {
		type: "image",
		options: {
			image: [
				{
					src: "./assets/emoji1.png",
					width: 160,
					height: 160,
				},
				{
					src: "./assets/emoji2.png",
					width: 160,
					height: 160,
				},
				{
					src: "./assets/emoji3.png",
					width: 160,
					height: 160,
				}
			]
		}
	},
	rotate: {
		direction: "random",
		animation: {
			enable: true,
			speed: 5
		}
	}
}

const options = {
	detectRetina: true,
	fpsLimit: 120,
	fullScreen: true,
	emitters: [
		{
			autoPlay: true,
			particles: particles,
			direction: "outside",
			rate: {
				quantity: 5,
				delay: 0.1
			},
			life: {
				count: 1,
				duration: 5
			},
			position: {
				x: 50,
				y: 50
			}
		},
		{
			autoPlay: true,
			particles: particles,
			direction: "outside",
			rate: {
				quantity: 5,
				delay: 0.25
			},
			position: {
				x: 50,
				y: 50
			}
		}
	]
}

What packages do I need?

[matteobruni]

I updated the config a bit, just removed some standard values and moved move.direction inside particles properties, instead of emitters value, and of course images, since I didn't have yours.

(async (engine) => {
  await loadImageShape(engine);
  await loadBaseMover(engine);
  await loadAngleUpdater(engine);
  await loadSizeUpdater(engine);
  await loadColorUpdater(engine);
  await loadOpacityUpdater(engine);
  await loadEmittersPlugin(engine);
  
  const particles = {
    move: {
      enable: true,
      direction: "outside"
    },
    size: { value: 20 },
    shape: {
      type: "image",
      options: {
        image: [
          {
            src: "https://particles.js.org/images/fruits//apple.png",
            width: 32,
            height: 32
          },
          {
            src: "https://particles.js.org/images/fruits//avocado.png",
            width: 32,
            height: 32
          },
          {
            src: "https://particles.js.org/images/fruits//pear.png",
            width: 32,
            height: 32
          }
        ]
      }
    },
    rotate: {
      direction: "random",
      animation: {
        enable: true,
        speed: 5
      }
    }
  };

  const options = {
    particles: {
      number: {
        value: 0
      }
    },
    emitters: [
      {
        autoPlay: true,
        particles: particles,
        rate: {
          quantity: 5,
          delay: 0.1
        },
        life: {
          count: 1,
          duration: 5
        },
        position: {
          x: 50,
          y: 50
        }
      },
      {
        autoPlay: true,
        particles: particles,
        rate: {
          quantity: 5,
          delay: 0.25
        },
        position: {
          x: 50,
          y: 50
        }
      }
    ]
  };

  const container = await engine.load(options);
  
  setInterval(() => {
    const array = container.particles.array;
    
  console.log(array[Math.floor(Math.random() * array.length)].shape);
    }, 1000);
})(tsParticles);

I think the required color updater is a bug, since images could work without colors.

https://cdn.jsdelivr.net/npm/tsparticles-engine@2.0.6/tsparticles.engine.min.js
https://cdn.jsdelivr.net/npm/tsparticles-move-base@2.0.6/tsparticles.move.base.min.js
https://cdn.jsdelivr.net/npm/tsparticles-updater-size@2.0.6/tsparticles.updater.size.min.js
https://cdn.jsdelivr.net/npm/tsparticles-updater-angle@2.0.6/tsparticles.updater.angle.min.js
https://cdn.jsdelivr.net/npm/tsparticles-shape-image@2.0.6/tsparticles.shape.image.min.js
https://cdn.jsdelivr.net/npm/tsparticles-plugin-emitters@2.0.6/tsparticles.plugin.emitters.min.js
https://cdn.jsdelivr.net/npm/tsparticles-updater-opacity@2.0.6/tsparticles.updater.opacity.min.js
https://cdn.jsdelivr.net/npm/tsparticles-updater-color@2.0.6/tsparticles.updater.color.min.js

These are the included scripts.