To kick off 2019 we’ve decided to make a series of posts documenting a whole project in Processing, starting with a blank page and building a “particle system” from the ground up that you’ll be able to use in your own projects if you want to.

Particle systems are widely used for CGI effects like fire, smoke, water, weather and so on, as well as producing very complicated-looking abstract effects. They’re used in both games and movies and can be extremely complex; we’ll be happy if we get something that works and can serve as a base for further experimentation.

Before we write any code at all, we’ll need to decide what we’re trying to achieve. A good first step is to look at some examples we’d like to emulate. A quick image search in your favourite search engine throws up lots of examnples. Here’s one creating a simple (but still nice-looking) fire effect (source):

This would be hard to achieve with the built-in tools Processing gives to us, so it’s a decent challenge.  Here are a couple that look more like steam, and that reveal a bit more about what’s going on (source):

A particle system works by creating a very large number of very simple objects — the particles — and moving them according to a simple rule. The particles might be simple shapes like the white dots in the steam examples, or images or animated sprites as in the fire image. There’s usually a bit of randomness thrown in to make it look less predictable.

We’d like our particle system to be as configurable as possible so we can make a wide variety of effects with it,and we’d like to be able to combine several particle systems to create more complex effects, such as this one that has flames, smoke, sparks and a glowing effect that all need to behave differently (source):

At this point we’re building a wish-list; I’d be amazed if we produced anything as polished as the one above, but we might as well shoot for something ambitious and see how far we get. The examples above all come from dedicated 3D graphics environments (Unity and Blender) whereas we’ll be starting from nothing.

We’ll also have to struggle with Processing’s performance limitations when it comes to having thousands or millions of particles on the screen at any one time. Eventually we might decide that Processing isn’t the right place to do this and we need to “port” our particle system into a different framework that can handle it, but that will be out of scope for this series.

In real life our first question should be: Has someone else already solved this problem? And the answer is of course “yes” — there are many examples of particle systems already written for Processing. In fact, Processing even comes with a demo called Particles that sort of does what we want. But the point of this series is to see what we can learn by going through the process ourselves, so we will pretend those projects don’t exist and have a go for ourselves.

Next time we’ll start writing code. Note that we won’t be following a very structured approach to this project. It will be the kind of exploratory process we advocate in our beginner classes; this may not be the most direct route but it is fun, flexible and practical for newcomers. Some of the ideas we use will probably be unfamiliar and you may have to look them up (I won’t have time to explain every step in detail here) but that’s just part of the process.

The code for each week is in its own RAR archive on our new GitHub. For example, Particles06.rar contains the project as it stands at the end of Week 6. Just unzip the archive anywhere on your computer; it will produce a Processing sketch folder containing everything you need. This should help if you find the screenshots get confusing.