c.wind

background

Within physical prototyping, there are times when we have to integrate existing electronic components into our models. A highly effective method is to utilize 3D printing, as it allows for high resolution prototypes and quick iterations during the design process. From developing the form and CAD modeling to prepping for 3D printing, this project illustrated the various tools and techniques needed to create successful interactive prototypes.

skills & tools

team

Sketching

Iterative Modeling

3D Printing

Arduino

solo project - just me, myself, and I

purpose

duration

3 weeks

CS8803: Physical Prototyping for HCI (Fall 2019)

--- Before taking this physical prototyping course, I had little to no product design experience. This project taught me the importance of understanding the design process and how it can be incorporated in other areas of UX.

objective

Communicate design idea visually in 2D and 3D
Produce models using several rapid prototyping technologies
Incorporate existing electronic components (Circuit Playground Express) into digital and physical models
Evaluate intended interactions and functionality of design using physical models

idea

For this project, designs involved incorporating the Circuit Playground Express into digital and physical models. With being a newbie to Arduino technologies, I had no idea where to start. I scrolled through Adafruit’s Explore & learn page, hoping to find some inspiration and discover what types of interactions were possible. I found myself fascinated by the idea of using the Circuit Playground to play music, but I didn’t want users to simply press a button to play a song. I wondered, how can I design an innovative interaction that involves multiple components of this small 2-inch Arduino board?

Enter c.wind, a device that lights up in multiple colors and plays Colors of the Wind from the Disney movie Pocahontas. How does the user interact with it, you ask? Easy – you blow on it.

design process

Coding for Arduino

Developing the Form

Making the Digital Model

Making the Physical Model

coding for arduino

Rather than immediately sketching and creating a few simple models, I wanted to ensure that my idea could be translated into code. But there were some considerations I had to keep in mind.

Adafruit Circuit Playground Express
This small yet powerful Arduino board is packed with various built-in inputs and outputs including two push buttons, a switch, a microphone, a thermometer, a light sensor, touch pads, an accelerometer, LEDs (neopixels), and a speaker. Because these components were located on various parts of the board, I had to make sure that dimensions were accurate so the right ones were exposed. After considering my design idea and intended interaction, the following electrical components were incorporated:

Microphone/Sound Pressure Sensor. As the trigger point for sound, or more specifically, the sound of a user blowing on the device.
Buttons. Inputs for the device to help with manipulating lights and overall sound.
Speaker. Sound output.
LEDs. Visual output.

Images of Circuit Playground Express, courtesy of Adafruit.

The Code

The core logic of the device was coded using Adafruit’s MakeCode, a JavaScript code editor. Previously identified inputs and outputs (microphone, buttons, speaker, LEDs) were used to create the interaction.

However, I soon ran into an issue – Can I code each individual note in a way that actually sounds like the original song?

Luckily, other projects shared on Adafruit revealed that I could simply add the playTone library, or the collection of musical note frequencies. Each note had a different number to define its sound. I then found sheet music of Colors of the Wind online and used it as a guide to not only code the notes but also the tempo, or pace to which the notes are played.

developing the form

After getting the code to work, I started designing the housing for the board. The final form was ideated through sketches and iterative modeling.

Sketching
Sketches were drawn to brainstorm potential forms of the device. Ideas incorporated the general shape of the Circuit Playground Express and what design could follow the intent of the interaction.

Iterative Modeling

Sketch models were created from pink foam and cardboard to help visual the actual scale of the design. It also revealed how the board should fit into the form and indicated where openings needed to be made to expose any necessary components. Cylindrical shapes were difficult to make in pink foam, so I quickly moved on to using cardboard instead. There's less pink dust too.

making the digital model

The chosen design was then modeled in SolidWorks in order to prepare for 3D printing. Each individual part was then assembled virtually to see how they could fit together. During this stage, I thought to myself: Will parts snap or slide in place? Should I use friction fit to secure the larger parts of the housing? Do I need screws?

From left: Top view , Section view, Isometric view, and Exploaded view. Captured from Solidworks file.

The result? Let's have the parts snap together, use friction fit, and save screws for a different time.

making the physical model

First Print

What worked?

Successful friction fit between top, middle, and bottom shells
Circuit Playground Express fit well within the six notches
Size of the print matched the intent of the design
Holes for buttons and microphone lined up nicely
Cost of 3D print: $12.42
Time needed for print: ~ 2 hours

What didn't?

Pegs to hold board in place did not line with holes on actual board
Unable to attach middle to bottom shell after plugging in USB cable – hole was too small
Button A was too small and both buttons were too tall – needed to leave more clearance
Switch was too small and fell through the slot opening

Second Print

What changed?

Adjusted dimensions of the four pegs to align with actual board better
Increased the size of the opening to fit USB cable
Removed the switch – not needed because it wasn’t included in my code
Decreased the height of the buttons to add clearance
Combined the top and middle shells

Final Design

Parts for Assembly

2 buttons
Top housing
Bottom housing
USB cable
Circuit Playground Express
Portable Charger (or adapter for USB to plug into outlet)

Interested in seeing how it all comes together? Check out the video!

General Use

Sounds and lights activate when device detects a blow on its microphone.
When activated, lights flicker in white.
The chorus of “Colors of the Wind” from Disney movie Pocahontas plays while lights change colors.
To stop the music and turn off, press Left button. To turn back on, press Right button.

Features

6 notches, 4 pegs, and 1 support block for Circuit Playground Express
2 buttons - Left to stop music and turn off. Right to turn on.
Holes for lights
Opening to expose microphone
Friction fit to attach housing
Hole for USB port

next steps

Remove slot that used to be for switch. While I removed the modeled switch itself, I forgot to remove the opening for it.
Explore other shapes for edges of top shell. I opted to do two simple curves to mimic “wind,” but future designs could include even more curves or intricate cutouts.
Better speaker. To make sure sounds are clear and loud, an external speaker can be added.
Consider different methods to attach housing together. Rather than friction fit, I can add a dovetail to have the shells of the housing slide in place.

pains and gains - lessons learned from this project

Pains

Coding individual notes on an Arduino board can be tedious and time consuming.
Not all 3D printing jobs are created equal – depending on the printer and material, parts may not fit as expected even with the same dimensions.

Gains

I experienced the process of designing an interactive prototype from start to finish.
I learned how to model existing electronic components and upload code onto an Arduino board.
I learned about the importance of iterative designs and how it plays a role in improve the user experience of a product.
I learned how to design a physical form that optimizes materials in order to minimize cost and time.