I worked a little on visual noise yesterday. Noise is a little hard to appreciate when your not a programmer / artist (or maybe a little of both), but when you’ve tried a little to make good looking things on the screen, you see how important it is.
For those who don’t know what it’s good for – basically, when painting something on the screen, the initial instinct of a programmer is to choose a color and paint things with it. It’s the simplest option, both to design and to implement. The problem is, it looks bad. On a UI, it’s the backbone of the amateur looking UI that looks designed by programmers, and in in-game art looks very simple and unrealistic.
What I did until this week was use uniform noise. This is the simplest noise you can think of – just go through every pixel in the image, and add a random value to it’s red / green / blue components. This is what I did in Paddle Storm, for example. It isn’t great, but I think it does break the “computer generated” look, if you compare it with a completely smooth texture.
However, uniform noise still doesn’t look very realistic. The main reason is that real life objects, even if they have basically one color, have many imperfections, patches of dust, stains, many things that break the color and are not necessarily one pixel wide – they have darker areas and lighter areas, creating what appears to be several layers of noise – you can see big “patches” when looking from a distance, and as you get closer you see smaller and smaller patches. We want our noise to show that, but uniform noise creates a result that looks very… well, uniform.
There are several “multi-level” noise solutions these days, and the most common seems to be Perlin noise. I might try that in the future, but for now I went with a simpler algorithm that seems to produce very nice results – the midpoint displacement algorithm. For example, if I have a rectangle and want to paint it in a noisy red, here’s what I get:
You can definitely see several levels of noise here. And what does it look like in practice? Here are some isometric brick walls from a game I’m working on:
The left one has no noise. The next has uniform noise, and the others use the midpoint displacement noise, the first applies it to the saturation and the rightmost one to the brightness. I think that looks much better.