How to make a simple bumpmap

For that, you'll just have to make a colormap image and a bumpmap image. The colormap gives the color of the pixels and the bumpmap gives the altitude. The brighter, the higher. Then, the applet calculates the horizontal and vertical slope of every pixel by using the altitudes of the surrounding pixels. This means that the bumpmap image should be 1 rim of pixels bigger on every side, which makes it 2 pixels wider and higher than the colormap image. The applet itself is twice the width and height of the colormap image. The colormap image may contain up to 256 colors and the bumpmap should be grayscale.

Images:

t1c.gif, colormap, 80x40 pixels colormap
t1b.gif, bumpmap, 82x42 pixels bumpmap

Html code:

<APPLET code="BumpyExtreme.class" width="160" height="80">
<PARAM name="colormap" value="t1c.gif">
<PARAM name="bumpmap" value="t1b.gif">
</APPLET>

Example:



How to make a more complex bumpmap