I saw this picture online and wanted to see if I could create an algorithm to give ordinary images an effect like this:
http://justinlivi.net/wp-content/uploads/2011/01/Living_In_Digital.jpg
My idea was to take the input image and first find the largest area of pixels that are within a predefined threshold of similarity (basically are of similar value). Then I take those pixels and form a square containing all of them. After doing that until most of the image is covered in squares, (no overlapping squares) I plan to color the squares based on their values (so that lighter values might be colored white, midtones green, and dark shades purple.
My problem is that I can’t find an algorithm to group pixels with similar values. It’d be nice if someone could point me in the right direction or if someone has some comments on my algorithm idea that’s fine too.
As a side note, I’m going to make this completely in javascript so whatever method you suggest should preferably be fast and shouldn’t require server side code (for example no storing of data for genetic algorithm training)
Thanks in advance!
One of the simplest ways to compare color values is to divide a pixel into its color components, then treat those color components as elements defining a point in space, then compare the distance between the various points in space. You can use RGB, HSV, etc as your color components.