CODEWITHSUNDEEP
javaalgorithmcolorsrgb
questions
questions

Reputation: 2387

Generate n colors between two colors

I'm trying to write function, which can generate colors between two colors based on a given value. An example would explain it better..

Input .. 

X : 1
Y : 0.5
Z : 0

The user gives any set of color:value pairs, then enters a number(say 0.75). I have to then generate color which is a blend of Y and Z in proportion(based on the their values and the input value). I was thinking of the following approach.

I'm completely lost, as how to generate colors and are there any libraries for this.

UPDATE: It is part of a bigger project I'm working on. Lets say we have .. 

1 : X
0 : Y

and the user inputs, 0.25

I would like to have something.. 

(X*0.25 + Y*0.75)

as it's more near to Y, that's why the higher proportion. If the user inputs, 0.5.. the output should be

(X*0.5 + Y*0.5)

and so on. I have no idea how to do this with RGB colors.

P.S: The questions is not specific to language, but I'm doing this in Java.

Upvotes: 6

Views: 9520

Answers (3)

Martin Larsson
Martin Larsson

Reputation: 1068

You could use Java.awt.color by doing somting like this:

public Color mixColors(Color color1, Color color2, double percent){
      double inverse_percent = 1.0 - percent;
      int redPart = (int) (color1.getRed()*percent + color2.getRed()*inverse_percent);
      int greenPart = (int) (color1.getGreen()*percent + color2.getGreen()*inverse_percent);
      int bluePart = (int) (color1.getBlue()*percent + color2.getBlue()*inverse_percent);
      return new Color(redPart, greenPart, bluePart);
}

Upvotes: 3

luk2302
luk2302

Reputation: 57124

You have to blend each color channel (red, green and blue) seperately like this:

Color x,y; //set by you
float blending;//set by you

float inverse_blending = 1 - blending;

float red =   x.getRed()   * blending   +   y.getRed()   * inverse_blending;
float green = x.getGreen() * blending   +   y.getGreen() * inverse_blending;
float blue =  x.getBlue()  * blending   +   y.getBlue()  * inverse_blending;

//note that if i pass float values they have to be in the range of 0.0-1.0 
//and not in 0-255 like the ones i get returned by the getters.
Color blended = new Color (red / 255, green / 255, blue / 255);

So far for the color example. Generally if you want a linear interpolation between two values you have to do the following:

var firstValue;
var secondValue;
var interpolation;

var interpolated =  firstValue * interpolation + 
                   secondValue * (1 - interpolation);

But since you have Color-Objects in your case, you cannot interpolate the whole object in one step, you have to interpolate each relevant value on its own. Eventually you have to interpolate the alpha-channel as well, don´t know that, since you didn´t mention it, but for completeness i include it in this answer.

Upvotes: 6

Lee Daniel Crocker
Lee Daniel Crocker

Reputation: 13171

A color is a point in a three-dimensional space. The exact coordinates used depend on what's called a "color space", of which there are several: RGB, HSV, and so on. So to compute a color in between two given colors, get those two colors in the same color space, and compute a third point between those two along the line in 3d-space between them.

The simplest way to do this would be simply to do a linear interpolation for each of the three values of the colorspace (R, G, and B, for example). But there's a further complication that the coordinate values are often not linear, so you have to linearize them first (for example, TV colors are exponential with a lambda of about 2.2). Depending on your application, incorrectly assuming linearity might work OK anyway, especially if the starting colors are already close.

(As mentioned by luk2302, add a fourth coordinate for alpha if necessary).

Upvotes: 4

Related Questions