Example: Particle Systems

This example showcases how to use particle systems in Beast2D. A particle system allows you to simulate effects like fire, smoke, sparks, or magic using simple physics and visual customization.

The addParticleSystem() function initializes a system that continuously emits particles with specific behaviors. You can control the life span, size, color, velocity, acceleration, and even the visual effect of each particle over time.

We define how particles appear using materialFunction, set randomized sizes and initial acceleration vectors, and launch the system using emit(). This example illustrates a colorful dynamic system that animates beautifully.

Particle Properties:

  • initial_velocity: Starting speed and direction (vector).
  • acceleration: Acceleration applied each frame (vector).
  • material: Starting appearance (e.g., ["color", "yellow"]).
  • life: Lifespan of a particle (seconds).
  • life_cycle: Speed at which life decreases.
  • count: Number of particles to emit per interval.
  • size: Dimensions of each particle.
  • dt: Time step per update.
  • time: Time since the particle was created.
  • delay: Wait time before emission starts.
  • interval: Time between emissions.
  • direction: This is the direction of the particles.e.g.0 for local direction, 1 for global direction

Individual Particle Properties

Each particle object inherits and modifies these properties after emission:

  • velocity: Current speed and direction of the particle.
  • acceleration: Force applied over time to change velocity.
  • material: Current visual state (color, texture, etc.).
  • initial_material: Original visual state, used for transitions.
  • life: Remaining life of the particle.
  • initial_life: Starting life, useful for interpolation.
  • life_cycle: Rate of life decay (overwrites system default if set).
  • size: Current size of the particle.
  • initial_size: Starting size, used for scaling effects.
  • direction: This is the direction of the particles.e.g.0 for local direction, 1 for global direction

Checkout the live example below

DOWNLOAD EXAMPLE 

//### EXAMPLE: PARTICLE SYSTEMS ###

var myScene = scene("MyScene", canvas);
var myBackground = myScene.addBg("black");

var particle_system = myScene.addParticleSystem("ParticleSystem");
particle_system.properties.interval = 0.1;
particle_system.properties.life = 2;
var size = 5;
particle_system.properties.size = vec(size, size);
particle_system.properties.life_cycle = 0.005;
particle_system.properties.velocity = vec(0, 0);
particle_system.properties.material = ["color", 800];
particle_system.properties.count = 100;

particle_system.startPositionFunction = function (particle_obj) {
  var size = particle_obj.particle_system.properties.size;
  var scale = Math.random() * (1.5 - 0.5) + 0.5;
  particle_obj.properties.size = vec(size.x * scale, size.y * scale);
};

particle_system.materialFunction = function (particle_obj) {
  var life = particle_obj.properties.life;
  var total = particle_obj.properties.initial_life;
  var mat = particle_obj.properties.initial_material;
  var color =
    "hsla(" + mat[1] + ",100%," + (life * 100) / total + "%," + life / total + ")";
  particle_obj.properties.material = ["color", color];
};

particle_system.startAccelerationFunction = function (particle_obj) {
  var acc = vec(0.005 * (Math.random() * 2 - 1), 0.005 * (Math.random() * 2 - 1));
  particle_obj.properties.acceleration = acc;
};

particle_system.emit();
myScene.run();

function update() {
  clear("black");
  canvas.update();
  setTimeout(update, canvas.timeout);
}
update();
Live view