I want to fill the intersection of two(or more filled) rectangles with the average color. I have the colors of each rectangle stored as unsigned ints. How can I get the average color?
Thank you for you help!
Technically, you might be running on a color-map device, which means you need to go through X11 color management for all of this. You need to query the XColor for your two input colors, compute the average, then look up the closest representable color:
// Query XColor for both input colors
XColor xcol1, xcol2, outcol;
xcol1.pixel = color1;
xcol2.pixel = color2;
XQueryColor(display, colormap, &xcol1);
XQueryColor(display, colormap, &xcol2);
// Average red/green/blue and look up nearest representable color
outcol.red = (xcol1.red + xcol2.red) / 2;
outcol.green = (xcol1.green + xcol2.green) / 2;
outcol.blue = (xcol1.blue + xcol2.blue) / 2;
XAllocColor(display, colormap, &outcol);
// outcol.pixel is now the color to use
On a paletted device, you also need to free the color afterwards etc. - it's a mess, basically.
But in all likelihood you're on a 32-bit truecolor device, which means the integer is just a bitfield of r, g, b and a (not necessarily in that order). You can compute their average like this:
UInt out_color = 0;
for (int i=0; i < 4; i++) {
// Extract channel i from both input colors
UInt in1 = (color1 >> (i*8)) & 0xff;
UInt in2 = (color2 >> (i*8)) & 0xff;
// Compute the average and or it into the output color
out_color |= ((in1 + in2) / 2) << (i*8);
}
Color color1 = Color.FromArgb(UInt1);
Color color2 = Color.FromArgb(UInt2);
Color averageColor = Color.FromArgb(255,(color1.R + color2.R)/2,(color1.G + color2.G)/2,(color1.B + color2.B)/2);
This is assuming that you need a fully opaque average color.
Related
I need to convert 24-bit colors to 4-bit RGBI (1 bit for Red, Green, Blue + Intensity).
Converting to 3-bit RGB is rather simple: set color bit if greater than 127, clear otherwise. However, there's only one intensity bit for all three channels, so what's the correct way to set it (if any)?
First I thought about dividing 8-bit channel to three parts like below:
if 0 <= color <= 85, then clear rgbi-color bit
if 86 <= color <= 170, then set rgbi-color bit
if 171 <= color <= 255, then set rgbi-color bit and intensity
But then I thought that probably the correct way would be to set intensity bit only if two of three channels are greater than 127. But in that case pure R, G, or B will not have intensity ever set (for example, in case of rbg(0,0,200)
Any advice is highly appreciated
A simple way to find the closest 4-bit RGBI approximation of a color is to consider the two possibilities for the intensity bit separately. That is to say, first find the closest RGB0 and RGB1 approximations for the color (which is easy to do, just by dividing each color axis at the appropriate point), and the determine which of these approximations is better.
Here's a simple C-ish pseudocode description of this algorithm:
// find the closest RGBx approximation of a 24-bit RGB color, for x = 0 or 1
function rgbx_approx(red, green, blue, x) {
threshold = (x + 1) * 255 / 3;
r = (red > threshold ? 1 : 0);
g = (green > threshold ? 1 : 0);
b = (blue > threshold ? 1 : 0);
return (r, g, b);
}
// convert a 4-bit RGBI color back to 24-bit RGB
function rgbi_to_rgb24(r, g, b, i) {
red = (2*r + i) * 255 / 3;
green = (2*g + i) * 255 / 3;
blue = (2*b + i) * 255 / 3;
return (red, green, blue);
}
// return the (squared) Euclidean distance between two RGB colors
function color_distance(red_a, green_a, blue_a, red_b, green_b, blue_b) {
d_red = red_a - red_b;
d_green = green_a - green_b;
d_blue = blue_a - blue_b;
return (d_red * d_red) + (d_green * d_green) + (d_blue * d_blue);
}
// find the closest 4-bit RGBI approximation (by Euclidean distance) to a 24-bit RGB color
function rgbi_approx(red, green, blue) {
// find best RGB0 and RGB1 approximations:
(r0, g0, b0) = rgbx_approx(red, green, blue, 0);
(r1, g1, b1) = rgbx_approx(red, green, blue, 1);
// convert them back to 24-bit RGB:
(red0, green0, blue0) = rgbi_to_rgb24(r0, g0, b0, 0);
(red1, green1, blue1) = rgbi_to_rgb24(r1, g1, b1, 1);
// return the color closer to the original:
d0 = color_distance(red, green, blue, red0, green0, blue0);
d1 = color_distance(red, green, blue, red1, green1, blue1);
if (d0 <= d1) return (r0, g0, b0, 0);
else return (r1, g1, b1, 1);
}
Alternatively, you could simply use any generic fixed-palette color quantization algorithm. This may yield better results if your actual color palette is not a pure evenly spaced RGBI palette like the code above assumes, but rather something like e.g. the CGA tweaked RGBI palette.
I am parsing an obj file which contains the texture coordinates (vt) values. From what I understand, vt values are a mapping into the texture image corresponding to this obj.
Assume, I have image im = 400x300 pixels
and I have a vt value
vt .33345 .8998
The mapping says, in the image, go the coordinate :
imageWidth x .3345 , imageHeight x .8998 and use the value there.
I have loaded the image values in a 2-d array.
The problem is, these mapping coordinates are floating values, how am I suppose to map them to the integer values of the pixel coordinates ? I can always truncate the decimal part, round off etc. But does the standard defines which one of the option is to be done ?
UV coordinates to Pixel coordinates :
pix.x = (uv.x * texture.width) -0.5
pix.y = ((1-uv.y) * texture.height) -0.5
The y axis of uv coordinates is opposite to the Pixel coordinates on an image.
For nearest neighbor interpolation, just round off the pixel coordinates.
For bilinear interpolation, calculate the participation percentage from the four neighbouring pixels and do a weighed average.
When UV coordinates go outside of range, there is a choice on how to handle the "texture wrapping":
Here's some java code for bilinear interpolation with "repeat" texture wrapping:
private static int billinearInterpolation(Point2D uv, BufferedImage texture) {
uv.x = uv.x>0 ? uv.x%1 : 1+(uv.x%1);
uv.y = uv.y>0 ? uv.y%1 : 1+(uv.y%1);
double pixelXCoordinate = uv.x * texture.getWidth() - 0.5;
double pixelYCoordinate = (1-uv.y) * texture.getHeight() - 0.5;
pixelXCoordinate = pixelXCoordinate<0?texture.getWidth()-pixelXCoordinate: pixelXCoordinate;
pixelYCoordinate = pixelYCoordinate<0?texture.getHeight()-pixelYCoordinate : pixelYCoordinate;
int x = (int) Math.floor(pixelXCoordinate);
int y = (int) Math.floor(pixelYCoordinate);
double pX = pixelXCoordinate - x;
double pY = pixelYCoordinate - y;
float[] px = new float[]{(float) (1 - pX), (float) pX};
float[] py = new float[]{(float) (1 - pY), (float) pY};
float red = 0;
float green = 0;
float blue = 0;
float alpha = 0;
for (int i = 0; i < px.length; i++) {
for (int j = 0; j < py.length; j++) {
float p = px[i] * py[j];
if (p != 0) {
int rgb = texture.getRGB((x + i)%texture.getWidth(), (y + j)%texture.getHeight());
alpha += (float) ((rgb >> 24) & 0xFF) * p;
red += (float) ((rgb >> 16) & 0xFF) * p;
green += (float) ((rgb >> 8) & 0xFF) * p;
blue += (float) ((rgb >> 0) & 0xFF) * p;
}
}
}
return (((int) alpha & 0xFF) << 24) |
(((int) red & 0xFF) << 16) |
(((int) green & 0xFF) << 8) |
(((int) blue & 0xFF) << 0);
}
Uv-Coordinates are always in the range [0,1]. This means, you will get the actual pixel coordinates by multiplying them with the image size:
texel_coord = uv_coord * [width, height]
Note, that even here one gets floating point values and there are several ways how to deal with them. The most primitive one is to simply round to the next integer to get the nearest texel. A more sophisticated method would be bilinear filtering.
I want to create a colour scroller effect. I have a function that I give it RGB values (eg. setColor(189,234,45)) and I want to change the colour rapidly but I don't want to get many repeats to create an effect of scrolling through the colours.
I have tried tried the following but it doesn't quite generate the effect that I am looking for.
for (int i = 0; i < 256; i++) {
for (int j = 0; j < 256; j++) {
for (int k = 0; k < 256; k++) {
setColor(i, j, k);
}
}
}
I wanted to know if anyone knows how the colour scroller's colours are arranged next to each other. The arrangement I am looking for looks like the scroll on the right.
The colors you are working with are represented as R,G,B (red green blue) values. However, another
way to think about color is hue, saturation, value. In the scroll image you are trying to emulate,
it is the hue that is changing - the saturation and value (brightness) are unaffected.
Here is a function that happens to make a hue-cycle gradient like the one in the image you linked to:
int n = 256; // number of steps
float TWO_PI = 3.14159*2;
for (int i = 0; i < n; ++i) {
int red = 128 + sin(i*TWO_PI/n + 0) + 127;
int grn = 128 + sin(i*TWO_PI/n + TWO_PI/3) + 127;
int blu = 128 + sin(i*TWO_PI/n + 2*TWO_PI/3) + 127;
setColor(red, grn, blu);
}
To understand how that function works, I recommend that you read my color tutorial that GreenAsJade linked to.
However, that kind of gradient function isn't quite what you need, because you want to start from a particular color you are passing in, and then go to the next color in the sequence. It's much easier to do this kind of thing if you represent your colors as HSV triplets (or HSB triplets), instead of RGB triplets. Then you can manipulate just the hue component, and get those kind of rainbow effects. In helps to have a set of function that can convert from RGB to HSV and back again.
This site contains a bunch of color conversion source code, including the ones you need for those conversions. Using the two conversion functions supplied on that page, your code might look like:
void cycleMyColor(int *r, int *g, int *b) {
float h,s,v, fr,fg,fb;
RGBtoHSV(*r/255.0,*g/255.0,*b/255.0,&h,&s,&v);
h += 1/256.0; // increment the hue here
h -= (int) h; // and cycle around if necessary
HSVtoRGB(&fr,&fg,&fb,h,s,v);
*r = fr*255; *g = fg*255; *b = fb*255;
setColor(*r,*g,*b);
}
This code is a little more complicated than it needs to be because the color conversions on that site use floating point color components that go from 0-1, instead of integers that go from 0-255, as you were using, so I'm spending a few lines converting between those two representations. You may find it simpler to just keep your color in HSB space, and then convert to RGB when you want to display it.
As you mentioned in your edit, you don't like the sequence of colours, because you start from black an end at white, instead of starting at one end of the rainbow and going to the other.
So you are going to need to work out a sequence of RGB that goes from blue through green and yellow to red. That means you need to start with (0,0,255) and end at (255, 0, 0), and don't pass through (255,255,255) or (0,0,0) - in a nutshell, that's how its done.
There are many ways you could do this and get a pleasing effect - beyond the scope of an answer here. This article explores it in depth:
http://krazydad.com/tutorials/makecolors.php
I'm having trouble with my Hexadecimal values. I'm trying find a way so as the alpha of my HEX changes over time.
Right now my code looks like:
color c = 0X00202020;
Trying to change the'0x00" to a var as to allow it to be more easily manipulated. I have tried...
int alph = 00;
color = 0xalph202020;
Obviously this does not work.
Is there any other way to use variables inside of a HEX?
I really don’t want to convert the values to RGB. Hoping to find a solution.
You don't mention which language. In most you can "bit shift".
e.g.
int red = 0x20;
int green = 0x20;
int blue = 0x20;
int alpha = 0;
// Shift the alpha value "left" by 24 bits, red by 16 and green by 8.
// Assumes that each value is just 8bits long (0-255)
//
int color = (alpha << 24) + (red << 16) + (green <<8) + blue;
Best way to change only alpha value of your color is using 'color()' methode with hexadecimal value so you do not need to convert value into RGB:
color c = color(0x00202020, alph);
I need to process the first "Original" image to get something similar to the second "Enhanced" one. I applied some naif calculation and the new image has more contrast and more strong colors but in the higher color regions a color hole appears. I have no idea about image processing, it would be great if you can suggest me which concepts and/or algorithms I could apply to get the result without this problem.
Convert the image to the HSB (Hue, Saturation, Brightness) color space.
Multiply the saturation by some amount. Use a cutoff value if your platform requires it.
Example in Mathematica:
satMult = 4; (*saturation multiplier *)
imgHSB = ColorConvert[Import["http://i.imgur.com/8XkxR.jpg"], "HSB"];
cs = ColorSeparate[imgHSB]; (* separate in H, S and B*)
newSat = Image[ImageData[cs[[2]]] * satMult]; (* cs[[2]] is the saturation*)
ColorCombine[{cs[[1]], newSat, cs[[3]]}, "HSB"]] (* rebuild the image *)
A table increasing the saturation value:
The "holes" that you see in the processed picture are the darker areas of the original picture, which went to negative values with your darkening algorithm. I suspect these out of range values are then written to the new image as positive numbers, so they end up in the higher part of the brightness scale. For example, let's say a pixel value is 10, and you are substracting 12 from all pixels to darken them a bit. This pixel will underflow and become -2. When you write it back to the file, -2 gets represented as 0xfe in hex, and this is 254 if you take it as an unsigned number.
You should use an algorithm that keeps the pixel values within the valid range, or at least you should "clamp" the values to the valid range. A typical clamp function defined as a C macro would be:
#define clamp(p) (p < 0 ? 0 : (p > 255 ? 255 : p))
If you add the above macro to your processing function it will take care of the "holes", but instead you will now have dark colors in those places.
If you are ready for something a bit more advanced, here on Wikipedia they have the brightness and contrast formulas that are used by The GIMP. These which will do a pretty good job with your image if you choose the proper coefficients.
This wikipedia article does a good job of explaining histogram equalization for contrast enhancement.
Code for grayscale images:
unsigned char* EnhanceContrast(unsigned char* data, int width, int height)
{
int* cdf = (int*) calloc(256, sizeof(int));
for(int y = 0; y < height; y++) {
for(int x = 0; x < width; x++) {
int val = data[width*y + x];
cdf[val]++;
}
}
int cdf_min = cdf[0];
for(int i = 1; i < 256; i++) {
cdf[i] += cdf[i-1];
if(cdf[i] < cdf_min) {
cdf_min = cdf[i];
}
}
unsigned char* enhanced_data = (unsigned char*) malloc(width*height);
for(int y = 0; y < height; y++) {
for(int x = 0; x < width; x++) {
enhanced_data[width*y + x] = (int) round(cdf[data[width*y + x]] - cdf_min)*255.0/(width*height-cdf_min);
}
}
free(cdf);
return enhanced_data;
}