Self initiated project, 2014
Draw me a letter
A program that creates a map of the hidden gestures resulting from typing on a computer keyboard.
Tracing hidden gestures
I wanted to create a tool that explores an alternative way to document text typed on the computer. I tried to focus on the visual trace that results from our typing on the keyboard and see if any patterns evolve.
One aspect I especially love about this project is the way it tracks my mistakes when I type — unlike most digital writing tools. Anytime I hit the backspace, a line is drawn and added to the encrypted image, similar to when I write by hand.
After I developed the basic idea of what I wanted to build, I started to think about its design and how users might approach it. I sketched out a few ideas and came up with a simple interface that puts the user's visual unput at the center.
It was quick, and I didn't have much time to iterate or research, and I couldn’t really predict what the traces will look like. But as I was working and thinking about it, I realized it could be really cool if I added a feature that will allow my users to download and save their text-drawing. Another functionality I wanted to add was to allow users to view their input in text-form.
Mapping the keyboard
I had to proportionately map out all the keyboard keys in order for the tracking to be accurate. So I created coordinates for every key based on it placement on the keyboard, and later referenced these points in a function that draws lines between two points. This way I was able to update the last typed key as the place to which the line will continue.
Cover / discover your letter: Lets users discover or hide their text-input. Clear text: Lets users clear the screen and their inputted text to start afresh. Download your letter: This function translates the marks created with SVG lines to a downloadable png. Gradient progression: With every key pressed, the line’s hex value progresses and gradually shifts the color of the drawing. This feature is a time indicator, allowing readers to try to decrypt the image and figure out which words were typed.
A visual diary
I wanted to have some fun with my new tool, so I collected my visual diary entries and created a little book showing the texts next to their encrypted images. For the cover I printed a keyboard-jacket printed on silver paper that can be unfolded and used to try to decrypt the messages.