Learn how to create smoke particles in this Processing tutorial using the Java programming language. You will learn how to use signum, sine waves, random numbers and Gaussian distribution to create a steady stream of smoke particles.

To complete this tutorial, you will need to have a particle system. Follow this tutorial to learn how to build a particle system in Processing.

Signum

Create a new tab called Math. We will use this tab to store our math functions. Create a new function called Signum, we will use this later.

int Signum(float f)
{
  if (f > 0.0) return 1;
  if (f < 0.0) return -1;
  return 0;
}

The Signum function returns 1 if the number is positive, or -1 if the number is negative, or 0 if the two previous conditions are false.

See here, for more information on Signum.

Smoke Update

Create a new function called SmokeUpdate in the main tab.

void SmokeUpdate()
{
  final int spawnTime = 10;
  if(millis() - lastTime > spawnTime)
  {
    lastTime = millis();
    final int count = (int)random(5, 7);
    final float x = width / 2;
    final float y = height * 0.7;
    for(int i=0; i<count; ++i)
    {
      Particle p = particleSpawner.Spawn();
      p.image = particleImage;
      
      p.lifeTime = (int)random(1200, 1800);
      
      p.pos.set(random(x - 12, x + 12), y);
      
      final float r = Signum(randomGaussian());
      p.velocity.set(random(0.05, 0.75) * sin(millis()) * r, -3.0);
      
      p.col = color(255, 180, 80, 60);
    }
  }
  
  particleSpawner.Update();
}

We will spawn particles every 10 milliseconds.

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

Then record the current time, for the next check.

lastTime = millis();

We will spawn between 5 and 7 particles.

final int count = (int)random(5, 7);

Next we calculate the starting position of all the particles we spawn.

    final float x = width / 2;
    final float y = height * 0.7;

Now we spawn the particles in a for loop

for(int i=0; i<count; ++i)

We spawn a particle and set the image variable to the image we loaded earlier.

      Particle p = particleSpawner.Spawn();
      p.image = particleImage;

Next we set the lifetime of the particle to a random value in milliseconds.

      p.lifeTime = (int)random(1200, 1800);

Now we set the particle’s position, randomly offsetting the x position by a little bit.

      p.pos.set(random(x - 12, x + 12), y);

Next we set the velocity of the particle. We use Processing’s randomGaussian function to generate a random number. The random number it generates is likely to be close to the mean of 0. You can read more about the function here.

Since we don’t know what the minimum and maximum value the randomGaussian function might return, we use the Signum function to make sure the value isn’t less than -1 or greater than 1.

We then calculate a random value for the x value and use a sine wave to decide the direction of the value. When we pass the current milliseconds into the sine function, we get a value which loops in the -1 to 1 range.

We further randomise the direction by using our value from the randomGaussian function. This will create particles which randomly move in different directions along the x axis.

Finally we set the y velocity value to -3, to make the particle move upwards.

      final float r = Signum(randomGaussian());
      p.velocity.set(random(0.05, 0.75) * sin(millis()) * r, -3.0);

Now we set the colour of the particle.

      p.col = color(255, 180, 80, 60);

And finally after the for loop and if statement, we update all the particles, so that there logic gets applied.

  particleSpawner.Update();

Draw Function

Go to the draw function.

void draw()

Replace this:

ExplosionUpdate();

With this:

SmokeUpdate();

Run the Sketch

Now it’s time to have some fun and run the sketch. Press CTRL + R or click on the triangle play symbol.

You should see a steady stream of smoke particles moving upwards.

Conclusion

Congratulations on completing this tutorial! Feel free to experiment with different particle shapes, colours, spawn rates and random number generation functions.

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

Follow this tutorial to learn how to create a trail of particles which follow the mouse.