IMPORTANT: After the app loads, click it before using the keyboard. Note, you may have to click twice to give it focus.

Source code: unshred LeftEdge Menu Message RightEdge Segment SourceImage Title

Built with Processing

Instagram Engineering Challenge: The Unshredder

Instagram recently released a challenge similar to DARPA's Shredder Challenge... create an algorithm that reconstructs a "shredded" photograph into its original form. You can view my solution and source code above.

You can download the project and try your own shredded images.

The city image was provided by Instagram for the challenge. I also provided some extra images to demonstrate how I auto-detected the width of the image strips.

I chose to use Processing because I could visually work out my approach which was...generally... find the left-most strip... then recursively work out which strips best matched the right edge of that strip using the average RGB value of their left edge.

Here it is in detail.

Bonus - find the strip interval:

  1. Iterate over every column of pixels, create an Object representing the column, determine an average RGB value for the column and assign it as a property.
  2. Compare each column's RGB value to the column to its left and save the difference as a property.
  3. Sort the columns by the difference.
  4. Do some crazy shit to find a list of the lowest common multipliers between the position of the last two columns. The lowest value in this list that represents a strip edge is the strip width.

Now that we have the strip width:

  1. Iterate over the strips and create Objects representing the strips in an ArrayList.
  2. Iterate over the strips left and right edges and assign the average RGB value as properties.
  3. Find the left-most strip by finding the left edge with the largest difference in average RGB value from all the right edges.
  4. Start placing strips by finding the left edges that most closely match the average RGB value of the right edge of the last strip placed... gasp...