Learn how to create a reusable particle system in Processing using the Java programming language in this coding tutorial.

Introduction

Particles can be used to create a variety of visual effects in video games and films, such as rain, fire, and explosions. More information on particle systems is available here.

Particle

Create a new sketch in Processing, then create a new tab called Particle.

Create a new class called Particle in the Particle tab.

class Particle
{
}

Define some variables inside the Particle class:

  private boolean active = false;
  private int spawnTime = 0;
  
  PImage image = null;

  int lifeTime = 0;
  PVector pos = new PVector();
  PVector force = new PVector();
  PVector velocity = new PVector();
  
  color col = color(255);

Next create an OnSpawn function inside the Particle class. This will activate the particle and reset most of the variables when the particle is spawned.

  void OnSpawn()
  {
    active = true;
    spawnTime = millis();
    
    lifeTime = 0;
    pos.set(0, 0);
    force.set(0, 0);
    velocity.set(0, 0);
    
    col = color(255);
  }

Create an Update function inside the Particle class. This function will only execute if the particle is active.

  void Update()
  {
    if(!active) return;
    
    // Move particle
    velocity.add(force);
    force.set(0, 0);
    pos.add(velocity);
    
    // Check lifetime
    if(millis() - spawnTime > lifeTime)
      active = false;
  }

The particles move about using force accumulation. First force is added to velocity, then force is reset to zero, and finally velocity is added to position.

    // Move particle
    velocity.add(force);
    force.set(0, 0);
    pos.add(velocity);

Forces can be used in different ways to move the particles. For example a large impulse force could be added to the particle when it is spawned to shoot it across the screen. This would be similar to a cannon firing a cannonball.

Smaller forces can also be applied every frame. For example, we can recreate gravity by applying a small force every frame in the downwards direction to make the particles fall.

We could also create wind, by applying a force which changes both speed and direction every frame to simulate the strength of the wind going up and down.

Lastly we check if the particle has exceeded it’s lifetime using the current time in milliseconds and the time when the particle spawned. If it has, then we kill it off by setting active to false.

    // Check lifetime
    if(millis() - spawnTime > lifeTime)
      active = false;

Next we will create a render function, which will be used to render the particle. Again, this function will only be called if the particle is active.

  void Render()
  {
    if(!active) return;
    
    tint(col);
    image(image, pos.x - image.width / 2, pos.y - image.height / 2);
  }

The particle colour will be tinted using the tint function. Then the particle be rendered from it’s centre using the image function. The centre of the particle can be calculated using the position and image size (width and height).

Particle Spawner

Now that we have a Particle class, we need to be able to spawn the particles. So create a new tab called ParticleSpawner. Then create a new class called ParticleSpawner.

class ParticleSpawner
{
}

Define an ArrayList of particles inside of the particle spawner. This will be used to store all the particles we need.

ArrayList<Particle> particleList = new ArrayList<Particle>();

Create a ParticleSpawner constructor. The constructor takes the number of particles as an argument. This is the maximum number of particles which this ParticleSpawner can spawn at once.

We first set the number of particles to 1, if the number of particles is less than 1. This ensures we can always spawn at least 1 particle.

Then we create all the particles using a for loop and add them to the ArrayList.

  ParticleSpawner(int number)
  {
    if(number < 1)
    {
      println("Error: Number of particles is less than 1.");
      println("Setting number of particles to 1.");
      number = 1;
    }
    
    for(int i=0; i<number; ++i)
      particleList.add(new Particle());
  }

Next create a Update and Render function for the ParticleSpawner. The Update function will call the Update function of all the particles. Whilst the Render function will call the Render function of all the particles.

  void Update()
  {
    for(Particle p : particleList)
      p.Update();
  }
  
  void Render()
  {
    for(Particle p : particleList)
      p.Render();
  }

Finally create a Spawn function, which will be used to spawn a single particle. We first look for an inactive particle. If we find one, we will call the particle’s OnSpawn function and return the particle.

  Particle Spawn()
  {
    // Find an inactive particle
    for(Particle p : particleList)
    {
      if(!p.active)
      {
        p.OnSpawn();
        return p;
      }
    }
    
    // If there are no particles available, use the first particle
    println("Warning: Ran out of particles, using the first one");
    Particle p = particleList.get(0);
    p.OnSpawn();
    return p;
  }

If we can’t find an active particle, then we will print a warning. Then reuse the first particle in the list.

Spawning particles

It’s time to spawn some particles! Go back to the main tab, then define some variables.

First we will create the ParticleSpawner, which will use 1000 particles.

ParticleSpawner particleSpawner = new ParticleSpawner(1000);

Then we will create a PImage reference, which will reference the particle image we want to use.

PImage particleImage;

Lastly we define an integer called lastTime. This will be used to remember the last time we created particles, to help control how many particles we spawn at once.

int lastTime = 0;

Next create a setup function. We first set the size of the window to 1280 by 720 pixels.

We then load in an image called “CircleParticle.png”, and store it in the particleImage reference. If it doesn’t exist, then we will print an error and exit the program.

