Color a greyscale image using a gradient [SOLVED]

Questions & Answers
1

I asked this question on the forum aswell but i thought i might do it here as well.

[FORUM THREAD][1]

Lets say i have a heightmap(greyscale) and i want to apply color to it using a gradient, like they do on this site [HERE][2], in the middle of the page.

I got an answer on the forum which pointed me in what I think is the right direction. He said that i should make my gradient texture 1 pixel wide and 256 pixels tall (FIRST PROBLEM) and then load both my heightmap and gradient into seperate color arrays using GetPixels.
Next he gave me a line of code to use:

for(var i=0; i<heightmapColors.Length; i++){
    heightmapColors_=gradientColors[heightmapColors*.r];*_

}
with this description: “read each pixel in your height map and replace it with a pixel that many bytes into the second array.”
My problem is that when i try it his way i only end up with the lowest parts of the gradients color scale. Where 0.0 is blue and 256 is supposed to be grey (but now when the texture has to be 2x256 it is 512).
So my question is where do i go from here? And is there some other way to do this?
_[1]: http://forum.unity3d.com/threads/94758-Color-a-greyscale-images-using-a-gradient*_
_[2]: http://libnoise.sourceforge.net/tutorials/tutorial3.html*_

2

i haven’t played with heightmaps yet, but my guess would be that if your heightmap doesn’t span the entire range of its possible values, you’ll only get the lowest color range from your gradient (or some contiguous band of color from within the gradient).

you could find the min/max height values you have in the heightmap and then normalize them from 0…1 and then multiply that by the number of colors in your gradient (256 for example) and then use those values when looking up the color. that should get you the entire range of colors from your gradient.

3

This is what i did, and the result isnt what i hoped for:
using UnityEngine;
using System.Collections;
using System.IO;

public class terrainmap : MonoBehaviour {

	public Texture2D heightmap;
	public Texture2D gradient;
	
	private Color[] heightmapColors;
	private Color[] gradientColors;	
	
	void  Start (){
		heightmapColors = heightmap.GetPixels(0);
		gradientColors = gradient.GetPixels(0);
		colorize();
	}
	
	void  colorize (){
		Texture2D image= new Texture2D(heightmap.width, heightmap.height,TextureFormat.RGB24, false);
	
		for(int i=0; i<heightmapColors.Length; i++){
			float he = heightmapColors*.g;*

  •  	for(int j= 0; j<gradientColors.Length; j++) {*

  •  		float gr = gradientColors[j].g;*

  •  		if(he == gr) {*

_ heightmapColors = gradientColors[j];_
_ heightmapColors*.a = 1.0f;
 }
 }
 }
 image.SetPixels(heightmapColors, 0);
 image.Apply(); *_

* byte[] bytes = image.EncodeToPNG();*
* Destroy(image);*
* File.WriteAllBytes(“C:\ est.png”, bytes);*
* }*
}
And the result is this: [Picture][1]
Maybe i could make two gradients. One with the color, and that just goes from black to white. And then just take the cordinate of the current grey color and use the same position in the colored gradient?
_*[1]: ImageShack - Best place for all of your image hosting and image sharing needs

4

For anyone trying to figure this out aswell, here is my code:

using UnityEngine;
using System.Collections;
using System.IO;

public class terrainmap : MonoBehaviour {

	public Texture2D heightmap;
	public Texture2D gradientColor;
	
	private Color[] heightmapArray;
	private Color[] gradientArray;	
	
	void  Start (){
		heightmapArray = heightmap.GetPixels(0);
		gradientArray = gradientColor.GetPixels(0);
		colorize();
	}
	
	void  colorize (){
		Texture2D image= new Texture2D(heightmap.width, heightmap.height,TextureFormat.RGB24, false);
		
		for(int i=0; i<heightmapArray.Length; i++){
			float he = heightmapArray*.b;*

_ int color = (int)(he * 255.0f);_
_ heightmapArray = gradientArray;_
* }*
* image.SetPixels(heightmapArray, 0);*
* image.Apply();*
* Destroy(image);*
* File.WriteAllBytes(“C:\ est.png”, image.EncodeToPNG());*
* }*
}
this will generate [THIS][1] from [THIS][2] using [THIS][3]
_[1]: ImageShack - Best place for all of your image hosting and image sharing needs
_[2]: ImageShack - Best place for all of your image hosting and image sharing needs
_*[3]: ImageShack - Best place for all of your image hosting and image sharing needs

5

There’s this free resource that could be very useful in this particular case.

This will give you the chance to create your own color bands as assets and call an Evaluate method to get the color at position t, being t=0 the leftmost color and t=1 the rightmost color.
It’s ideal to remap values between 0 and 1 to a sequence of colors. Just make sure you normalize your values before giving them in.

59027-screenshot-01.png