3

I found this picture

picture

When you zoom in to any part of the image, the background looks a bit noisy/grainy. See pixels around "violent violet" label:

grains

I'm trying to understand how to achieve the same effect programmatically?

I was trying to change pixel color in rgb space by adding tiny gaussian offset, but it still doesn't look nearly as natural as in the image above:

failed attempts

I feel like I'm missing something very simple, but I don't even know where to start? How is this done in general?

Maybe you can play with this jsbin to show me how this is done: https://jsbin.com/fatecojolo/edit?js,output ?

Anvaka
  • 213
  • 1
  • 6
  • 1
    Perhaps working in HSV space would give results more like in the image? – user1118321 Feb 04 '19 at 04:44
  • I tried with HSL without much luck, but I might have missed something. The linked jsbin has the functions to transform to/from hsl space. What should I try? – Anvaka Feb 04 '19 at 05:28
  • What does this have to do with a gradient? – bernie Feb 04 '19 at 08:52
  • It is just some white or blue noise remapped to some narrow range added to color probably. Same value added to all rgb components gives first picture result. – mdkdy Feb 04 '19 at 11:56

1 Answers1

4

It's generally a good idea to add noise like this when you're using a gradient, to avoid visible banding in the gradient, especially on smartphones. Often smartphone screens claim to be 24-bit colour but the panel itself is actually only 16 or 20 bit.

The chief difference between the example and your attempt to reproduce it is that your noise is in RGB space, while the example only adds luminance noise (i.e. brightness). You could achieve this by using HSV colours and only adding to the V channel, or with RGB colours and adding the same amount to each channel.

Dan Hulme
  • 6,780
  • 1
  • 16
  • 35