JQuery noise generator

https://github.com/DanielRapp/Noisy

by Rapp • 15 years ago

99 39 15 years ago

github.com

PHPAdam• 15 years ago

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

Rapp3• 15 years ago

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

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

captaincrowbar• 15 years ago

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.

maw• 15 years ago

It wasn't github. It was the fact that, at first blush, Noisy seemed to fail the actually-does-something test.

It turned out not to be so, but it did take me a lot of control wiggling to figure out what was going on.

lwhi7• 15 years ago

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• 15 years ago

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.

lwhi7• 15 years ago

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.

dhotson• 15 years ago

Also, a bit of noise helps reduce banding in gradients.

Actually, in Firefox if you use a CSS gradient (ie -moz-linear-gradient) and look carefully.. you'll notice Firefox automatically adds noise/dithering to make it look smoother.

Tyrant505• 15 years ago

Cliche, trend, or progress?

lwhi7• 15 years ago

A trend quickly progressing towards becoming a cliche :)

RyanMcGreal• 15 years ago

I think what's happening is that browser technology is finally catching up with typographic best practices. That's not to say there aren't design trends that turn into cliches, or that practices applied naively don't look clumsy; but this seems more to me like a small but important step on the road to a mature web design codex.

fizx• 15 years ago

Any benchmarks?

systemtrigger• 15 years ago

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

ianbishop• 15 years ago

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.

jcampbell1• 15 years ago

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

lwhi7• 15 years ago

Perlin noise[1] could be a nice addition.

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

ohrite• 15 years ago

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.

lwhi7• 15 years ago

Nice.

chrisbroadfoot• 15 years ago

... and write a demo page :)

ronaldj2• 15 years ago

Why does everything have to be JQuery dependent these days?

Rapp3• 15 years ago

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?

ronaldj2• 15 years ago

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

Sephr• 15 years ago

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

Rapp3• 15 years ago

Nice find, just changed it to numeric.

jarin2• 15 years ago

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).

jarin2• 15 years ago

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 :)

zbanks2• 15 years ago

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• 15 years ago

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

potomak• 15 years ago

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

zaph0d• 15 years ago

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

Herald_MJ• 15 years ago

Why is this useful?

jjcm• 15 years ago

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.

JQuery noise generator

Related Stories