Experiments in Code


I've been learning p5.js, Processing, and HTML/CSS to gain some exposure for prototyping and to understand more of what's technologically possible.


  • Pale Blue Dot. Interaction Design Lab, Fall 2016, six weeks
  • Data Visualization. Communication Design Studio, Fall 2016, six weeks
  • Control. Introduction to Interaction Design, Spring 2016, four weeks

Pale Blue Dot

Inspired by a passage in Carl Sagan’s book Pale Blue Dot, which refers to a photo taken of Earth from outer space, we created a speech-responsive program to help users visualize the preciousness of our planet by creating a network of nodes that represent the web of life here on Earth. We analyzed the passage for words that we felt embodied the meaning and emotion in Sagan's writing and divided them into four categories. When a word from any of these categories is spoken, the visualization acts according to that word's category. At the end of the experience, we hope the user can use this metaphoric interaction to approximate the Earth’s fragility, our role in sustainability, and visualize it in concrete time. Try the code yourself or watch the documentation video below.


Data Visualization

For this project, Monique Smith and I collected data from the Organization for Economic Co-Operation and Development (OECD) around a central question of how we spend our time affects our life satisfaction. The information I used for my visualization project spanned 21 countries over five categories of time usage: paid work or study, personal care, leisure time, unpaid work, and care for others. We also were able to filter that information by gender, which turned out to be quite interesting. I designed a low-fidelity experience that begins by asking the user how satisfied they are with their life and explaining a bit about the life satisfaction measurement. It then asks users to think about how they use their own time, with comparisons available to each of the 21 countries' data. Try the code yourself.


Control

Designing a control for a new security system allowed me to get into the details of the specific affordances and feedback of this interaction. I prototyped the look and feel of this control in Processing for iOS. The grid provides a framework for where your fingerprints should go, and the code allows the user to receive visual feedback that the fingerprints have been recognized. The prints quickly fade away to prevent anyone else from learning your print pattern. Unfortunately, Processing cannot be embedded in a browser.