
JQuery noise generator - Rapp
https://github.com/DanielRapp/Noisy
======
jarin
Oh this is awesome. It's the last thing I need to completely eliminate images
from my website.

All the rest is cross-browser gradient and rounded corner code from
<http://css3please.com>, and I'm debating whether to vectorize the picture of
me via raphael.js or do an inline data-URL image in my CSS (it might be
considered cheating).

~~~
jarin
Oh, I guess jQuery-noise adds data-URLs to the elements on the page, so I
guess I don't have to feel bad about inlining my images :)

------
lwhi
Perlin noise[1] could be a nice addition.

[1] <http://en.wikipedia.org/wiki/Perlin_noise>

~~~
ohrite
I hacked up <http://github.com/ohrite/jquery-perlin> a while back.

edit: I had to go look at it. Now I want to go back and clean it up.

~~~
chrisbroadfoot
... and write a demo page :)

------
PHPAdam
Sorry, I dont get it. What am I looking at?

~~~
Rapp
Sorry, it might be a bit confusing if you're not used to github.

Here is an interactive demo: <http://rappdaniel.com/noisy/>

~~~
captaincrowbar
I don't get it either. Your demo link just leads to a page with some text
boxes on it. I tried it in Firefox and Safari and can't see anything that
looks "noisy". I tried changing some of the parameters but that just crashed
Firefox.

~~~
zone411
Increase the opacity and look at the background.

------
ronaldj
Why does everything have to be JQuery dependent these days?

~~~
Rapp
It could very easily be converted to any framework of your choosing, I
originally created it in pure javascript.

Do you have any requests for frameworks you'd like me to port it to?

~~~
ronaldj
Nope. I'd write it in plain vanilla JS. Frameworks are great, but sometimes I
think the world is too dependent on them.

~~~
zbanks
If you're doing this sort of manipulation, it's not like you can't afford the
extra cycles.

------
zbanks
I set up a jsperf to do some benchmarking:

<http://jsperf.com/noisy>

If you can help out by running the tests, it'll be great to compare browsers.

This isn't exactly the _perfect_ tool for the job, but it's close enough.

~~~
flat20
I moved this line out of the for loop which made it slightly faster:

var numPixels = options.intensity * Math.pow(options.size, 2);

<http://jsperf.com/noisy/2>

------
jcampbell1
FYI, it uses canvas. If canvas is not supported (IE < 9), then fallback image
is needed.

------
ianbishop
Ha, I'm surprised how simple the algorithm to generate random noise is. This
is really cool though its applications may not be too widespread. I find with
solid colours elements that slight noise can give it more of a body.

------
lwhi
I like the fact that this is jQuery - and that it could probably be used
dynamically with other effects.

.. _but_ I'm starting to think noise + block-color backgrounds are starting to
become a bit cliche.

~~~
huhtenberg
That's not what _cliché_ is.

Noise is there to make the design easier on the eye. It simply works better
than a solid fill in a lot of situations as it improves visual quality of the
design. It is more natural if you will, similarly to how rounded corners look
subjectively better than the straight ones. The noise was not extensively used
before because it does not compress well, and spending 20KB on a background
tile was just too much. Now it is lesser of an issue, so the noisy fill is
seeing a wider adoption.

In other words, if it were just a decoration for the sake of decoration, then
- yes, you would've been right, but since it carries a useful function, then
it is not a cliche.

~~~
lwhi
No, when something is overused, it actually does become a cliche.

Perhaps noise can improve the visual quality of a design when it's used
subtly.

However, I'm increasingly seeing it (over) used in a conspicuous way, and I
think it's become a trend. In some cases, I think there's an element of 'lets
jump on the bandwagon'.

Round corners definitely became a cliche.

EDIT: re. noise - see dribbble for proof.

~~~
jedsmith
Do you mean dribbble uses noise subtly or that it's contributing to the
overuse? Your point is a bit vague.

I would guess the former, because I think the noise really adds to their
presentation. It almost feels like I can rub the lettering on the paper.

~~~
arnorhs
I could be mistaken, but I think he means that if you browse through some of
the submitted designs on dribbble, you can see a clear trend of noise being
added into many designs these days. Not dribbble's design itself (although, it
_DOES_ use noise in its backgrounds)

------
potomak
This is what I needed just some days ago and this is why:
<http://www.thoundsday.com>

------
Sephr
Why are you using HTML5 range input for intensity and opacity but only a text
input instead of numeric for the size?

~~~
Rapp
Nice find, just changed it to numeric.

------
fizx
Any benchmarks?

~~~
systemtrigger
There is a little variation in how the noise renders across browsers. FF vs
Chrome vs Safari: <http://dl.dropbox.com/u/17455578/noise.png>

------
Herald_MJ
Why is this useful?

~~~
jjcm
Using noise is a way of adding another aspect of realism to objects. Normally
you can prepare images ahead of time and use those in your css to create this
effect, but for some procedurally generated things images can't always be
used. That's where something like this would come into play. While the use
case for this over precomputed images is quite small, it's nice nonetheless to
have.

Aside from sites styles though, it's also a fully functional noise
implementation - which could be ported to web based photo/graphics editors.

------
zaph0d
Interesting, we used an image to achieve the same effect on
<http://www.paisa.com/> \-- this works across all browsers.

