bumpTexture()

Sets a grayscale image that adds bumps and dents to a shape's surface.

A bump map is a height map: the brightness of the image at each point is read as how high the surface is there, and p5.js works out which way the surface tilts from how quickly that height changes. Bright areas rise and dark areas sink, so lights react to detail that isn't in the geometry.

bumpTexture() works like texture(), but sets the bump map instead of the base color. The parameter, tex, is the image to use. Passing null clears it, as in bumpTexture(null). The optional second parameter, scale, tunes how pronounced the bumps are. The map can also be scoped between push() and pop().

normalTexture() creates a similar effect from a tangent-space normal map, the blue-tinted kind that stores directions rather than height. A bump map is usually easier to make by hand, since it's just a grayscale picture of where the surface is high and low. Only one can be active at a time, so setting one replaces the other.

A light source is needed to see the effect.

Note: On a shape whose texture coordinates wrap all the way around, such as sphere(), the two edges of the image meet. The image has to tile for them to line up. Because a bump map is read by comparing neighbouring pixels, also call textureWrap(REPEAT) so those comparisons carry across the join instead of stopping at the edge.

Note: bumpTexture() can only be used in WebGL mode.