Example Effects

Here are a few pre-made effects I made using the particle system. These are meant to be examples of how some effects are made and serve as inspiration or a basis for other effects you might make. I encourage you to play round with different properties of each effect, change the generator shape, change the color or scale animation, change the expansion, or anything property, and see what happens!

Fire

It's basically just the nootils fire but I used this particle system to make it.

const fire = new ParticleSystem(0, 100, 600);
fire.generator.name = "FirePS";
fire.generator.shape = "Direction";
fire.generator.scale = [0, 0, 0];
fire.generator.position = [0.6, 0, 5];
fire.generator.expansion = [3, 0, 0];
fire.particle.life = 4;
fire.particle.distance = 6;
fire.particle.animate.color = [[1, 1, 1, 1, 0], [1, 1, 0, 1, 0.25], [1, 0.5, 0, 1, 0.5], [1, 0, 0, 1, 1]];
fire.particle.animate.dissolve = [[1, 0.1], [1, 0.7], [0, 1]];
fire.push(x => {
    x.animate.localRotation = [[rand(0, 180), rand(0, 180), rand(0, 180), 0], [rand(0, 180), rand(0, 180), rand(0, 180), 1]]
});

Rain

This rain is heavily based off (aka transferred into this particle system) of the rain from the beginning of Heliov. You can turn up the intensity by adding more particles

const rain = new ParticleSystem(0, 100, 1000)
rain.particle.life = 0.5;
rain.particle.distance = 1000;
rain.particle.wallScale = [1 / 15, 20, 1 / 15];
rain.generator.name = "RainPS";
rain.generator.shape = "Direction";
rain.generator.rotation = [180, 0, 0]
rain.generator.position = [0.6, 60, 100]
rain.generator.scale = [200, 15, 300]
rain.particle.animate.color = [1, 1, 1, 0]
rain.particle.animate.dissolve = [[0.5, 0]]
rain.push();

Fireflies

How I made this fireflies effect is by starting off by making a "Field" particle system, this makes all particles in a specific region to spawn and despawn, which is what we want for this effect. So I set the scale of the generator to a large area for the particles to spawn in, and then center the generator far in front of the player. The lifespan of each particle will have to be relatively short, so I set each particle's lifespan to 4. After each particle will spawn, they will move 1 unit in an direction, along with a dissolve animation to fade the particles in, a color animation to animate the brightness of the fireflies, and set the scale of each particle to be small. After all of these steps you have an effect that looks like fireflies!

const fireflies = new ParticleSystem(0, 100, 1000);
fireflies.generator.name = "FirefliesPS";
fireflies.generator.shape = "Field";
fireflies.generator.scale = [100, 10, 100];
fireflies.generator.position = [0.6, 0, 50];
fireflies.particle.life = 4;
fireflies.particle.distance = 1;
fireflies.particle.animate.dissolve = [[0, 0], [1, 0.25], [1, 0.75], [0, 1]];
fireflies.particle.animate.color = [[0, 0, 0, 0, 0], [10, 10, 0, 10, 0.5], [0, 0, 0, 0, 1]]
fireflies.particle.animate.scale = [0.1, 0.1, 0.1]
fireflies.push();

Rainbow Swirl

I've found out that animating the rotation of each particle can make these really cool swirl effects, go try it out yourself!

const rSwirl = new ParticleSystem(0, 100, 1000)
rSwirl.particle.distance = 5;
rSwirl.generator.name = "RainbowSwirlPS"
rSwirl.generator.shape = "Direction"
rSwirl.generator.scale = [2, 2, 2]
rSwirl.generator.position = [0, 2, 10]
rSwirl.particle.animate.color = [[10, 0, 0, 10, 0], [0, 10, 0, 10, 0.333], [0, 0, 10, 10, 0.666], [10, 0, 0, 10, 1]]
rSwirl.particle.animate.dissolve = [[0, 0], [1, 0.1], [1, 0.75], [0, 1]]
rSwirl.particle.animate.scale = [[0, 0, 0, 0], [2, 2, 2, 0.5], [1, 1, 1, 1]]
rSwirl.particle.animate.rotation = [[0, 0, 0, 0], [-90, -90, -90, 1]]
rSwirl.particle.animate.localRotation = [[0, 0, 0, 0], [90, 90, -90, 0.5], [0, 180, -180, 1]]
rSwirl.generator.expansion = [4, 4, 4];
rSwirl.push(x => {
    x.animate.position = [0, 0, 20]
})

Stars

For stars the generator had to produce all the stars instantly, though to prevent lag I set the duration that the generator produces for to 0.02. I set the generator shape to "Sphere" to create a sphere of randomly scattered particle around the player, and turn the expansion up to 7500 so the stars would spawn far away from the player. I set the distance of the stars to also 7500 so they won't move over time. I set the life of each particle to 1000, so that they will last 1000 beats before they disappear, and I made the scale of each star pretty big and turned up the color like crazy so you can see the stars since they're so far away. After these steps, I had myself a starry night sky!

const stars = new ParticleSystem(0, 0.02, 400);
stars.generator.name = "StarsPS";
stars.generator.shape = "Sphere";
stars.generator.expansion = [7500, 7500, 7500];
stars.particle.distance = 0;
stars.particle.life = 1000;
stars.particle.animate.scale = [7.5, 7.5, 7.5];
stars.particle.animate.color = [100, 100, 100, 100];
stars.push();

Explosion

I made an explosion effect by first making all the particles spawn at the same time, but to reduce lag I made the generator produce particles for 0.02 beats. I made the generator shape to "Sphere" and set the distance of each particle to 10 to make particles explode in all directions. Each particle has a life of 1, since this effect is very short, and to add some weight to each particle I added the "easeOutExpo" easing to all particles. I then made all of the particles really small, animated their color from white to blue overtime, and made them fade out after a certain amount of time. I then set the position of the generator a little in front of the player so its not blowing up right in the player's face!

const explosion = new ParticleSystem(2, 0.02, 250);
explosion.generator.name = "ExplosionPS";
explosion.generator.shape = "Sphere";
explosion.particle.distance = 10;
explosion.particle.life = 1;
explosion.particle.easing = "easeOutExpo";
explosion.particle.animate.scale = [0.1, 0.1, 0.1];
explosion.particle.animate.color = [[1, 1, 1, 10, 0], [0, 0, 10, 10, 0.2]];
explosion.particle.animate.dissolve = [[1, 0], [1, 0.6], [0, 0.8]];
explosion.generator.position = [0.6, 2, 20]
explosion.push();