Are you changing the code, or is it nondeterministic? I just reloaded and the last three pictures (cat, car, peacock) all had their vibrant color change.
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.
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.
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.
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.
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.
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."
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?
21 comments
[ 3.0 ms ] story [ 59.3 ms ] threadEdit: 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.
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.
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.
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
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.
You can also use the "quantize" module on npm to get prominent colours. Example: https://www.npmjs.com/package/get-rgba-palette
[1] http://stackoverflow.com/questions/13637892/how-does-the-alg...
[2] https://github.com/arcanis/colibri.js
http://www.jaredharkins.com/posts/palette.html
https://github.com/salkj/palette