Last time we took time out from expanding the capabilities of our rudimentary particle system to refactor the code. We made two classes: a Particle class and a ParticleSystem. Our sketch is now very plain and uninteresting, and all the action happens in the ParticleSystem class.

As usual the code for each post is in on GitHub. You can grab the code for post 3 and follow along with me, or just grab the code for this post and try to make sense of it, depending on how confident you’re feeling.

The next thing on our to-do list is sprites, but before I get to that I’d like to make some small improvements to ParticleSystem. Specifically, I want to allow the creator of ParticleSystem to set how colour and size change over the lifetime of the particle.

This is a bit awkward until you learn about lerping. LERP is short for Linear intERPolation and it does exactly what we want: given two extremes and a percentage, it tells you what you get if you start at one extreme and travel that percentage of the distance towards the other.

Processing has a built-in command to lerp between two colours; you can read the documentation here. So what I want to do is give the ParticleSystem a startColour and endColour, and lerp between them when drawing each particle. Here are the two new variables to store the colours, and notice that I’ll default them to plan white in the constructor (not every particle system might care about this functionality):

Here’s how we use lerpColor when drawing. We’ve got rid of a rather complicated line of code with two maps in it, but we had to calculate the age percentage and this needs care — if you don’t convert the particle’s age to a float first, you won’t get the right result at all:

OK — let’s use this in the sketch to produce some different colours:

Here’s the result — we can mess about with these colours as much as we like of course:


Let’s do the same for size — I’m sure you can work this out. Add startSize and endSize variables to ParticleSystem (they should be ints) and then this is how you lerp between them:

By the way, we can now create quite different-looking particle systems and it’s very easy to have more than one at a time. In your main sketch , simply add an extra particle system and initialise it however you want:

Then in draw(), advance and render each ParticleSystem in turn (note that the order your draw them in matters, because the second will draw on top of the first as usual):

Incidentally, I removed the rect we were using to identify where the emitter is — it’s pretty obvious after all! Here’s a result with two particle systems running at once, very similar to the one above:

Notice how the sketch code is getting more complicated but it’s only concerned with configuring the specific particle systems it wants. The ParticleSystem class is hiding away all the messy details about how particle systems in general work. The more complicated things get, the more glad we’ll be that we broke things up.

Next time we’ll work on the sprite system so we can stop looking at those boring circles.