Tiny Planet Pro

Already tired of reading? Jump straight to the app and start playing around!

If you’ve ever captured a photo sphere with the camera on your Android phone, then you may already know that there’s a cool little features that lets you turn your 360-degree panorama into a “Tiny Planet”. Here are a couple of examples of my own photo spheres and the Tiny Planet images that I made from them:

corona_heights castro_night

TINYPLANET_PANO_20150203_151512

TINYPLANET_PANO_20150126_210134

I’m a big fan of this feature. Photo spheres are a cool data set that can let you do things like navigate the scene in 3D with Google Cardboard. But most of the time, it’s nice if we can compact all that data into an artistic and meaningful 2D representation.

Unfortunately, I felt that the results left something to be desired. In the daytime image, taken at Corona Heights in San Francisco, I’d like the thin strip of buildings to have more prominence. And in the nighttime image, taken in front of the Twin Peaks Bar, I’d like to reshape the building so that it doesn’t look so awkward. To address some of these limitations, I decided to make my own Tiny Planet Pro Web app.

Even though photo spheres represent data in 3 dimensions, it’s fairly straightforward to do all of our calculations in 2 dimensions. A tiny planet image is, at its core, just a polar plot of the photo sphere data.

transform_simple

But when we do all of our math in 2D, it doesn’t give us a good way to change the center of our polar projection system. For Tiny Planet Pro, I transform the data into an immediate 3D coordinate system where each point in the input or output images corresponds to a 3D unit vector within a sphere. The handy thing about this is that it’s really easy to transform this space with a 3×3 matrix, allowing us to use any point in the input image as the center of projection in the output image.

transform_complex

The other feature I added was a dynamic graph that lets you precisely control how data gets squished or stretched when it’s mapped to the latitude dimension. It takes some practice to fully understand how this works. To help, I made each point on the graph a different color and, when your mouse is over the graph, I display concentric circles in the corresponding color to represent that latitude in the output image.

Finally, I threw in a rotation control, a zoom control, a “repeat” control that lets us achieve some crazy artistic effects, and finally I let the user click the output image to move the center to a different point.

The result? Some really interesting art if I do say so myself.

output01 output02 output05 output03
castro01 castro02 castro03 castro04

Why not give it a try?