Page 1 of 1

ParticleSystems in Rebound

Posted: Sat Mar 30, 2013 4:19 pm
by Santos
So, I think the particle effects in Rebound (0.8.0 compatible version here) by TechnoCat look really really cool, so thought I'd try to figure out how they work.
xP3qHAu.png
xP3qHAu.png (51.91 KiB) Viewed 1561 times
Here are some files with the individual particle systems in them for playing around with:
reboundparticlesystems.zip
(7.17 KiB) Downloaded 449 times
Note: What I describe isn't necessarily exactly what is in the game! :ultraglee:

So basically...
  • Each paddle has two particle systems, each going in opposite directions.
  • The ball is made from a circle two particle systems and doesn't have any speed, the effect is created just by moving it. The circle and one of the particle systems changes colour depending on which paddle it bounced off last.
  • The upgrades are made from a particle system with its direction being spun around.
  • The background is made from two particle systems, one for the rotating larger pieces and one for the slower, finer pieces.
  • Additive blend mode makes everything look all glowy.
Also the background is a dark grey:

love.graphics.setBackgroundColor(30, 30, 30)

And vsync is off.



Paddles!

The paddle's particle systems use this image:
HoBaUmU.png
HoBaUmU.png (978 Bytes) Viewed 1561 times
Here are the beginnings of the top part of a paddle:
oVnX4jI.png
oVnX4jI.png (1.87 KiB) Viewed 1561 times

Code: Select all

function love.load()
	square = love.graphics.newImage('square.png')

	p = love.graphics.newParticleSystem(square, 200)
	p:setPosition(x, y)
	p:setDirection(math.pi/2)
	p:setParticleLife(0.6)
	p:setEmissionRate(10) -- Temporary!
	p:setSpeed(200) -- Temporary!
	
	love.graphics.setBackgroundColor(30, 30, 30)	
end

function love.update(dt)
	p:update(dt)
end

function love.draw()
	love.graphics.draw(p1, 0, 0)
end
The "200" in love.graphics.newParticleSystem means this particle system has a maximum of 200 particles.

The setDirection sets the direction in radians, and math.pi/2 points down.

setParticleLife(0.6) means the particles are removed after 0.6 seconds.
4u3e0um.png
4u3e0um.png (2.95 KiB) Viewed 1561 times
setSpread(math.pi/16) sets the initial direction to a direction within the angle of math.pi/16.

This arc shows the angle:
2ywzVWU.png
2ywzVWU.png (3.27 KiB) Viewed 1561 times
TZXT6Uh.png
TZXT6Uh.png (1.79 KiB) Viewed 1561 times
setSizes(1, 0) changes the particle size from full size (1 times the size) at the start of the particle's life, and no size at the end (0 times the size).
Dh6tebi.png
Dh6tebi.png (2.21 KiB) Viewed 1561 times
setEmissionRate(100) means 100 particles are emitted every second.
F9yZi8e.png
F9yZi8e.png (2.81 KiB) Viewed 1561 times
setSpeed(0, 400) sets a random speed between 0 and 400.
R24YbU1.png
R24YbU1.png (5.03 KiB) Viewed 1561 times
setColors(r,g,b,128, r/2,g/2,b/2,0) fades the colour from the paddle's colour at half transparency at the start of the particle's life, and half the paddle's colour value completely transparent at the end of the particle's life.
TxeQOeJ.png
TxeQOeJ.png (6.18 KiB) Viewed 1561 times
love.graphics.setBlendMode('additive') sets the blend mode to additive.

I think the equation for additive blend mode is this, for each colour component (red, green and blue):

final colour = whatever is already there + (new colour component value * new colour alpha)

(You can check out the other formulas here.)

There is another particle system for each paddle which is pretty much identical except that it's further down and the direction is up. And that's it!
jc3S0PH.png
jc3S0PH.png (11.83 KiB) Viewed 1561 times


Ball!

The ball, upgrades, and background all use this image in their particle systems:
GhRlKLA.png
GhRlKLA.png (663 Bytes) Viewed 1561 times
So, here's a start:
52Q2HcP.png
52Q2HcP.png (925 Bytes) Viewed 1561 times
p1 = love.graphics.newParticleSystem(ball, 200)
p1:setEmissionRate(10) -- Temporary!
p1:setSpeed(250) -- Just for demonstration!
p1:setParticleLife(0.5)


The ball has no speed, and the emitter itself is what moves. This means the direction has no effect.

The particles are alive for half a second.
ZvRuSkc.png
ZvRuSkc.png (1.76 KiB) Viewed 1561 times
setSizes(1, 0.5)

The particle sizes transition from full size to half size.
uKGV6Rr.png
uKGV6Rr.png (1.56 KiB) Viewed 1561 times
setEmissionRate(100)

There are 100 particles emitted per second.
FFmOaF3.png
FFmOaF3.png (3.37 KiB) Viewed 1561 times
setColors(220,105,20,255, 194,30,18,0)

The colour transitions from opaque orange to a fully transparent red.
nB6Ur2q.png
nB6Ur2q.png (4.13 KiB) Viewed 1561 times
And now with additive blending!
love.graphics.setBlendMode('additive')

