Fragmented Memories

For 2016, I’ve decided to revamp my website on a monthly(-ish) basis to try out some new technology or flex my design muscles. This is a retrospective on the background of March’s piece.

Inspiration

Memory is a funny thing. When we think about our past, it’s tempting to think that we have this perfect recollection of an event. In reality, it’s very easy for our memories to be skewed and fragmented.

In The Invisible Gorilla by Christopher Chabris and Daniel Simons, the authors argue that even in the process of making a memory, we’re limited by our observations. Watch this video that was a part of the authors’ original research.

I remember seeing this video in a intro-level psych class in college* and being blown away by it. I didn’t catch the gorilla the first time, and it drove me crazy that I could miss something so odd.

This month’s piece is a tribute to the sometimes unreliability of our memory. Try as we might, we never get all the details exactly right, but that doesn’t mean that we can’t find something meaningful or useful in the process.

*…maybe. Memory is a tricky thing, remember? :-)

Implementation

This month’s version of brandonmorrison.com wouldn’t have been possible without Mike Bostock’s seminal blog post, “Visualizing Algorithms.” In it, Bostock describes the value of teaching algorithms, which can be hard to conceptualize what’s actually happening, visually. By actually watching how an algorithm chews through data, you can deepen a person’s understanding of the actual mechanisms in place.

In the article, Bostock describes various image sampling algorithms and shows how they work against a copy of van Gogh’s “Starry Night.”

I really liked the visualization that Bostock created for the Poisson-Disc sampling algorithm, which works by creating a ring around pre-selected points, dropping a point in randomly, and seeing if it’s too close to other points before adding it to the general queue. The way that it grows is very organic, and the display itself is quite beautiful.

In Bostock’s examples, he uses the points generated by the sampling algorithms to create a colorized Voronoi diagram, with each cell’s color chosen from the sample image. While that creates a nice mosaic pattern, I wanted something that looks simpler, which lead me to Delaunay triangles, which can be easily generated from the same sample set.

Once I had the basic sampling strategy down, I needed to find actual images to sample. To go with the travel theme, I chose to pull from Flickr’s API, grabbing interesting photos with a “travel” label. Why travel? I thought travel photos were going to trend towards contrast-y, outdoor photos, which should hold up well to the loss of detail in the image processing.

Fun side note, at some point between the last time I did anything with the Flickr API and now, they finally set up CORS support, which made this implementation 5% more awesome, since I didn’t have to do any JSONP hackiness.

If you want to see non-travel Flickr photos processed, you can add the Flickr id to the hash. For example, here’s a recent photo I took in Georgetown. Use this power for good…

Link: http://www.brandonmorrison.com/experiments/mar-16/


Hey, before you go, are you signed up for my newsletter, "All Tests Pass?" It's a weekly Javascript puzzle that will help you sharpen your debugging skills. If you haven't already, sign up now.