Turn Blue pixels into Red Pixels

Programming Questions

jokaine

Turn Blue pixels into Red Pixels

in Programming Questions • 2 years ago

Hi there!
I'm having some trouble with an exercise...
I'm suppose to turn all the blue pixels of a jpg into red ones... and when the Blue amount of a Pixel is over 180, I shall turn it down to 150 and increase the Red abount to 220. Additionally I'm supposed to keep in mind that bright pixel have also a high amount of blue, without looking blue, sothat I shall find an additional criteria, to exclude those pixels.
Has anybody got an Idea?
Sry that Im so noob...

Replies(6)

tfguy44

Re: Turn Blue pixels into Red Pixels

2 years ago

What have you got so far? It's hard to help you since I don't know if you need help iterating over all the pixels in an image, analyzing the color of that pixel, or updating it if certain conditions are met.

Basically, post the code you have so far. If you have none, at least try to do it on your own first!

jokaine

Re: Re: Turn Blue pixels into Red Pixels

2 years ago

Hi tfguy44,
so what I recieve from my teacher is:

PImage img;
void setup(){
size(381,250);
img = loadImage("xxx.jpg");
img.loadPixels();
loadPixels();
}

void draw(){
/*your code */

updatePixels();
}

and what I tryed so far, after looking up the PixelArray example is:

PImage img;

int direction = 1;
float signal;
c=(r,g,b);

void setup(){
size(381,250);
noFill();
stroke(255);
frameRate(30);
img = loadImage("toolbox.jpg");
img.loadPixels();
loadPixels();
}

void draw(){

if (signal > img.width*img.height-1 || signal < 0) {
    direction = direction * -1;
}

if (mousePressed) {
    int mx = constrain(mouseX, 0, img.width-1);
    int my = constrain(mouseY, 0, img.height-1);
    signal = my*img.width + mx;
} else {
    signal += 0.33*direction;
}

int sx = int(signal) % img.width;
int sy = int(signal) / img.width;

if (keyPressed) {
    set(0, 0, img); // fast way to draw an image
    point(sx, sy);
    rect(sx - 5, sy - 5, 10, 10);
} else {
    color c = img.get(sx, sy);
    background(c);
}

if (b>180){
set(b=150);
set(r=220);
updatePixels();
}

But unfortunally I doesnt seem to work... :-(

tfguy44

Re: Turn Blue pixels into Red Pixels

2 years ago

Your code is a mess, and is riddled with syntax errors. It won't even run. I'm not even going to attempt to fix it.

Instead, I'll show you what I have so far:

PImage img;
void setup() {
img = loadImage("http://www.thedailygreen.com/media/cm/thedailygreen/images/confetti-red-white-blue-lg.jpg");
size(img.width, img.height);
img.loadPixels();
loadPixels();
}
void draw() {
float R, G, B;
image( img, 0, 0);
if (mousePressed) {
for ( int i = 0; i < img.pixels.length; i++) {
R = img.pixels[i] >> 16 & 0xFF;
G = img.pixels[i] >> 8 & 0xFF;
B = img.pixels[i] & 0xFF;
if ( B > mouseX && G < mouseY ) {
B = 150;
R = 220;
}
pixels[i] = color( R, G, B );
}
updatePixels();
}
}
void mouseReleased(){
println( "Mouse released at (" + mouseX + ", " + mouseY + ")" );
}

jokaine

Re: Turn Blue pixels into Red Pixels

2 years ago

Dear tfguy44,
thank you very much for your time and help !!!
Meanwhile I was able to find a simplier solution:

PImage img;

void setup(){
size(381,250);
img = loadImage("toolbox.jpg");
img.loadPixels();
loadPixels();

}
int i=0;

void draw(){
   float r,g,b;
for (int i = 0; i < width*height; i++) {
      r = red (img.pixels[i]);
      g = green (img.pixels[i]);
      b = blue (img.pixels[i]);

     if (b>180){
       if( r<200 |g<200){
     r=220;
     b=150;
   }
}

     pixels[i] = color(r,g,b);
    }

updatePixels();

}

void keyPressed(){
if (key == ' ') {
    saveFrame("Toolboxred.jpg");
}
}

Since I wasnt able to understand the following lines:

R = img.pixels[i] >> 16 & 0xFF;
G = img.pixels[i] >> 8 & 0xFF;
B = img.pixels[i] & 0xFF;
if ( B > mouseX && G < mouseY )
println( "Mouse released at (" + mouseX + ", " + mouseY + ")" );

What does >> stands for ? Why 16 and 8 and 0xFF is that the hexadecimal no. ?
What does && means ?
+ mouseX + ?

tfguy44

Re: Turn Blue pixels into Red Pixels

2 years ago

The first three lines that you didn't understand are just faster ways of doing red(), green() and blue(), using the right bit-shift operator >> and the bit-wise AND operator &.

I am comparing the blue and green values (B and G) to the mouse cursor position so that when you hold the mouse down in the code I posted, it compares using different values. This way you can find the point where the blue and green values seem to work the best for what you're trying to do, which are reported to you by the fifth line you didn't understand once the mouse is release (which causes mouseReleased() to run).

My code also has a couple of other advantages over the simple example you found (which is doing basically the same thing as what I posted). Its screen size isn't a fixed dimension, and will work for any sized image. It also loops based on the images pixel array size instead of the screen size.

&& is the logical AND operator. By the way: Your simple example is using | instead of ||. When you're doing logical comparisons, use the logical operators, not the bit-wise ones.

+ mouseX + is concatenating the mouse's position into the string it is printing.

You really should try running the code I posted, and click the mouse on the image, and move the mouse about.

You should also go and read the Processing Reference.

jokaine

Re: Re: Turn Blue pixels into Red Pixels

2 years ago

Once again: Thank you very much!