How to replace single color in an image?

Programming Questions

alepoc69

How to replace single color in an image?

in Programming Questions • 2 years ago

Hi.

I'm building an image from a database of around two millions lines. Each line is of one of 3 colors.

This process is very long and I would like to avoid it when possible.

After the image has been composed, according to the aestethical result, I would like to change a single color WITHOUT recalculating the whole database. I cannot find an algorithm to do this.

If there is no smooth (and no antialiasing) it is easy: I scan the image replacing pure original color pixels.

With smooth() antialiasing doesn't let this simple approach.

This source shows the problem:

color colbg = #000000;
color col1a = #008844;
color col2a = #884400;
color col3a = #440088;
color col1b = #ff88ff;
color col2b = #88ffff;
color col3b = #ffff88;
void setup() {
size(400,400);
background(colbg);
smooth();
strokeWeight(35);
noFill();
// draw lines
stroke(col2a);
bezier(70,50,150,650,300,-250,300,300);
stroke(col3a);
bezier(50,150,50,50,350,300,350,350);
stroke(col1a);
bezier(50,50,50,150,250,250,200,300);
// replace a single color
loadPixels();
for (int i=0; i<pixels.length; i++) {
if (pixels[i] == col1a) pixels[i] = col1b;
}
updatePixels();
}
void draw() {
}

With antialiasing the border of pink curve is greenish, a souvenir of its original color.

Is there an algorithm to replace the green original color in a more effective way to remove this artefact?

I thought to play with different PGraphics (one for each color) and find a way to manage transparencies but I saw that smooth() doesn't work in PGraphics.

Any idea? Libraries?

Thanks in advance

Alessandro

Replies(3)

PhiLho

Re: How to replace single color in an image?

2 years ago

" I saw that smooth() doesn't work in PGraphics"
Where did you see that? It works fine, otherwise we wouldn't have smooth in the sketch as well.

mbraendle

Re: How to replace single color in an image?

2 years ago

I'm not versed in image processing, but here some ideas how I would try to solve your problem. The problem is that your code is in 1/0 (binary) logic (replace only the color value that exactly matches), but now you need to add some fuzzyness.

Variant 1:

- create a color histogram in a first pass, using distance between individual color channels (r,g,b) as a coordinate. Calculate channel differences of old color to new color Then,in a second pass, transform all the colors that are within a given distance to the old color (old color +- range) by adding the channel differences.

- I'm sure there is already a library (see in Processing libraries) for histogram creation.

- by the way, in the first pass you could also store the coordinates of the points with the color. In the second pass, you then just need to run over those and not over the whole image

Variant 2

- probably needs only one pass. Transform your color values to HSB. The same for your image pixels. Consider again HSB values in a given range and add difference old-new color. Transform back to RGB.

Personally, I would prefer variant 1, combined with HSB.

alepoc69

Re: How to replace single color in an image?

2 years ago

Thank both of you for your answers.

phi.lo: you are right: my mistake! I've been blinded so long by blend/PImage/PGraphics that in the dozens of attempts I've lost something (PGraphics DOES smooth

)

mbraendle: before trying your hints I found a simple solution for my problem using tint(). Thank you anyway for your answer.

Here is the trick using tint():

1) each group of lines with the same color share a PGraphics: they are painted white with no background

2) tint() will choose the color before calling image()

3) image() is called to show the group of lines in the proper color.

And here is an example code:

PGraphics pg1; // two random bezier curves (used as masks)
PGraphics pg2;
void setup() {
size(400,400,JAVA2D);
background(#EA9F13);
// this creates a white bezier (smoothed)
pg1 = createGraphics(width, height, JAVA2D);
pg1.beginDraw();
pg1.smooth();
pg1.noFill();
pg1.strokeWeight(35);
pg1.stroke(255);
pg1.bezier(50,50,100,50,300,350,350,355);
pg1.endDraw();
// this creates another white bezier
pg2 = createGraphics(width, height, JAVA2D);
pg2.beginDraw();
pg2.smooth();
pg2.noFill();
pg2.strokeWeight(35);
pg2.stroke(255);
pg2.bezier(350,50,200,50,100,350,50,355);
pg2.endDraw();
tint(#FAB638); // first image: white is assigned this color, background is transparent
image(pg1,0,0);
tint(#FCD894); // the same for the second image
image(pg2,0,0);
}
void draw() {
}

This doesn't answer the question: it assumes the use of color layers, and doesn't work on the final image.

But that's enough for the moment.

Alessandro

Top Reply