# Color map from grayscale

**URL:** <https://discourse.processing.org/t/color-map-from-grayscale/10656>\
**Category:** Coding Questions\
**Created:** [April 26, 2019, 9:13am UTC](https://discourse.processing.org/t/color-map-from-grayscale/10656 "2019-04-26T09:13:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![fun](https://avatars.discourse-cdn.com/v4/letter/f/ac8455/32.png) [@fun](https://discourse.processing.org/u/fun)\
**Post date:** [April 26, 2019, 9:13am UTC](https://discourse.processing.org/t/color-map-from-grayscale/10656/1 "2019-04-26T09:13:23Z")

</div>

I am looking for a way to create a heat map from a sequence of gray scale images with nice gray scale blobs. The heat map should look like these maps you know from eyetracking. Starting with black, blue, green and then turning red with the most used spots. Has this been made before ?

I could readout the gray values in the image series (20 - 100 images), dont know maybe add the values and get a summed up image in an array / unclear ? will have to normalize them somehow ?

Then try to convert the gray scale in an blue - green - red image ? with some kind of look up table color map.  
I guess I would have to define 256 colors for the 256 gray hues in an array ?

I found this on the web which has an interesting concept for the look up table.

> <https://dsp.stackexchange.com/questions/4677/how-to-generate-false-color-palette>

What do you thing ist this the route I should go ? Don´t know how to start.  
Not much on openprocessing and elsewhere.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [April 27, 2019, 8:45am UTC](https://discourse.processing.org/t/color-map-from-grayscale/10656/2 "2019-04-27T08:45:52Z")

</div>

Since you have specific colors defining your own spectrum, I would stick to a lookup table as you mentioned. Also check this next post by Jeremydouglass as you might find it useful to your case: [https://forum.processing.org/two/discussion/21604/how-to-make-gradation-ellipse-using-three-color#latest](https://forum.processing.org/two/discussion/21604/how-to-make-gradation-ellipse-using-three-color#latest)

I suggest try coding a basic concept and share your code to receive feedback.

Kf

---

<div class="post-metadata">

**Author:** ![fun](https://avatars.discourse-cdn.com/v4/letter/f/ac8455/32.png) [@fun](https://discourse.processing.org/u/fun)\
**Post date:** [April 27, 2019, 3:22pm UTC](https://discourse.processing.org/t/color-map-from-grayscale/10656/3 "2019-04-27T15:22:04Z")

</div>

Thanks a lot. The hint with lerpColor is great. What a clever idea.  
Didn´t expect the lerp to be this useable in gradients.

I did some test with the heatmap and it looks good.

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

I am still struggeling with the summing up of the greyvalues.  
I have a sequence of 20 to 60 greyscales Images and I need to reduce them to one, where all the white blobs are visable and the greys should add up somehow so the more often used spots should get brighter.

These are some samples

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

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [April 27, 2019, 4:13pm UTC](https://discourse.processing.org/t/color-map-from-grayscale/10656/4 "2019-04-27T16:13:10Z")

</div>

Hi,

What you describe sounds like the “ADD” blend mode:  
[https://processing.org/reference/blend\_.html](https://processing.org/reference/blend_.html)

Or you can also do it manually like this:

> **[Demo - Adding up images - OpenProcessing](https://www.openprocessing.org/sketch/704283)**
>
> Add up several images

---

<div class="post-metadata">

**Author:** ![fun](https://avatars.discourse-cdn.com/v4/letter/f/ac8455/32.png) [@fun](https://discourse.processing.org/u/fun)\
**Post date:** [April 28, 2019, 9:41am UTC](https://discourse.processing.org/t/color-map-from-grayscale/10656/5 "2019-04-28T09:41:42Z")

</div>

Thank you very much great ideas for solving this. Getting closer. The Demo Adding up images is nice.

It is still tricky as the normalisation seems to be the problem.  
With normalisation the rare used spots (light gray) get darker. Which is correct but the heatmap gets unuseable.  
If I turn off the normalisation, the bluriness of the blobs gets lost as it adds up to quick.  
So I guess the right algorithm must contain some threshold value.  
Like if a blob apears only once in a spot it gets fully recorded. if it appears more often it should add up slowly, depending on how often it apears ?

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [April 28, 2019, 3:00pm UTC](https://discourse.processing.org/t/color-map-from-grayscale/10656/6 "2019-04-28T15:00:42Z")

</div>

When you have the normalized sum you can do what you want with the data.

For example you can implement a simple S-Curve to change the value in a non-linear way.

I did an exemple here : [https://www.openprocessing.org/sketch/704283](https://www.openprocessing.org/sketch/704283)

It is a bit slow on openProcessing but should run smoothly on your computer.

---

<div class="post-metadata">

**Author:** ![fun](https://avatars.discourse-cdn.com/v4/letter/f/ac8455/32.png) [@fun](https://discourse.processing.org/u/fun)\
**Post date:** [April 28, 2019, 8:43pm UTC](https://discourse.processing.org/t/color-map-from-grayscale/10656/7 "2019-04-28T20:43:19Z")

</div>

wow this is awesome. This is really cool. I havent fully understood it but this is great.  
I guess I will add a controlleable blur depending on the number of images and then the heatmaps will be perfect.  
So much better then doing it manually in Gimp and Photoshop. Processing has won again. 🙂

Many thanks I was so stuck. Superb !