Introducing Cryptstagram

[This is the long version of a post I wrote for The Barbarian Group’s tumblr.  We also got written up in Wired’s design blog, Laughing Squid, and PSFK, my first time getting such large coverage!]

Periodically at The Barbarian Group, a small team of new employees and veterans with varying skill-sets are brought together to work on Project Popcorn, a side project that embodies the inventiveness, technical skills, and values of the agency.

Within my first week as a developer for the agency, I was assigned to Project Popcorn, along with a senior art director, a senior copywriter, a creative director, and a technical director.

Cryptstagram is the resultant product of our teamwork. Cryptstagram is a web site that lets you steganographically encrypt a hidden message into any image, unlockable only with a specific password, and then apply glitchy Instagram-like filters to that image.

The National Security Agency whistleblowing story had just broken, and as a result we quickly became fixated on doing something involving cryptography and, to fulfill our artistic ambitions, on doing something involving the glitch aesthetic.

Cryptstagram-5

The glitch aesthetic is popular amongst our creatives and developers because it requires technical knowledge of formats and methods underpinning systems in order to then manipulate, pixel-push, and distort those systems towards the artist’s ambitions.

As a team we spent a lot of time discussing what tone we wanted to convey with Cryptstagram. How secure should it be end-to-end to pay respect to citizens’ cryptographic requirements and expectations of privacy? Should Cryptstagram’s filters create aesthetically-pleasing images or should they reflect entropy of input and interaction from the user? To what degree did we want Cryptstagram to be a statement about the NSA and privacy in general or just a reaction to the state of our relationship with technology?

In the end we decided on a reflective tone for Cryptstagram, emphasizing a common public desire to share stylized parts of ourselves in public but other parts of ourselves in private or semi-private. We should empower ourselves with stealth and style.

Cryptstagram-2

Cryptstagram-4

The Project Popcorn team also wanted to keep Cryptstagram open-ended, taking advantage of the fact that JavaScript is pervasive in users’ browsers and that most computation, SHA-1 encryption and decryption, and glitching can now be done with open source libraries, entirely on the client’s side, and using HTML5 Canvas. A JavaScript stack (Node.js/Express, MongoDB, and good ol’ jQuery) cached and served up via cloud services allows for rapid app development and easy deployment for a small creative team.

So, easily, a citizen could choose to encrypt her image with a message and save it without it ever touching an external server, then send that image via private means to intended recipients with a password that could be distributed in any number of ways. Or the citizen could share the image on Cryptstagram’s wall for others to see and even try to decrypt!

A perk of this open-ended design is that we can extend its utility: we (or you, via jsfiddle sandbox!) can add seasonally- or topically- themed filters for specific clients, a celebrity can release images with a password known only to fans, or people can use the Cryptstagram wall to create puzzles or scavenger hunts or just post encrypted messages publicly without drawing suspicion.

At The Barbarian Group, we’re invested in making things that are gonna be awesome, and in order to do so, we need to be just as able to wade through the technical limitations of CORS and CSRF as to create something people love to use and share online.

So, what creative uses can you come up with for Cryptstagram?

Glitch: The Flip-Flop Technique

For our final Glitch class, our assignment was to employ the flip-flop technique, as described by Robin Sloan.  Technically, our job was to glitch something by flipping it between the analog and digital x times, or as Sloan says, “the process of pushing a work of art or craft from the physical world to the digital world and back again—maybe more than once”.

I decided to make a puzzle of it, to see if my idea would work.  First I had to put a file online, shorten it via bit.ly (to reduce encoding complexity in the QR code), and then generate a QR code for it.  Here’s the summation of that:

In order to do my flip-flop, one would need to graph out the x,y grid coordinates from a txt file onto graph paper. (ANALOG) Check out the text file here.  0,0 is the top-left of the 25×25 grid.

You can see it’s a 25×25 grid.  Once you draw out the pixel coordinates, you’ll get what appears to be a QR code.  Here’s my work, partially through it:

I wasn’t sure if this part would work, though in theory it should have.  When I first filled in the QR code on my graphing paper, neither Google Goggles nor QR Droid could detect the QR code.  Google Goggles found the closest match to be photo images of bathroom tile patterns.

Then, figuring my drawn QR code wasn’t precise enough, or perhaps dark enough, I erased my axis labels and filled in the square pixels with a black pen.  To my amazement, the QR code then worked in QR Droid! (DIGITAL)

I was surprised that it could pick up the code, because I started getting sloppy while filling in the squares, figuring I could just use the final product as some artistic hand-drawn rendering of a QR code.  Apparently though, QR codes, depending on encoding, can handle quite a lot of error, and correct for it.  Here’s some information about how its error correction works (thanks Neil).

One interesting project handling data error and error correction was our professor Kyle McDonald’s Future Fragments project, where he had other classmates encode messages into colored grid squares, then keep the printouts in their wallets for a summer, then decoding the blocks back into a message after the pieces of paper had been worn down a bit.

The QR code takes you to a bit.ly link, which forwards you to an image on my site, a reproduction of Caravaggio’s The Card Sharps, one of my favorite paintings. (DIGITAL)

 

The next task would then be to hand-draw the painting. (ANALOG)

Then you take a photo of it to auto-save to Google+ or upload to the cloud. (DIGITAL)

Then the final task would be to color in the drawing using Photoshop or another digital tool. (DIGITAL)

Here was my final product:

As a final test, I thought I’d see if I could run the drawings through glassgiant.com’s ASCII converter.  The results for my drawing were not too good, probably mainly because I did not make bold enough lines and outlines to make the ASCII conversion stark enough.  I also ASCII’d up the QR code (ink) and the original Caravaggio. (DIGITAL)

Note: along the way, I found this awesome site that has a QR code stencil generator, for making stencils in hobo code!

Anyway, that concludes my work for Glitch class.  Thank you Kyle McDonald and Jeremiah Johnson!  This ITP class was fucking kickass.

ITP Puzzles

So at ITP, it all started when Michael Colombo posted an email to the list about an as-yet unsolved puzzle that he left up on his locker.  He had a cardboard cutout taped to the door of his locker.  Here is a similar image of it from the web:

This led me to start posting my own puzzles on my locker.  Can you figure them out?  There are two on this photo (don’t count the “READING IS SEXY” sticker):

And the most recent one here:

Email me if you think you solved any of them.