…in which we create a single, lonely particle and think a bit about what we want our particles to do.

In this serieswe’re going to build a simple particle system in Processing from scratch. Here is a bit of introductory background to the project.

I assume you’ve got a basic knowledge of Processing at the level of our introductory course at CSM. That course covers variables, loops, conditionals and some of the built-in drawing functions; CSM students should find the slides in the FAMC Moodle and may be able to work through them alone if no course is available.

If you do fit into that category, I’m sure my starting-point will be all too familiar:

By looking at some examples and perhaps reading up about them, we find that a particle system has the following properties:

  • Each particle is “born” in a specified region, known as the “emitter” of the system.
  • It moves away from the emitter according to some kind of rule.
  • After a set amount of time, the particle “dies”.

A good first step in building a particle system, then, might be to create one particle that does just this. For now let’s make things as simple as possible:

  • We will make the emitter a single point in the middle of the screen.
  • The particle will move away from the emitter in a random direction.
  • The particle will be a small white circle.

But to make things slightly more realistic we will emit a new particle when the original one dies.

We will need global variables for the particle’s position (x and y), its movement in the x and y directions and also how long it’s been “alive”. Since we’re here to learn new things, I’ll use a PVector-type variable to conveniently represent the 2D position and movement information; you’ll see how this works as we go along:

When the particle dies we want the whole thing to be re-initialised, so we will create a new function called init() that simply resets the position, movement and age of the particle. We can call this in setup() and then later when we need a new particle:

I set the position of the newly-minted particle to be the centre of the screen (half the width and half the height). I also set the direction to be random — random(4) – 2 gives a random number between -2 and +2, so which is my first guess at what might look right. Finally, I set the age to be 0, because this particle has just been born.

We had better set the screen size in setup() before we forget:

Right, we’re ready to do the animation. In draw(), all we need to do is move the particle using the movement PVector, then draw it using the position PVector. Finally we need to check whether its age has reached a maximum value; if so, we call init() to restart everything:

I added the rect there so we can see the emitter — we’ll get rid of it eventually but maybe it’s not so bad to have it there.

Our single-particle system is complete!

OK, so it’s not that great. (NB The GIFs in this post run much slower than the speed of the actual sketch — I’m still getting the hang of the conversion process and hopefully it will be better next time).

Let’s make the maximum age into a global variable (so it’s easy to change later) and let’s make the colour and size of the particle depend on the current age.

You can do this any way you like; here’s what I did. First adding the maxAge global variable:

Now messing about with the colours — note the use of the map() function, which we sometimes manage to cover in the intro class, but if we didn’t in yours you should look it up, it’s very handy:

The result:

…still doesn’t look much like whisps of smoke or a raging fireball, but we’ve got a long way to go and this is our first step. Next time we’ll convert our code to make lots of particles instead of just one.

As always I’d strongly recommend typing your own code based on the screenshots above, making sure you understand each step as you go and feeling free to make creative changes as you go along. However, I’m also uploading the code for each post into this GitHub repository. Download the appropriately-numbered RAR file and extract it to get the Processing sketch along with all its supporting file (if any; there aren’t any today).