# OpenGL 2D Color Interpolation

This topic is 3736 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

I am currently trying to figure out how to interpolate between colors; I have read the Wikipedia page on Linear Interpolation, and learned how to draw lines.. Though, this of course hasn't helped me much. Doesn't seem to work to well with colors.. (2D where as Color in my case uses R,G,B 1D..) ie: y = y0 + (x - x0) * (y1 - y0) / (x1 - x0) I tried to work out an interpolation method with 'weights' though, I came out with a more 'spotlight' effect than anything. My goal is to render colors much like OpenGL interpolates theirs. I am using a small class which I call ColorPoint~ the class defines a point and a Color value.. I could place these ColorPoints anywhere over a plane, and it should interpolate between them in set each pixel(color) onto the plane.. This is 2D though my current experiments have been in 1D.. I am working in C# at the moment. I have read many different formula's while on Google.. such as 1/RED_SRC - RED_DST; and of course the intermediate value expressed as x/2 + x'/2.. I thought up some BRUTE FORCE methods of applying interpolation, though it doesn't feel to practical, neither dynamic. :P So, is their any simple example, or code out there I can look from? I can hopefully fallow the math, and I have been programming for years, so I shouldn't have trouble understanding the syntax no matter what language(except ASM).. Thanks! :D Currently, this is a 2D version w/ the spotlight effect I had mentioned: http://img245.imageshack.us/img245/9249/interpolationbx0.jpg [Edited by - pinknation on May 24, 2008 2:29:12 AM]

##### Share on other sites
To do a spotlight effect, it would be easiest to start with an ambient color stating how bright it is. Then for the light, it has a position and radius. When the distance between the pixel and light source is > the radius, the light has no affect. So to apply the light color, you can do:

COLOR = AMBIENT + ((LIGHT_COLOR - AMBIENT) * DIST)

Where the DIST is the distance, in percent (0 to 1) between the pixel and the light source, where 0 is the outside of the circle and 1 is the center of the circle. So DIST could be calculated by:

DIST = (RADIUS - Distance(LIGHT_SOURCE,PIXEL_SOURCE)) / RADIUS

As you can see, if your LIGHT_COLOR + AMBIENT is greater than the highest RGB value (usually 255), the center of your light will result in RGB values of greater than 255, so all you got to do is just keep it clamped between 0 and 255. The result of this is that instead of a single point at 100% brightness then it constantly spreading out darker, you can have a huge bright center. As you increase the LIGHT_COLOR, but the RADIUS is the same, it will also fade out quicker. Using this, you can get a decent start some different kinds of spotlights.

If it helps, imagine a number-line where the left side is 255 and the right is 0. At 100%, you are on the far left, where the value is 255. As you increase the percent, you are just getting closer to 0, where 0% is 0. The right point is like your min and the left your max, and the distance is just saying "how much" of each point you use. If you are at 75%, you are just using 25% of the left point (0.75 * 255) and 25% of the right point (0.25 * 0) for the final value.

Obviously this is very inefficient, but efficiency wasn't the point of this post. ;) Hopefully that helps you towards the answer you are looking for.

##### Share on other sites
Actually this doesn't help me at all.. When I mentioned spotlight effect I was talking about where I had spoofed on trying to solve color interpolation. :P Though, very interesting as I'll fallow that for some lighting effects.. :) Anyways, still am looking for information on Color Interpolation :)
Note:
like OpenGL does its color interpolation, I am trying to do the same.. :)

##### Share on other sites
http://wwwx.cs.unc.edu/~sud/courses/236/a5/

I didn't check the source but it looks like they do software interpolation which may help you.

##### Share on other sites
Forget that form of equation from the Wikipedia entry, it's not very helpful. I prefer the algebraic form p(t) = (p1 - p0)t + p0 where p0 is your starting/initial point, p1 is your end point, t is some scalar value (typically time but not necessarily) in the range of [0, 1].

If you consider an RGB tuple as a 3D point then you can view all colour "points" as residing in/on a "colour cube" aligned to the origin, one of the corners of the cube is at the origin i.e. the point at (0.0, 0.0, 0.0) is also your RGB value which represents black, to better understand what I mean have a look at this picture:

Now it should be easy to interpolate between two RGB colours, just change p0 and p1 with the two colours you want to interpolate e.g.:
Let red = (1.0, 0.0, 0.0), blue = (0.0, 0.0, 1.0), t = 0.5Let interpolatedColour = (blue - red) * t + red                       = (-1.0, 0.0, 1.0) * 0.5 + (1.0, 0.0, 0.0)                       = (-0.5, 0.0, 0.5) + (1.0, 0.0, 0.0)                       = (0.5, 0.0, 0.5)

Back to your problem, could you explain a little more what you're trying to achieve exactly, are you trying achieve something like this:

If so then I what you really need to be doing is bilinearly interpolate colours, bilinear interpolation which is an extension of linear interpolation but with two parameters on a plane/flat surface as a opposed to a line.

1. 1
2. 2
frob
15
3. 3
4. 4
5. 5

• 20
• 11
• 13
• 14
• 78
• ### Forum Statistics

• Total Topics
632142
• Total Posts
3004393

×