How to fade from one colour to another colour?

[Loyette]

Hi,

I'm looking to add a feature to my particle system that fades a particle from being one colour to being another colour.

Currently, my particles have an attribute called 'percentLife'. PercentLife is used to make the particles fade out and shrink before they are deleted (to make the deletion more seamless and make them not appear as if they vanish instantly).

particles[i].colour.a = particles[i].percentLife * 255;
particles[i].particleSprite.setColor(particles[i].colour);

particles[i].scale = particles[i].scale * particles[i].percentLife;
particles[i].particleSprite.setScale(particles[i].scale);
 

As you can see, I'm just using percentLife in order to morph the scale and alpha so that it fades and shrinks for when it dies. Percent life starts at one and goes down to 0 throughout the particle's lifetime.

I want to implement a similar system but so that, for example, a colour can morph from blue to yellow. I've been having a lot of trouble doing this and I think I might be missing some maths on how this is done.


How is this done? I've been trying to work it out but I'm at a loss.

Thanks

[Laurent]

The easiest, and best starting point, is to interpolate colors component-wise (interpolate red, green and blue channels separately, and then reconstruct the final color).

This is not a perfect solution, as it can produce artifacts (weird colors), but depending on your requirements, this may be enough. If it's not, then you just discovered a complex subject, congratulations There are many ways to interpolate two colors (in RGB space, in HSV space, in... many other color spaces), each with its own pros and cons. If RGB interpolation is not enough for you, I recommend you to read some good article(s) about it.

[Loyette]

I found a solution

Firstly, here's the results:

Transition from orange to white: https://i.imgur.com/1HkZYm8.png?1

Transition from orange to blue: https://i.imgur.com/Z0hnf30.png?1

Turned down the rate so we can see how the colours change: https://i.imgur.com/SIGQJUw.png?1

I don't really think there were too many artifacts and I also did my interpolations entirely in RGB without converting between HSV and RGB (although, I read that converting to HSV produces better results, so I'll probably implement this later at some point).

If anyone in the future is reading this and asking the same questions as me with the fading colours, here's the code I used to do it:

particles[i].colour.r = (255 - particles[i].colour.r) * rate + particles[i].colour.r;
particles[i].colour.g = (255 - particles[i].colour.g) * rate + particles[i].colour.g;
particles[i].colour.b = (255 - particles[i].colour.b) * rate + particles[i].colour.b;
 

The rate is a float. I have set the rate at 0.02, though for the third image it was set at 0.009.


The formula I found was:

currentColour = (targetColour - currentColour) * rate + currentColour

As you can see in the code this is used 3 times for r, g and b.

[Hapax]

here's the code I used to do it

It should be noted that this code will fade the colour to white since the 255s represent the target colour.

Another thing to note is that this interpolation is not linear; it will change more at the beginning and slow down towards the end, possibly never reaching the actual final target colour due to rounding.
This is probably fine since your colour also fades out.

Linear interpolation, however, takes the two colours and takes a ratio of the two. In this case, you would need to know what ratio of the interpolation you require (basically, how far from first colour to second colour you are. This is quite simple if, as it seems, you have a particle system and know the current life of that particle and its lifespan.

I don't really think there were too many artifacts

One way to test if it's good enough is to fade between full red and full green.
Using RGB components, the mid-transition would be dark yellow.
However, using HSV/HSL, it would be full yellow.
That means that RGB fades from a bright colour, though a dark colour and back to a bright colour.

RGB tends to be fine for most situations, to be fair though