Vibrant.js: Extract prominent colors from an image(jariz.github.io)
jariz.github.io
Vibrant.js: Extract prominent colors from an image
https://jariz.github.io/vibrant.js/
21 comments
Interesting, you're right! For me, the image of the bird (4th one) shows the most variation. The cat changes a bit too; the others seems relatively stable.
At first I thought it would be the same, since the percentage of each color should be roughly equivalent; but then again, the images themselves are being resampled on resize, so there may be individual pixel colors in one size image that aren't in another.
Still, though, the point of a proper resampling algorithm is to maintain the same general perceived appearance of the image at different sizes; assuming it is doing this well, you should expect to see the same dominant colors.
Of course, the algorithm also might just be sampling every nth pixel, which would mean a different sample group depending on the size.
At first I thought it would be the same, since the percentage of each color should be roughly equivalent; but then again, the images themselves are being resampled on resize, so there may be individual pixel colors in one size image that aren't in another.
Still, though, the point of a proper resampling algorithm is to maintain the same general perceived appearance of the image at different sizes; assuming it is doing this well, you should expect to see the same dominant colors.
Of course, the algorithm also might just be sampling every nth pixel, which would mean a different sample group depending on the size.
Looking at every pixel of the image is quite slow (especially if you need to process multiple images, and more so when you're dealing with old devices, such as iPad 2). Resizing them is often "good enough" for the majority of use cases.
Neat! This reminds me of my fiancée's project:
http://steamy-screenshots.herokuapp.com/
https://github.com/moneypenny/steamy-screenshots
You can specify a steam username or game title and it will pull in screenshots and use the extracted colors to style the page.
I think she used a port of Panic's iTunes album art color algorithm. I am not sure if she had heard of Vibrant.js or not.
http://steamy-screenshots.herokuapp.com/
https://github.com/moneypenny/steamy-screenshots
You can specify a steam username or game title and it will pull in screenshots and use the extracted colors to style the page.
I think she used a port of Panic's iTunes album art color algorithm. I am not sure if she had heard of Vibrant.js or not.
Reminds me of something similar I have done for a "machine vision" course using OpenCV (C++).[1]
The basic idea is to get the histogram and check for dominant colors.
(There are other implemented features as well, like texture, if you're interested)
[1]https://github.com/RaedsLab/Comparify
The basic idea is to get the histogram and check for dominant colors.
(There are other implemented features as well, like texture, if you're interested)
[1]https://github.com/RaedsLab/Comparify
I made it too based on a StackOverflow answer a few years ago, but this one is probably much better (I hadn't even put a package.json at the time). However, the SO thread is really interesting, I suggest you give it a look if you're interested in how to solve this issue.
[1] http://stackoverflow.com/questions/13637892/how-does-the-alg...
[2] https://github.com/arcanis/colibri.js
[1] http://stackoverflow.com/questions/13637892/how-does-the-alg...
[2] https://github.com/arcanis/colibri.js
Great! Reminds me of color thief: http://lokeshdhakar.com/projects/color-thief/
Color thief is actually credited in the vibrant.js source: https://github.com/jariz/vibrant.js/blob/master/src/Vibrant....
I just started a similar project a couple weeks ago. After getting the prominent colors, recoloring the original image makes a pretty neat effect.
http://www.jaredharkins.com/posts/palette.html
http://www.jaredharkins.com/posts/palette.html
I tackled the same problem. In fact, I utilized the same strategy you did. It is essentially the same, but allows for the user to input a gif and receive a reconstructed gif using only its "palette."
https://github.com/salkj/palette
https://github.com/salkj/palette
In the old days of NTSC video, we did this with a vectorscope:
https://en.wikipedia.org/wiki/Vectorscope#Video
What is the use cases for these palettes? I got this nice color palette, but have no idea what to do with it ...
The most prominent implementation is the album view of iTunes on the desktop: http://stackoverflow.com/questions/13637892/how-does-the-alg...
Probably helps to make website designs more dynamic for sites where images are the focus.
How about the inverse: given a palette and a set of images, return only the images that "match" the palette.
Could be useful for web design. The other way around often does not work, because once you are stuck on a palette you need to find images that match it.
Could be useful for web design. The other way around often does not work, because once you are stuck on a palette you need to find images that match it.
Here's a tineye project that does that with flickr photos: http://labs.tineye.com/multicolr/
I don't think this is as useful for web design as it is for, say, dynamically changing the background color based on the image displayed.
Pretty cool. Interestingly, it seems to me like it's getting the vibrant colors just slightly off. Like the red from the dress should be brighter, and the yellow from the car should be a bright yellow instead of a mustard color. Is my brain just perceiving that the text on the car is bright yellow, while the actual color in the image is much darker?
Cool.
You can also use the "quantize" module on npm to get prominent colours. Example: https://www.npmjs.com/package/get-rgba-palette
You can also use the "quantize" module on npm to get prominent colours. Example: https://www.npmjs.com/package/get-rgba-palette
This is great! definitely going to use this in the future.
Is there a js library for organising an array of colour swatches by hue (or other values)?
Edit: Interestingly, it looks like it may sample the image at its visible size and not the full source image. If I resize my browser, triggering various media queries and thus image sizes, the dominant colors change after reloading.