Colormap an rgb or grayscale image to spectral - effect like thermal image

Processing Coding Questions
1

How can i achieve a colormapping effect from a pimage rgb (or even i could first convert to grayscale) to a range near the spectral like below? - based on brightness on grayscale. or based on blue and red brightness on rgb.
I took out the ir filter from an old digital camera, and i placed a blue filter on the lens, so i achieved something like near infrared filter. I now want to colorize it in the range shown bellow.
Paint red the most brighter areas, following yellowish, green, blueish… from brighter to darker accordingly, but also achieve that gradient effect also?
The “thermal” images were created after i uploaded my pics to Infragram | by Public Lab - Home converter. the tinted upper right is the actual pic taken after i modified the cam, notice that actually it has brighter colors in vegetation, and areas that actually emit more IR light.
I was planning in using the modified cam to track an ir led that will act as a pen to a diy smartboard, (works fantastic! just like a wiimote controller no interferance from actual bulbs) but i also thought to use it in this senario also. I think it actually is near the output of an ir/thermal camera)

image

ndvi2
ndvi2764×589 88.9 KB

the way i could think but i suppose it is not so good is…

PImage img;

void settings(){
 img = loadImage("pics.jpg");
 size(img.width,img.height);
}

void setup(){
 img.filter(GRAY);
 
 img.loadPixels();
 for (int i=0; i<img.pixels.length; i++){
   if (brightness(img.pixels[i])>=125){
    float x =  map(brightness(img.pixels[i]),125,255,color(255,255,0),color(255,0,0));
    img.pixels[i] = int(x);
   } else if (brightness(img.pixels[i])>=90){
    float x =  map(brightness(img.pixels[i]),90,125,color(0,150,0),color(0,255,0));
    img.pixels[i] = int(x);
   } else {
    float x =  map(brightness(img.pixels[i]),0,90,color(0,0,255),color(0,210,255));
    img.pixels[i] = int(x);
   }
   //temp = map(brightness(temp),125,255
   
   
   
 }
 img.updatePixels();
  image(img,0,0);
}

void draw(){
  
}

void mouseDragged(){
 println(brightness(get(mouseX,mouseY))); 
}

but i get something like this

image
image1019×737 425 KB

i suppose i could blur it a bit, but can anyone suppose a better way;

2

There is the colorMode() function that could help. You could use colorMode(HSB) and map the brightness value to the hue of the color. You should of course note that this isn’t at all a thermal image, which is usually taken in the infrared spectrum, at larger wavelengths.

Here is an example with your code :

PImage img;

void settings() {
  img = loadImage("pics.jpg");
  size(img.width, img.height);
}

void setup() {
  img.filter(GRAY);

  colorMode(HSB);
  img.loadPixels();
  for (int i=0; i<img.pixels.length; i++) {
    //CHANGE THE RANGE HERE IF NEEDED
    //YOU CAN ALSO IMPLEMENT A MODE "PHYSICAL" HUE DISTRIBUTION THAT CORRESPONDS TO BLACK BODY EMISSIONS (SEARCH UP WIEN'S LAW)
    img.pixels[i] = color(map(brightness(img.pixels[i]), 0, 200, 0, 100), 255, 255);
  }
  img.updatePixels();
  image(img, 0, 0);
}

void draw() {
}
1 Like
3

here is my take on the project:

Original image

Link: (Surya Grahan Today / Annular Solar Eclipse 2019 December Images, Photos, Pics, Video : Check out these breathing pictures of the seasons last Surya Grahan of 26th December 2019)
download

The program:
image

Code 
PImage a,b;
void setup() {
  size(518, 194);
  a = loadImage("download.jpg");
  //a = createImg(width/2,height);
  //b = modify(createImg(width/2,height));
  b = modify(loadImage("download.jpg"));
  println(a.width,a.height);
} 
void draw() {
  image(a,0,0);
  image(b,a.width,0);
}
PGraphics createImg(int w, int h) {
  PGraphics output = createGraphics(w, h);
  output.beginDraw();
  for(int i = 0; i < w; i++) for(int j = 0; j < h; j++) output.set(i,j,toGrayScale(color(i,j,i+j)));
  output.endDraw();
  return output;
}
PImage modify(PImage input) {
  PImage output = input;
  loadPixels();
  for (int i = 0; i < output.width; i++) for (int j = 0; j < output.height; j++) {
    output.pixels[i+j*output.width] = transform(input.pixels[i+j*output.width]);
  }
  updatePixels();
  return output;
}
color toGrayScale(color input) {
  color output = color( 0.299 * red(input) + 0.587 * green(input) + 0.114 * blue(input) ); //grayscaling a color
  return output;
}
color transform(color input) {
  colorMode(HSB);
  color output = color(red(input),255,255); //grayscaling a color
  colorMode(RGB);
  return output;
}

Logic:
works by first grayscaling an image and entering the pixel values into the transform() function. In this case, it will just use the grayscale value and entering it into colorMode(HSB), color([value],255,255);

version 2 that displays the grayscale img:

image
image776×220 62.1 KB

Code2 
PImage a,b,c;
void setup() {
  size(777, 194);
  a = loadImage("download.jpg");
  b = modify(loadImage("download.jpg"));
  println(a.width,a.height);
  c = (loadImage("download.jpg"));
  c.filter(GRAY);
} 
void draw() {
  image(a,0,0);
  image(c,a.width,0);
  image(b,a.width*2,0);
}
PGraphics createImg(int w, int h) {
  PGraphics output = createGraphics(w, h);
  output.beginDraw();
  for(int i = 0; i < w; i++) for(int j = 0; j < h; j++) output.set(i,j,toGrayScale(color(i,j,i+j)));
  output.endDraw();
  return output;
}
PImage modify(PImage input) {
  PImage output = input;
  loadPixels();
  for (int i = 0; i < output.width; i++) for (int j = 0; j < output.height; j++) {
    output.pixels[i+j*output.width] = transform(input.pixels[i+j*output.width]);
  }
  updatePixels();
  return output;
}
color toGrayScale(color input) {
  color output = color( 0.299 * red(input) + 0.587 * green(input) + 0.114 * blue(input) ); //grayscaling a color
  return output;
}
color transform(color input) {
  colorMode(HSB);
  color output = color(red(input),255,255); //grayscaling a color
  colorMode(RGB);
  return output;
}
1 Like
4

thank you simple and nice!
i get the following output.
I think i could skip the blueish also…

image
image764×572 168 KB

1 Like
5

will try and post the results!
thank you