Thursday, February 24, 2011

Generating leather procedurally

Subdued textures are all the rage now in app visual design. I've been making mockups for a simple financial app. To indicate wealth, I figured a leather texture would be suitable. Leather is expensive, and also associated with money because of wallets. Not having much luck in making good use of any leather textures in my screen design, I started getting interested in the material itself.

What would it take to generate it with code? So there are some kind of cells in there, competing against each other for growth space. What would the algorithm be like for this? First come up with "birth points" for the cells. Here's my initial javascript simulation of it. Pick a random point. If no cell nearby, put one there until no more space is left. After the positions have been picked, adding a bit of randomness can lead to more interesting shapes later.

Each cell controls all the pixels nearest to it.

To emphasize the borders, for each pixel I checked about a hundred random nearby pixels and saw how much competition there was around that area. The more competition the darker the pixel. Unintentionally I got subpixel-accuracy rendering too, since this is a stochastic sampling method. The result is a greyscale picture I can use as a height map for the cells.

procedural leather heightmap

Next I opened the javascript-generated height map in Gimp. To make the top of the cells rounded, I made a copy of the depth map and did a gaussian blur on it, then grain extracted it from the height map. I used emboss and a gradient to shine a light on it, then adjusted the hue / saturation / lightness to get it to appear more leather colored.

leather texture

That's my version of leather. While researching about this, I came across an interesting Wikipedia entry on how leather was tanned in ancient times (it involves urine, feces and brains). I also ran across a cool article about how this cell-style procedure can be used for procedural computer game map generation.