Hey dear community!
Today I want to show you how you can use NPE to build advanced effects with almost no code — and have fun doing it!
It’s also the perfect excuse to walk you through how to optimize your code in this kind of scenario.
Here’s the Playground: Babylon.js Playground
And here is the NPE:
What’s happening under the hood?
We start by spawning particles from a box shape. Their dead color is set to black, and their size to 0:
After that, we just update the position as usual — nothing fancy here:
Then comes the fun part: we update the direction to nudge particles toward a target vector (which you can control in the PG):
Here I want to highlight the LocalVariable block. It stores the result of previous computations per particle (or per update loop), which is a great way to keep things tidy and efficient.
We do something similar for color:
(Yes, isolating those blocks is a bit of a puzzle!)
And finally, we apply the same logic to size:
The Big Idea
The trick is simple but powerful:
We compute the ratio between
- the distance from the source → target
- and the distance from the source → particle
Then we use that ratio to lerp between values — for size and color.
Keep in mind that particles can actually overshoot the target, since their direction evolves smoothly over time.
Hope you like it!