Now for the the ball's second particle system.
RL55Vdx.png
RL55Vdx.png (1016 Bytes) Viewed 1561 times
p2 = love.graphics.newParticleSystem(ball, 200)
p2:setEmissionRate(10) -- Temporary!
p2:setParticleLife(0.75)
p2:setSizes(0.25, 1)
p2:setColors(220,105,20,20, 194,30,18,0)
p1:setSpeed(250) -- Just for demonstration!

AZxqGnn.png
AZxqGnn.png (2.22 KiB) Viewed 1561 times
setSizes(0.25, 1)
EIxI3gr.png
EIxI3gr.png (2.16 KiB) Viewed 1561 times
setEmissionRate(50)
Iv7OYj7.png
Iv7OYj7.png (3.63 KiB) Viewed 1561 times
setColors(r,g,b,255, 194,30,18,0)

The colour fades from the colour of the paddle which it last bounced off, and the same transparent red as in the ball's other particle system.
NhHdK8P.png
NhHdK8P.png (4.42 KiB) Viewed 1561 times
love.graphics.setBlendMode('additive')
Q4oHuis.png
Q4oHuis.png (339 Bytes) Viewed 1561 times
And there's a circle too, also in the same colour as the last bounced paddle.

Here's everything together, it both colours.
uONB3LT.png
uONB3LT.png (15.04 KiB) Viewed 1561 times


Upgrades!
q31KnyK.png
q31KnyK.png (1.05 KiB) Viewed 1561 times
p = love.graphics.newParticleSystem(ball, 200)

p = love.graphics.newParticleSystem(ball, 200)
p:setPosition(x, y)
p:setEmissionRate(10) -- Temporary!
p:setParticleLife(0.5)
p:setSpeed(200)

sEYBUqp.png
sEYBUqp.png (1.74 KiB) Viewed 1561 times
p:setSizes(1, 0.5)
tz7KfoR.png
tz7KfoR.png (1.45 KiB) Viewed 1561 times
setEmissionRate(100)
RRXbFXF.png
RRXbFXF.png (3.32 KiB) Viewed 1561 times
setColors(r,g,b,255, 64,64,128,128)

Colours fade between green (0, 255, 0) or red (255, 0, 0) and a half transparent blue.
SCqNKl5.png
SCqNKl5.png (3.9 KiB) Viewed 1561 times
love.graphics.setBlendMode('additive')
aHAjKRI.png
aHAjKRI.png (5.02 KiB) Viewed 1561 times
setTangentialAcceleration(500)
YG3RXeS.png
YG3RXeS.png (3.54 KiB) Viewed 1561 times
setRadialAcceleration(-1200)
vl7J9MM.png
vl7J9MM.png (4.66 KiB) Viewed 1561 times
p1:setSpread(2)

The direction of the emitter is rotated in love.update.

Code: Select all

d = d - (30*dt)
if d < 0 then
	d = d + 2*math.pi
end

p:setDirection(d)
p:update(dt)
And that's it!
x5jSyTK.png
x5jSyTK.png (8.91 KiB) Viewed 1561 times
Additive blend mode makes the upgrades looks super cool when they overlap. :D
erPyiRn.png
erPyiRn.png (6.23 KiB) Viewed 1561 times


Background!

Here's one part of the background:
jdOFxEG.png
jdOFxEG.png (9.18 KiB) Viewed 1561 times
p1 = love.graphics.newParticleSystem(ball, 200)

p1:setSpread(2*math.pi)
p1:setParticleLife(5)
p1:setSpeed(0, 200)
p1:setColors(0,0,0,128, 50,50,50,0)

p1:setEmissionRate(20)
p1:setSizes(1, 4)
p1:setTangentialAcceleration(200)


There are 2 * math.pi radians in a circle, so setSpread(2*math.pi) makes the emitter emit particles in all directions.

Here's the other part:
EiQIC97.png
EiQIC97.png (2.04 KiB) Viewed 1561 times
p2 = love.graphics.newParticleSystem(ball, 200)

p2:setSpread(2*math.pi)
p2:setParticleLife(5)
p2:setSpeed(0, 200)
p2:setColors(0, 0, 0, 128, 50, 50, 50, 0)

p2:setEmissionRate(10)
p2:setSizes(0, 1)
p2:setRadialAcceleration(-10)


setRadialAcceleration(-10) sets some acceleration toward the emitter, making the particles slow down.

And here's the background with both layers:
jxnzRRd.png
jxnzRRd.png (11.35 KiB) Viewed 1561 times

Re: ParticleSystems in Rebound

Posted: Mon Jul 15, 2013 12:10 pm
by bashlook
This is what i'm looking for! Kudos!

Re: ParticleSystems in Rebound

Posted: Mon Jul 15, 2013 3:06 pm
by seanmd
What a great writeup, and of some pretty creative uses of particle systems to boot. Thanks to both of you.

Re: ParticleSystems in Rebound

Posted: Mon Jul 15, 2013 3:14 pm
by CaptainMaelstrom
Very helpful explanation, thanks.

Re: ParticleSystems in Rebound

Posted: Mon Jul 15, 2013 9:19 pm
by verilog
Santos,
Thank you for this excellent and detailed explanation, this is awesome! cheers!

Re: ParticleSystems in Rebound

Posted: Thu Jun 28, 2018 6:31 pm
by TechnoCat
Popped back onto the forum to check something out. Pretty cool analysis. 👍