Previous

Index

Next

A couple of weeks ago Instagram wrote a blog post about taking an image that has been shredded into slices and rearranging the slices to reconstruct the original image.

I wrote up a solution in coffeescript that I'd like to share. It's quite effecitve and the implementation is fairly simple. We treat each edge of the shreds as a signal, we correlate them using the Pearson product-moment correlation coefficient, and then use a simple traveling salesman algorithm to find the best arrangement of shreds.

Rather than interweave a whole bunch of code and text in this post, I thought I'd try using Jashkenas' annotated source code tool called docco and see how that works.

• Here is the annotated solution. Note that there is also a utils file in there (click 'jump to').
• Here is the source code without so many comments: https://gist.github.com/1505619

And of course, here's a demo with five images to try.

Two quick disclaimers: I've only tested the demo in Chrome, and it may take a minute or two to run on slower comptuers.

Previous

Next