How-To: Create A Simple OpenGL 2D Particle Fountain in C++

I was recently asked about some particle systems I’d put together, so in response, this isn’t really a “look what I’ve coded” post – instead, it’s more of a “this is an easy way to set up a particle system framework” post.

To demonstrate the setup of a particle system using OpenGL, I’ve put together some simple starter code which displays a 2D particle fountain. I was going to just dump this code as a zipped project into a reply, but then (as my wife pointed out) it would be pretty much buried in the comments, so if other people starting OpenGL coding wanted to learn the basics of particle systems my code wouldn’t be as visible. As such, I’ve made this into a separate post – and all our example code does is this:

It’s a dirt-simple effect, but what it does isn’t so important right now – it’s deliberately simple. How it does what it does is what we’ll talk about.

Looking at particle systems from a high level – you generally have to choose between two different approaches to the system as a whole:

  1. You have a fixed number of particles (i.e. you have a fixed size array of however many particles) and you reset each particle to “recycle” it, or
  2. You have a dynamic number of particles (i.e. you have a dynamically resizable array) and you destroy each particle and create a new one as required.

I’ve gone with the latter approach for this code using a vector of particles (nothing to do with Vec2/Vec3 math – just the name of resizable array kinda construct). Admittedly, there’s more overhead in the creation and destruction of particles, but on the upside you don’t get that initial rush of particles you get when using fixed size arrays and as soon as you start the program BLAM! All your particles going at once.

To demonstrate what I mean, in the video below I’ve modified the code to instantiate ALL particles up to the particle limit at once, and then as soon as a particle goes off the bottom of the screen it gets destroyed and a new particle is created. The effect of which is that you get a single big burst of particles, and then as they all get destroyed and recreated at different times they turn into a smooth flow within a couple of seconds:

If you’re using a fixed size particle array, you’ll need to implement some mechanism to delay the instantiation or “launch” of the particles – for example, you might give each particle a random framesUntilLaunch value and decrease it by 1 each frame until it gets to 0 and you can let the particle do its thing. I wrote such a delay system for some fireworks code I did a while back if you’d like to see a concrete example.

Anyways, back at this code, our main is using three main classes to encapsulate data and provide methods to manipulate it:

  • Colour4f.hpp – A class to store a colour as red/green/blue/alpha floating point values and manipulate ’em (including interpolation of colours),
  • Vec2.hpp – A templatised class to store two values as a vector (Not a resizable array this time! An actually “euclidian vector” – i.e. two values which represent a direction and magnitude). It also includes lots of overloaded operators so you can add two vectors together (“up” + “right” gives you “up-right” etc.), multiply a vector by a scalar (i.e. moving “up-right” multiplied by 10 means you’re now moving up-right ten times as fast). By templatised, I mean that you can create a Vec2 of ints, or floats, or doubles, or shorts, or whatever numeric type makes sense for your application – take a look at the source below if you want examples, and finally
  • Particle2D.hpp – A particle class which uses the above Colour4f and Vec2 classes to provide powerful movement and colour modification options in a small & easy to use package.

You can download the complete source code as a Code::Blocks project here, if you’d like:

Note: As my OS of choice is GNU/Linux (LMDE, to be specific), the source files provided will have Linux line-endings – so you’ll need to open them with a good text editor like Notepad++ if you’re in in Windows, otherwise each file will look like a single massive block of noise!

Or, if you’d prefer to just browse the source code so you can copy and paste sections, you’ll find it all laid out below.

I love particle systems – you can do some visually stunning things with really simple code, or you can do amazing things if you take it further. Either way, I hope you have a lot of fun with them (there’s lots more particle stuff on this site if you’re looking for inspiration – try Actionscript tag for a start!) – and if you make anything cool or pretty using and you think I’ve helped – please do show me or let me know – I’ve love to see or hear about what you’ve done! =D

Also – if you make this – show me how, okay?


Continue reading How-To: Create A Simple OpenGL 2D Particle Fountain in C++

Fun with 2D particles using emitters and waypoints

I was thinking about playing with particle systems the other week after I’d been creating a Vec2 class to easily work with two-dimensional vectors, so I decided to make one. Check it out:

The basics are that:

  • The entire thing is a ParticleSet2D. You can create as many of these as you like.
  • Each ParticleSet2D has at least one (but as many as you want) ParticleEmitter2D objects, and at least one (but again, as many as you want) ParticleWaypoint2D objects.
  • A ParticleEmitter2D can be placed at any location, and emits a new Particle2D at a given time interval, for example 0.1 would give 10 new particles per second, 0.05 would give you 20 particles per second etc.
  • On creation, a particle heads towards the first waypoint in the vector (i.e. dynamically resizable array) of waypoints. When it reaches within a given distance of the waypoint its speed gets jumbled a bit and it then heads towards the next waypoint.
  • When it hits the last waypoint the particle is destroyed.

There’s lots more of course, like you can control how fast the particles move, how tightly they corner etc, and it’s all written in a completely framerate independent manner using delta-time values so it can run at 10fps and trace out the same patterns as at 120fps (which actually took quite a bit of doing).

Anyways, all for fun. I’ve also migrated it to 3D, but I’m not happy with the point-sprite size attenuation details matching the view frustum so I’ll rewrite it using quads soon and post it up also.

Fun & games =D

How To: Create a Simple Fireworks Effect in OpenGL and SDL

I’m teaching the programming stream for Diploma in I.T. – Multimedia at the moment, so we’re going to be making some simple games and things over the next couple of months, but to start them off we’re doing a little bit of work on particle effects because they’re simple and fun – you just write a single class which describes the properties and behavior of your particle, and then scale it up by adding a large number of particles to get some pretty nice effects.

So instead of doing a particle fountain, I thought some fireworks might be kinda neat… Take a swiz at the video below and see what you think!

Full C++ source-code available after the break for those of a curious nature =D

Continue reading How To: Create a Simple Fireworks Effect in OpenGL and SDL

ActionScript 3.0: Variable Size Particle Collisions

Ha! I’ve cracked it! This really shouldn’t have taken me as long as it did to get working, but now I can have pegs and balls of any size I fancy, and the collision detection works flawlessly. No more cheaky bodges to avoid double collisions, proper trig. offsets all the way… In fact, the only bodge left is adding a slight horizontal speed jitter to a ball if it ends up with a horizontal velocity of < 0.01 after a collision, because if it's bang over over the centre of the peg it'll stay there happily bouncing away until it comes to rest otherwise - which I think is fair enough.

So after all the additional hours, does it look any better? Nope… If anything it looks worse – but she’s my baby, and I’ve finally got ‘er working properly, so I don’t care! :D

Update: And by flawlessly, I mean that I’ve just noticed a very small ball going fast will go through a very small peg, because they never intersect… Drats! Guess I’ll have to check for ranged collisions (or increase the minimal ball/peg size, or limit the movement speed). Nothing’s ever easy, is it?

ActionScript 3.0 Particle Systems #6: Particle Attraction

More ActionScript… This time we’re attracting the particles towards the mouse cursor when the distance between them is low enough… Looks alright, just a kinda fun effect & dead simple to code.

Source code and flash files on the flipside…

Continue reading ActionScript 3.0 Particle Systems #6: Particle Attraction