Doodle Insights #11: \PARTICLES/

Particles is a subject I was keeping for later but I realized I had more than enough material to explain the cool stuff. So here we go!

Particles are super cool! You can make smoke particles, spark particles, explosion particles, anything particles, everything particles! You create them when something happens and it feels great and then you delete them… Just so you can do it again!

pico-8_320
what you can do with particles

And today we’ll cover the creation of those particles, the cruel but efficient management of them, how you should code their behavior and then there’ll be a bunch of examples with information and advices about special cases!

First off, here’s your basic particle creation code:

function create_particle(x,y)
 local spd=rnd(2)
 local a=rnd(1)
 
 local p={
  x=x,
  y=y,
  vx=spd*cos(a),
  vy=spd*sin(a),
  c=rnd(8)+8,
  t=0
 }

 add(particles,p)
end

‘particles’ is a table to which we’ll register all our particles of this type. To delete a particle later on, we’ll simply use ‘del(particles,p)’.

The ‘vx’ and ‘vy’ fields of the particle represent the velocity vector of the particle and will be added to the ‘x’ and ‘y’ fields on the update. We should also increment ‘p.t’ to keep track of how long it’s been there. When ‘p.t’ is high enough, the particle “dies”, we delete it.

This is Pico-8 and we’ll have to treat our particles like any other type of object, without optimization, which makes them CPU-expensive. If you update and draw all your particles (which you should), creating lots of them will make you hit the CPU limit before the memory one. That’s why you don’t want to keep them around for too long! A time limit for each particle is a good way to know when to delete them but automatically deleting particles that are out of the screen can be a good move as well.

Most of your particles should not stay too long anyway. The best use of particles is still to create lots of them in bursts and then delete them quickly enough to be able to do it again!

To keep your ratio manageable: Create many, but kill more.

Or make it continuous on both sides!

PICO-8_117

In this doodle, the bubbles are many but they are actually created in a continuous flow and deleted in the same way. This method makes for an efficient atmospheric effect that doesn’t costs too much CPU.
And you do want to update your particles! Two rules there: few operations, few variables.

When you code your particles you should know how you want them to behave, but then you have to think and find the simplest way to implement it. For our particles from earlier, which are the simplest in the world, we’ll use this function to update them. (I’m also throwing in the draw function because it’s just three lines)

function update_particle(p)
 p.x+=p.vx
 p.y+=p.vy
 
 p.vx*=0.9
 p.vy*=0.9
 
 p.t+=0.01
 --use random to give a chance to survive
 if p.t>1 and rnd(100)<1 then
  del(particles,p)
 end
end

function draw_particle(p)
 pset(p.x,p.y,p.c)
end

As you can see, it’s really simple stuff. Note that I’m really using the bare minimum here, no trigonometry, no surplus variable, just very simple operations on the different fields of the particle.

But maybe you want to do something that looks a bit better!

pico-8_359

There’s three types of particles here, so first we’ll focus on the coins because they’re the simplest. They’re actualy not very far from our basic particle, except that their ‘vy’ field is incremented at each update to simulate gravity and they are deleted only after they fall under the screen.

These coin particles also have a different color field. Instead of having just one color, they have an array of three colors, either {4,9,7} (bronze), {13,6,7} (silver) or {9,10,7} (gold). At draw, one of the colors in the array is randomly chosen and drawn. It is also possible that instead, a sprite will be drawn! This sprite is a tiny white ‘+’ shape that represents a flicker of light! Makes them extra shiny!!

The second type of particle here is the flying bucks. These have a more complex behavior but most of it is led by a ‘direction’ field on each particle, which defines in what direction the bucks go. That direction changes with a ‘direction speed’ field which itself changes randomly. (this layering of variables makes everything way smoother) Each of these particles actually has an array of a few points, which makes the drawing as trivial as drawing a few lines.

And the third type of particle here is the big $ that appears when generating more flying money! This one is definitely a less subtle particle but it can still be considered as such. No ‘vx’ and ‘vy’ fields here, as the particle doesn’t move. Only an ‘x’, a ‘y’ and a ‘t’ fields. The update simply increment the ‘t’ and eventually deletes the particle. In the draw, the color used and the circles are entirely based on the ‘t’ field. The big $ itself is a 16×16 sprite.

Let’s take a look at another one!

pico-8_311

These are terrible particles! They look great but they are also super CPU-expensive. Each of them has a list of points that define the lines you see on the screen. On top of that, these particles bounce off the borders of the screen, which means collision checking!!! (*dramatic jingle*)

Collision checking (which lets you bounce off screen borders, walls, enemies, etc) looks great. But it’s also super expensive and in Pico-8 you can’t optimize it (much) so you’ll have to make a choice. Either you choose the collisions and you resign to have way fewer particles. Or you choose to have lots of particles and ignore collisions. (I almost always choose the second option)

Beside that, you can see that the length of the sparks gets smaller over time for each of them and their color gets dimmer. Basically, the ideal is to have something bright and noticeable at its creation and that then gets way more discreet until it dies, which the viewer should not notice too much. Make the creation impactful and don’t let the dying break the flow.

Here’s a final one!

pico-8_59

This is the Pico-8 Doodle #1, the very first of the series! I made it in about 30 minutes back then and it’s really simple!

Here again, there are two different types of particles, but they are related!

The first type is the one you see come up from below the screen. These are created with a high ‘vy’ field which decreases over time, until it gets below 0. Then, the particle is destroyed and a few of the second type are created.

Having particles that generate other particles can quickly get out of hand, so be cautious with them. They can look great though, my explosion particles always generate more explosion particles!

The second type are the explosions left by the first type. They can have ‘vy’ fields below 0 and they only die after their ‘t’ field got high enough.

But how do I draw them?? Both types are only drawn as full circles! The pretty trail effect is actually generated by the procedural dithering that happens in the background! You can read about my procedural dithering technique there: part 1, part 2, part 3. Thanks to this supplementary technique, the particles can have extremely simple behaviors and yet give out a super nice effect!

Make your particles plenty and don’t forget to kill them all so you can create even more! Focus on coding simple behaviours, with few operations and few variables! Make the creating impactfull and the dying discreet! Get creative, the best effects are almost always outside the box! 😉

I hope you enjoyed this Doodle Insights! As usual, questions and remarks go on the Patreon post, I’m happy to answer them!


These Doodle Insights are here thanks to the awesome people supporting it on Patreon! Here are their names!

Joseph White, Adam M. Smith, Ryan Malm, Matthew, Giles Graham, Luke Davies, Jake Meanwell, Tim and Alexandra, Sasha Bilton, berkfrei, Nick Hughes, Christopher Mayfield, Jearl, Dave Hoffman, Thomas Wright, Morgan Jensen, Zach Bracken, Anne Le Clech, Flo Devaux, babyjeans, Emerson Smith, Cathal O’Keeffe, Dan Sanderson, Andrew Reist, vaporstack, Dzozef, Cole Smith, Jared Butowsky, Tony Sarkees and Justin TerAvest!


Next time, maybe we’ll take a look at some procgen again but I’m not sure what exactly! I’m still open to suggestions if there’s something you’d like me to do a Doodle Insights about!

Thank you for reading and enjoy the particles!

TRASEVOL_DOG

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: