Adaptive Backgrounds – A jQuery plugin for extracting dominant colors

http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/

by nsmalch • 13 years ago

176 36 13 years ago

briangonzalez.github.io

TallboyOne• 13 years ago

This is great and all .. but it doesn't work in the latest chrome?

fixel• 13 years ago

"Failed to load resource: the server responded with a status of 503 (Service Unavailable)"

Perhaps, a HN DoS?

rschmitty• 13 years ago

Appears to be working on latest Win Chrome

d0ugie• 13 years ago

the real question is, does it work with WebP?

Keyframe2• 13 years ago

I don't get it. Tried in several browsers and nothing happened.

krat0sprakhar• 13 years ago

It's supposed to change the background to the dominant color of the image as you keep scrolling further down.

Lauricio• 13 years ago

Try reloading several times, worked for me after few attempts on latest firefox, chrome and safari

Keyframe2• 13 years ago

thanks, it worked after several refreshes. I could've checked network panel in chrome to see what's up if I was smart enough.

It is actually quite cool, I tried similar thing (albeit a trivial approach) with css only: http://cssdesk.com/VYN67

Try changing image url in source to see different effect.

mistercow3• 13 years ago

Or maybe don't. You're hammering the servers of the poor folks at rawgithub.com, who specifically asked that their service not be used for heavy traffic situations.

K0nserv2• 13 years ago

It wasn't working for me and I got the following error "Uncaught IndexSizeError: Index or size was negative, or greater than the allowed value.". However it worked in incognito mode, I could reproduce the problem by enabling Disconnect in incognito mode. If you are having troubles try using incognito mode.

malandrew2• 13 years ago

Same here. Only worked in incognito mode. Pretty cool effect. It'd be nice if the effect were more subtle when the edge colors where the dominant color so that the image doesn't end up blending in too much with the background.

Any particular reason for the jQuery dependency? I can't see any good reason for tying this to jQuery, since I would expect it only to use jQuery for selecting a DOM element, which is more than easy enough to do without jQuery.

K0nserv2• 13 years ago

I think it has to do with jQuery becoming the dominant standard for everything web, that said it's not too much code so removing both the dependency on jQuery and the dependency on underscore should be fairly simple.

nchapman• 13 years ago

It seems like the problem with it not working very time is Github. I get a 503 on this URL every other time that I load it: http://rawgithub.com/briangonzalez/jquery.adaptive-backgroun...

mistercow3• 13 years ago

Rawgithub.com is not actually affiliated with GitHub. They also specifically say not to direct production traffic to their servers, or you'll run into problems.

The author of this seems not to have paid attention to that, which is particularly silly since the page is hosted on GitHub pages, and the assets can (and should) be hosted there as well.

briangonzalez2• 13 years ago

I was not anticipating on my little 3 hour jQuery plugin hitting the front page of HN, so I didn't take certain precautions. That's a good problem to have.

In any case, I've now moved the library to also be hosted on Github pages.

iamthepieman• 13 years ago

I haven't looked at the source in great detail yet so maybe you already have this feature.

It would be nice if you could specify an offset along the color wheel to select complimentary or analogous colors.

The default of selecting the dominant color removes all contrast between the image and the background which seems like a rarely desired behavior.

gprasanth• 13 years ago

This is one my favorite questions on StackOverflow: http://stackoverflow.com/q/13637892/1273830

prezjordan• 13 years ago

Beware when you host assets directly from your GitHub source tree. They limit requests - I had to refresh a few times.

Throw a copy of your javascript in the actual gh-pages branch.

wiresurfer• 13 years ago

Looking at the comments, and the HTTP 503 which i was getting, this seems to be the problem. Worked after a bunch of reloads.

ronaldx2• 13 years ago

Firstly, I like it. It's an elegant solution that gives excellent results and works as it says.

Secondly, I don't like it. In the general case, this is not something that should be left to the client to calculate - whenever you are serving the image, the server ought to know what the dominant colour is. Why make the client calculate this every time the image is displayed?

This is a case where JavaScript harms the user: a JavaScript/jQuery solution to this has significant potential problems: there are numerous cases where it will break, some of which are identified in the other comments.

trumbitta2• 13 years ago

Out of curiosity, could this work in node.js to avoid the server VS client thing?

city41• 13 years ago

Sure, node.js is a server backend just like any other in this use case.

nfriedly• 13 years ago

I think this script depends on the DOM, so you'd have to do jsdom or some other shenanagains to use it directly. However, the general idea should work just fine in node.js.

zabraxias2• 13 years ago

There are other use cases like suggesting a color palette based on an image upload before it ever gets sent to the server. Something like an admin interface for creating news article pages/blogs that orient around a particular theme.

I agree with the server handling of this if the server is providing the image but I could imagine HTML5 web apps making use of color analysis before the image ever gets sent to the server. JS isn't going away regardless of how much we close our eyes and pretend it's not there.

ronaldx2• 13 years ago

Yes, I agree there are potential sensible uses for this, but I hope that the given demonstration won't be taken as a sensible use.

I think we are in violent agreement ;)

sbochins• 13 years ago

A lot of these client side solutions make it easier to build quick and dirty websites. I have several ideas for how this plugin could be pretty useful on some throwaway sites.

coherentpony• 13 years ago

Just see some images. Not sure what I'm supposed to be looking at.

eliot_sykes• 13 years ago

RGBaster.js looks to be the underlying library used by the plugin to extract the colors, its written by the same developer (briangonzalez):

https://github.com/briangonzalez/rgbaster.js

leeoniya• 13 years ago

shameless plug for RqbQuant.js (my lib for color quantization) which can be used for the same purpose by changing the output palette size from 256 to 16 or whatever, try it here:

demo: http://o-0.me/RgbQuant/

repo: https://github.com/leeoniya/RgbQuant.js

chenster• 13 years ago

Clever. How does it actually extract the dominant color? What kind of mathematics involved in this kind of stuff? From an architect point of view, does it make sense to do this on the client side?

briangonzalez2• 13 years ago

The plugin uses the getImageData method on the Image object. It iterates over a portion of the pixels in an image, keeping track of color occurrences. It then returns the most dominant color and any other highly occurrent colors.

wittekm• 13 years ago

This looks fantastic. I don't think I'll ever find a good use for it, but I may shoehorn it into something anyways. It's really pretty!

deevus• 13 years ago

Like the example on the repo page, I think this could be really useful for images that are not the right size for its container.

Adaptive Backgrounds – A jQuery plugin for extracting dominant colors

Related Stories