Threshold method is turning every pixel black

Question

I am trying to implement my own threshold method in processing but I get a fully black image when I try to run the method on an image. Any help?

void threshold(PImage img) {
  for (int i = 0; i < 300; i++) {
    for (int j = 0; j < 300; j++) {
      if (img.pixels[imgP(i, j)] >= 128)
        img.pixels[imgP(i, j)] = 255;
      else 
      img.pixels[imgP(i, j)] = 0;
    }
  }
  img.updatePixels();
}

int imgP(int i, int j) {
  return i*300 + j;
}

Answer 1

There are a couple of things to improve:

1. don't hardcode the image dimensions (300,300), use img's .width and .height property: it will be easier to re-use your code
2. if you're looping through each pixels, there's no need to use a nested loop and the imgP function to compute a pixel index from a x,y position. Simply loop once through img.pixels (from 0 to img.pixels.length)

In terms of the threshold condition failing, the catch is the the condition and mainly the comparison value:if (img.pixels[imgP(i, j)] >= 128)

If you print the value of a pixel, you'll notice the value isn't from 0 to 255. Your image is probably RGB, hence the pixel value is in a different range. Let's say red, will be -65536 as a signed integer or 0xFFFF0000 in hex (notice ARGB)). Your threshold value shouldn't be 128, but -8355712 (FF808080).

Here's a refactored version of the function:

void threshold(PImage img,int value) {
  for(int i = 0 ; i < img.pixels.length; i++){
    if(img.pixels[i] >= color(value)){
      img.pixels[i] = color(255);
    }else{
      img.pixels[i] = color(0);
    }
  }
  img.updatePixels();
}

Here's a modified version of the sample sketch from Processing > Examples > Image > LoadDisplayImage:

/**
 * Load and Display 
 * 
 * Images can be loaded and displayed to the screen at their actual size
 * or any other size. 
 */

PImage img;  // Declare variable "a" of type PImage

void setup() {
  size(640, 360);
  // The image file must be in the data folder of the current sketch 
  // to load successfully
  img = loadImage("moonwalk.jpg");  // Load the image into the program
  
}

void draw() {
  // Displays the image at its actual size at point (0,0)
  image(img, 0, 0);
  //copy the original image and threshold it based on mouse x coordinates
  PImage thresh = img.get();
  threshold(thresh,(int)map(mouseX,0,width,0,255));
  
  // Displays the image at point (0, height/2) at half of its size
  image(thresh, 0, height/2, thresh.width/2, thresh.height/2);
}
void threshold(PImage img,int value) {
  for(int i = 0 ; i < img.pixels.length; i++){
    if(img.pixels[i] >= color(value)){
      img.pixels[i] = color(255);
    }else{
      img.pixels[i] = color(0);
    }
  }
  img.updatePixels();
}

I suspect this is an excercise to learn about reading/writing/processing images. PImage has a filter() method which you can use to threshold:

img.filter(THRESHOLD, yourThresholdAmountHere);