3
$\begingroup$

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 ?

$\endgroup$
4
  • 1
    $\begingroup$ Perhaps working in HSV space would give results more like in the image? $\endgroup$ Commented Feb 4, 2019 at 4:44
  • $\begingroup$ 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? $\endgroup$
    – Anvaka
    Commented Feb 4, 2019 at 5:28
  • $\begingroup$ What does this have to do with a gradient? $\endgroup$
    – bernie
    Commented Feb 4, 2019 at 8:52
  • $\begingroup$ 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. $\endgroup$
    – mdkdy
    Commented Feb 4, 2019 at 11:56

1 Answer 1

4
$\begingroup$

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.

$\endgroup$
3
  • $\begingroup$ Thanks, looks like adding the same value to each channel worked: i.imgur.com/1OydskY.png $\endgroup$
    – Anvaka
    Commented Feb 4, 2019 at 16:52
  • $\begingroup$ Out of curiosity, how did you determine that it was luminance noise? $\endgroup$ Commented Feb 6, 2019 at 3:11
  • $\begingroup$ @JulienGuertault Just look at it. $\endgroup$
    – Dan Hulme
    Commented Feb 6, 2019 at 8:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.