HSB mix two colours problem

Programming Questions

luki_wlod..

in Programming Questions • 4 months ago

Hello everyone,

I have a problem with mixing two colours. I am working in HSB colour mode. I have a saturation and brightness values constant and dont want to change them. What I want to end up with is a smooth transition between two any colours, but without 'looping' through the whole colours range(e.g I want to have mix of a green and purple - changing the H (hue) value I would end up with blue and turquoise in between, which i strive to avoid). Does anyone have any suggestion how I can solve this problem? (keeping the S and B values constant)

Replies(4)

luki_wlod..

Re: HSB mix two colours problem

4 months ago

here is the example, the depicts the problem and my intent:

int first = 100;
int second = 200;
int s_constant=350;
int b_constant=350;
void setup()
{
size(200,200,P2D);
background(0);
colorMode(HSB);
}
void draw()
{
for(int i=0; i<width; i++)
{
for(int j=0; j<height; j++)
{
PVector current = new PVector(i,j);
strokeWeight(1);
int hue = first + i*(second-first)/width;
stroke(hue,s_constant,b_constant);
point(current.x,current.y);
}
}
}

PhiLho

Re: HSB mix two colours problem

4 months ago

You can simplify a bit the sketch:

int first = 100;
int second = 200;
int s_constant=350;
int b_constant=350;
void setup()
{
size(200, 200);
background(0);
colorMode(HSB);
}
void draw()
{
strokeWeight(1);
for (int i = 0; i < width; i++)
{
float hue = map(i, 0, width, first, second);
stroke(hue, s_constant, b_constant);
line(i, 0, i, height);
}
}

The problem is that you want to use hue. If you know a bit of color theory, you know that if you walk the hue range, you go through all the intermediary colors. Somehow, in RGB mode, you can get a more straightforward result. But you can loose the constant values on saturation and brightness. Which might not be constant in your example image, BTW (I haven't tested).

PhiLho

Re: HSB mix two colours problem

4 months ago

int first = 100;
int second = 200;
int s_constant=350;
int b_constant=350;
// Starting color = #FF80FE
int R1 = 0xFF, G1 = 0x80, B1 = 0xFE;
// Ending color = #86FF80
int R2 = 0x86, G2 = 0xFF, B2 = 0x80;
void setup()
{
size(200, 200);
background(0);
}
void draw()
{
strokeWeight(1);
for (int i = 0; i < width; i++)
{
float r = map(i, 0, width, R1, R2);
float g = map(i, 0, width, G1, G2);
float b = map(i, 0, width, B1, B2);
stroke(r, g, b);
line(i, 0, i, height);
}
}

PhiLho

Re: HSB mix two colours problem

4 months ago

Adapted to render saturation and brightness constant. Rendering is strange. Either a limitation or the result of hastiness in coding...

int first = 100;
int second = 200;
int s_constant=350;
int b_constant=350;
// Starting color = #FF80FE
int R1 = 0xFF, G1 = 0x80, B1 = 0xFE;
// Ending color = #86FF80
int R2 = 0x86, G2 = 0xFF, B2 = 0x80;
void setup()
{
size(200, 200);
background(0);
colorMode(HSB);
noLoop();
}
float[] hsbvals = new float[3];
void draw()
{
strokeWeight(1);
for (int i = 0; i < width; i++)
{
int r = int(map(i, 0, width, R1, R2));
int g = int(map(i, 0, width, G1, G2));
int b = int(map(i, 0, width, B1, B2));
//stroke(r, g, b);
java.awt.Color.RGBtoHSB(r, g, b, hsbvals);
println(hsbvals);
float hue = 255 * hsbvals[0];
stroke(hue, s_constant, b_constant);
line(i, 0, i, height);
}
}

Top Reply