Pixel Palette is a tangible interactive paint palette that allows users to choose and mix colors and apply them to the word DESIGN. They can create all colors, add tints and shades, and play with numerous combinations. It is simultaneously delightful and educational. It is about what it feels like to find the right color in a design; it is about the malleability of color and paint, and it is a toy. The project was a playful exploration of kinetic typography, color theory, Processing, microcontrollers, and building a physical working prototype.

Carnegie Mellon University | Instructors: Austin Lee + Dan Boyarski | Prototyping for Interaction Design | Timeline: 6 weeks

My Role

Concept Exploration | Coding in Processing | Physical and Digital Prototyping | Concept Development | Video Editing

The Concept

Ideation

Early Concepts

I knew I wanted my concept to relate to design in some educational way, rather than make an interaction for the sake of it, so I began with an idea for a museum exhibition with projections about different designers that corresponded to each of the letters in design. I wanted the interaction to be large and physical, and originally planned to use pressure sensors on the floor.

A Pivot

When brainstorming concepts, I did not yet know what was possible with the technology because we were still exploring how to do things. When I was exposed to a MakeyMakey and poteniometer, I saw more potential for play. I also thought incorporating something with true choices and children would be an interesting direction to explore. I envisioned something where children could explore the weight and size of a typeface with a scale, a potentiometer, and several animations. I also knew a MakeyMakey worked well with play-doh, and considered what it might be like to touch play-doh to mix colors.

The Final Concept

After playing with mixing play doh, weight, and a museum exhibition, I knew I needed to narrow my focus a bit more. Color choice and color theory was my favorite option because it was a relatively simple concept to teach through an interaction. One of the problems with the previous concept was that the play-doh blobs did not mean anything. There is no mental model for blobs of play-doh and mixing colors. I decided to create a very literal control to map to a more established mental model: a paint palette.

Creating a Working Prototype

In order to create every color, I would need 25 separate outputs. I knew I could use a MakeyMakey to trigger animations, but that many animations use far too much processing power. I would also need to be able to code several keys together in order to get the colors to mix. I decided that doing everything in Processing would be the simplest route, but I didn't know how to code.

MVP and Enlisting Help

After watching tutorials from Daniel Schiffman and struggling a great deal, I enlisted the help of Ken Barry, a computer scientist, to help tutor me in Processing. With his help, I moved step-wise through the process.

Once I figured out how to make multiple keys work to mix colors, I hooked up the MakeyMakey and play doh to the keyboard to test the concept. I then needed to refine the design of the word design, add motion, and then create the control.

Creating a Working Control

I created a template in illustrator to laser cut layers out of acrylic and plywood to easily glue together to create a box that would hide the MakeyMakey inside. I had to consider how the layers would fit together, where the leads would go, and how large the box had to be to accommodate the height of the MakeyMakey.

I also played with the size of the palette to decide whether it should be a box played like an instrument or something held like an actual paint palette.

An Affordance for Closing the Circuit

A MakeyMakey requires the user to hold the ground in order to become part of the circuit. Because I wanted a more elegant solution than an alligator clip coming out of the box that must be awkwardly held, I experimented with soldering a ring the user could wear as well as making the box smaller to create affordances more naturally. 

A Copper Lining

I finally landed on lining the inside of the finger hole with copper conductive tape and soldering a lead to it. While this affordance wasn't the most intuitive, the existence of the finger hole in the first place nods to a real paint palette affordance which maps accurately to our mental model of how a paint palette is used. Now the user could put her thumb inside the whole and "play" with the colors like an instrument.

Looking to the Future

While I'm satisfied with how the interaction turned out - the moistness of the play-doh under your fingers is reminiscent of paint, the color changes are very responsive, the gradient on the word design is pleasing, the style is playful and appropriate, it is delightful - I would like to see this eventually be pushed further perhaps without using typography. I envision more colors for adults or an application where colors could be chosen tangibly on a picture rather than the word design. The options are endless.