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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.