This would be a good time to add an image to your sketch folder. Go to:

Sketch –> Show Sketch Folder

Create a folder called Data, then copy this particle image into the folder.

Notice how the image is mostly white, with transparent edges. This makes it easier to tint the colour of the particle.

Lastly we set lastTime to the current time in milliseconds.

void setup()
{
  size(1280, 720);
  
  // Load images from the data folder
  final String imageName = "CircleParticle.png";
  particleImage = loadImage(imageName);
  if(particleImage == null)
  {
    println("Error: Failed to load image called: " + imageName);
    exit();
  }
  
  lastTime = millis();
}

Next create a new function called ExplosionUpdate. This function is dangerous, since it will spawn explosion particles!

void ExplosionUpdate()
{
  final int spawnTime = 50;
  if(millis() - lastTime > spawnTime)
  {
    lastTime = millis();
    final int count = (int)random(8, 12);
    final float hw = width / 2;
    final float hh = height / 2;
    final float speed = 4.0;
    for(int i=0; i<count; ++i)
    {
      Particle p = particleSpawner.Spawn();
      p.image = particleImage;
      
      p.lifeTime = (int)random(500, 800);
      p.pos.set(hw, hh);
      
      final float angle = radians(random(360));
      p.force.set(cos(angle) * speed, sin(angle) * speed);
      
      p.col = color(255, 90, 30, 60);
    }
  }

  particleSpawner.Update();
}

We first check if we should spawn some particles or not. I chose to spawn particles every 50 milliseconds.

  final int spawnTime = 50;
  if(millis() - lastTime > spawnTime)

Then we remember the current time for next time.

lastTime = millis();

We will create between 8 and 12 particles depending on the result of the random function.

final int count = (int)random(8, 12);

Then define some more variables for half of the window size, and the speed of the explosion particles.

    final float hw = width / 2;
    final float hh = height / 2;
    final float speed = 4.0;

Now we spawn particles using the number stored in the count variable. After spawning the particle we set the image to the particle image we loaded earlier.

    for(int i=0; i<count; ++i)
    {
      Particle p = particleSpawner.Spawn();
      p.image = particleImage;

We set the particle spawn position to the centre of the screen. The lifetime of the particle is randomised, to make the effect more interesting.

      p.lifeTime = (int)random(500, 800);
      p.pos.set(hw, hh);

Then we create a random angle variable and convert it to radians. So the particles can spawn in any direction from 0 to 360 degrees. We set the particles force variable using the angle.

The cos function is used for the x axis direction, and the sin function is used for the y axis direction. The speed variable increases the size of the force. As we discussed earlier, this is an impulse force. Since we are using a large force for one frame. And this force variable will get reset every frame inside the particle Update function.

      final float angle = radians(random(360));
      p.force.set(cos(angle) * speed, sin(angle) * speed);

Now we just need to set the particle colour. Notice how the alpha channel is set to 60. This means the particle will be made mostly transparent. Which will be important later when we change the blend mode to additive.

p.col = color(255, 90, 30, 60);

We lastly call Update on all the existing particles.

  particleSpawner.Update();

Now we just need to create a draw function, so we can render our particles to the screen.

void draw()
{
  // Update
  ExplosionUpdate();
  
  // Render
  background(0);
  
  noStroke();
  noFill();
  noTint();
  blendMode(ADD);
  particleSpawner.Render();
}

We will first call the ExplosionUpdate function which we just created. This will create particles and update the particles using the logic we applied in the Particle class.

  ExplosionUpdate();

Next the background colour is cleared to black.

  background(0);

Then we will turn off stroke, fill and tint. The particles will use tint later.

  noStroke();
  noFill();
  noTint();

Next we will set the blend mode to ADD. The additive blend mode adds the colours of the particles together. This will make the particles brighter when rendered on top of each the other, which makes them look like they are glowing.

blendMode(ADD);

Finally we just need to render all the particles in the ParticleSpawner.

particleSpawner.Render();

Press CTRL + R, or use the triangle play button to run the sketch. You should see some beautiful particles exploding from the centre of the screen!

Blend modes

The normal blend mode in Processing is called BLEND. Feel free to experiment with the other blend modes. More information about blend modes available here.

Conclusion

Congratulations on completing this tutorial. Feel free to experiment with the code. Here are some ideas:

• Create more functions like ExplosionUpdate, and experiment with different values for the particles. Like speed, direction, number of particles, colour, etc.
• Edit the Particle class, and make the particles fade out over time by changing the alpha value. You can use the tint function!
• Try creating and using different images for the particles.
• Create more than one ParticleSpawner and combine them together.
• Scale the particles up or down in size over time.
• Apply gravity and wind to the particles using forces.

Thanks for reading this tutorial, let me know in the comments section if you enjoyed it.

Follow this tutorial if you want to learn how to create a circle particle image.

Learn how to create a trail of particles which follow the mouse in this tutorial.

Learn how to create a steady stream of smoke particles in this tutorial.