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

**URL:** <https://discourse.processing.org/t/colormap-an-rgb-or-grayscale-image-to-spectral-effect-like-thermal-image/27703>\
**Category:** Coding Questions\
**Created:** [February 10, 2021, 3:01pm UTC](https://discourse.processing.org/t/colormap-an-rgb-or-grayscale-image-to-spectral-effect-like-thermal-image/27703 "2021-02-10T15:01:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dimpapadop](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@dimpapadop](https://discourse.processing.org/u/dimpapadop)\
**Post date:** [February 10, 2021, 3:01pm UTC](https://discourse.processing.org/t/colormap-an-rgb-or-grayscale-image-to-spectral-effect-like-thermal-image/27703/1 "2021-02-10T15:01:38Z")

</div>

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](https://infragram.org/sandbox/index.html) 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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/17dc5f5bedbe481e454798fe144f8b87611036f0.jpeg)

 ![ndvi2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c424ce1e26ce588f84d848458184ad0c2f59e8ce.jpeg)

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

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a0bf5e7188ef03161f340a10c1db8fdcaa7aa40c.png)

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

---

<div class="post-metadata">

**Author:** ![r.jaoui](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r.jaoui/32/11777_2.png) [@r.jaoui](https://discourse.processing.org/u/r.jaoui)\
**Post date:** [February 10, 2021, 4:26pm UTC](https://discourse.processing.org/t/colormap-an-rgb-or-grayscale-image-to-spectral-effect-like-thermal-image/27703/2 "2021-02-10T16:26:58Z")

</div>

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 :

```auto
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() {
}

```

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [February 10, 2021, 4:28pm UTC](https://discourse.processing.org/t/colormap-an-rgb-or-grayscale-image-to-spectral-effect-like-thermal-image/27703/3 "2021-02-10T16:28:12Z")

</div>

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](https://timesofindia.indiatimes.com/life-style/events/surya-grahan-today-annular-solar-eclipse-2019-december-images-photos-pics-video-check-out-these-breathing-pictures-of-the-seasons-last-surya-grahan-of-26-december-2019-india/photostory/72975550.cms))  
> ![download](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/70aa979922114e2656203885f7e7f92ca132e0d6.jpeg)

The program:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/83339485260cd7e23a8e132745109be10e0f9180.jpeg)

> **Code**
>
> ```auto
> 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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7b75c0febb4574bb41c589ea2c68ce9457d61040.jpeg)

> **Code2**
>
> ```auto
> 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;
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![dimpapadop](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@dimpapadop](https://discourse.processing.org/u/dimpapadop)\
**Post date:** [February 10, 2021, 4:34pm UTC](https://discourse.processing.org/t/colormap-an-rgb-or-grayscale-image-to-spectral-effect-like-thermal-image/27703/4 "2021-02-10T16:34:35Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2bef6936ba255e2acbb423f0be2208824f091252.jpeg)

---

<div class="post-metadata">

**Author:** ![dimpapadop](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@dimpapadop](https://discourse.processing.org/u/dimpapadop)\
**Post date:** [February 10, 2021, 4:38pm UTC](https://discourse.processing.org/t/colormap-an-rgb-or-grayscale-image-to-spectral-effect-like-thermal-image/27703/5 "2021-02-10T16:38:31Z")

</div>

> [@CodeMasterX](#):
>
> ```auto
> PImage a,b,c;
> void setup() {
> size(777, 194);
> a = loadImage("download.jpg");
> b = modify(loadImage("download.jpg"));
> println(a.width,a.height);
> c = modify(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;
> }
> 
> ```

will try and post the results!  
thank you