Visualize RGB gradient going from red to blue in C++ - c++

Question

I have a value between 0 and 1 which I'm trying to determine a color value for representing the size of the value. The higher the value, the more "blue" it should be, and the lower the value the more red it should be, with green in the middle. So the float value 1 in RGB should be (0,0,255), the value 0 in RGB should be (255,0,0), with (0,255,0) in the middle. I tried to implement it but in my implementation the highest value is white and the lowest is black, which is not what I'm trying to achieve.
Does anyone know how to implement this?
My attempt was :
unsigned int rgb[] = {0,0,0};
//16581375 = 255^3
unsigned long colorValue = floatBetweenZeroAndOne * 16581375;
rgb[0] = colorValue %255;
rgb[1] = (colorValue / 255) % 255;
rgb[2] = ((colorValue / 255) / 255) % 255;

Answer 1

Try this:
unsigned int rgb[] = { 0,0,0 };
float floatBetweenZeroAndOne = 0.25f;
if (floatBetweenZeroAndOne <= 0.5f)
{
floatBetweenZeroAndOne *= 2.0f;
rgb[0] = (unsigned int)(255 * (1.0f - floatBetweenZeroAndOne) + 0.5f);
rgb[1] = (unsigned int)(255 * (floatBetweenZeroAndOne) + 0.5f);
}
else
{
floatBetweenZeroAndOne = floatBetweenZeroAndOne * 2.0f - 1.0f;
rgb[1] = (unsigned int)(255 * (1.0f - floatBetweenZeroAndOne) + 0.5f);
rgb[2] = (unsigned int)(255 * (floatBetweenZeroAndOne) + 0.5f);
}
It will smoothly interpolates the float color value between R G B components.

Answer 2

So basically you are saying that the rgb[0] should be 0 if your float variable is 0 and it should be 255 if your variable is 1. Your float variable * 255 should do the trick for the red color. Let's just call your float variable floatValue from now on.
Now let's do the blue color. This is basically the opposite of red. We want the bluecolor to be 255 when floatValue is 0 and it to be 0 when the floatValue is 1. You could use it like this: rgb[2] = 255 - floatValue * 255.
The green one is the most tricky I guess. We want that value to rise if 0 < floatValue < 0.5 and degrade when 0.5 < floatValue < 1. I think an if-statement would do the trick.
In total I would code it something like this. I haven't tested it.
unsigned float floatValue = 0.236; // Completely random number between zero and one.
unsigned int rgb[] = {0,0,0};
rgb[0] = floatValue * 255;
rgb[2] = 255 - floatValue * 255;
if (floatValue > 0 && <= 0.5)
{
rgb[1] = floatValue * 512 // Since I guess you want it to be maxed out at 128.
}
else if (floatValue > 0.5 && floatValue <= 1)
{
rgb[1] = 255 - (floatValue - 0.5)*512;
}
else
{
cout << "floatValue has a value smaller than 0 or bigger than 1!";
return -1;
}

Answer 3

A function like this should do the job
void setColor(double value, int* rgb){
if(value > 1 || value < 0) return;
if(value > 0.5){
value -= 0.5;
rgb[0] = 0;
rgb[1] = (int)((1-2*value)*255);
rgb[2] = (int)(2*value*255);
}
if(value <= 0.5){
rgb[0] = (int)((1-2*value)*255);
rgb[1] = (int)(2*value*255);
rgb[2] = 0;
}
}

Answer 4

You could also try this version:
void rgbscalar(float scalar)
{
float ratio = 2 * scalar;
int r = 255 * (ratio - 1);
if ( r < 0 ) r = 0;
int b = 255 * (1 - ratio);
if ( b < 0 ) b = 0;
int g = 255 - b - r;
if ( g < 0 ) g = 0;
std::cout << r << " " << g << " " << b << " : " << scalar << std::endl;
}

Answer 5

This code is a general-purpose linear gradient from a Color 1 to a Color 2; you can use it to make multiple gradients, for example, red to green and green to blue, and populate a array with the variations in-between c1 and c2.
If anyone knows a better way of making this code, feel free to suggest :).
#include <cstdint> # Defines uint_fast32_t
#pragma GCC diagnostic push // GCC only
#pragma GCC diagnostic ignored "-Wconversion" // GCC only, disable bitfield warnings
//+------------------------------------------------------------------+
// Color
// Parameters c1 and c2 are ARGB Colors to Gradient into the return value
// Gradient and Alpha is a percentage from c1 towards c2, accepts any range, but anything out of [0; 1.0] is cut
// The return value of the function is guaranteed to be between [0xYY000000; 0xYYFFFFFF], even if the gradient is invalid, and YY equals to the Alpha between [0; 1.0] -> AA[0; 255] proportionally
//+------------------------------------------------------------------+
uint_fast32_t argbGradient(uint_fast32_t c1, uint_fast32_t c2, double gradient = 0.5, double alpha = 0.0)
{
uint_fast32_t c = 0x00000000;
// Red is at 0x000000##
// Green is at 0x0000##00
// Blue is at 0x00##0000
// Alpha is at 0x##000000
if(gradient > 1.0) gradient = 1.0;
else if (gradient < +0.0) gradient = +0.0;
if(alpha > 1.0) alpha = 1.0;
else if(alpha < +0.0) alpha = +0.0;
uint_fast32_t red1 = (c1 & 0xFF);
uint_fast32_t green1 = (c1 & 0xFF00) >> 8;
uint_fast32_t blue1 = (c1 & 0xFF0000) >> 16;
uint_fast32_t alpha1 = (c1 & 0xFF000000) >> 24;
uint_fast32_t red2 = (c2 & 0xFF);
uint_fast32_t green2 = (c2 & 0xFF00) >> 8;
uint_fast32_t blue2 = (c2 & 0xFF0000) >> 16;
uint_fast32_t alpha2 = (c2 & 0xFF000000) >> 24;
if (red1 > red2) c = ((uint_fast32_t) (red1 - ((double) (red1 - red2) * gradient))) & 0xFF;
else c = ((uint_fast32_t) (red1 + ((double) (red2 - red1) * gradient))) & 0xFF;
if (green1 > green2) c = ((((uint_fast32_t) (green1 - ((double) (green1 - green2) * gradient))) & 0xFF) << 8) + c;
else c = ((((uint_fast32_t) (green1 + ((double) (green2 - green1) * gradient))) & 0xFF) << 8) + c;
if (blue1 > blue2) c = ((((uint_fast32_t) (blue1 - ((double) (blue1 - blue2) * gradient))) & 0xFF) << 16) + c;
else c = ((((uint_fast32_t) (blue1 + ((double) (blue2 - blue1) * gradient))) & 0xFF) << 16) + c;
if (alpha1 > alpha2) c = ((((uint_fast32_t) (alpha1 - ((double) (alpha1 - alpha2) * alpha))) & 0xFF) << 24) + c;
else c = ((((uint_fast32_t) (alpha1 + ((double) (alpha2 - alpha1) * alpha))) & 0xFF) << 24) + c;
return c;
}
#pragma GCC diagnostic pop // GCC only, restore specifically disabled flags