Music Box?


[TIW] Music Box? from Ada Zhao on Vimeo.

Music Box? is a box but it doesn’t play any music. Instead, it controls how the music is played on your laptop with static states and actions.


Whenever the box is put on the table, the face facing up indicates the current state of the music. For example, the first photo shows that the music state is stop. The four states are play, speed up, stop and pause in order so that play is next to speed up and pause while oppose to stop. If the user want to skip a state, for example, stop the music directly while it is playing, he just needs to turn the box really fast because it takes half a second for the device to operate.

Skip back and skip ahead are two actions that can be achieved by lifting right or left side of the device. The pyramid-shape decorations on the side form two arrows pointing left or right on the side view that match the skip back and ahead actions.

Turning the Music Box? around for 360 degree to play a random song. I thought about the action for a long time in order to decide on one action that fits the feeling of randomness. I feel like turning around can be something interesting since you can never make two exactly the same turnings.

Circuit Diagram




Compared with the beginning of this class, I enjoy making enclosures much more now!

Assembling process:


Problems on the way

  1. Calibration: the default value is getting smaller because of the decreasing of battery power
  2. Serial Communication: Arduino Pro Micro uses USB communication so if I need to use Serial communication, I need to write Serial1 instead of Serial
  3. analogReference(EXTERNAL): connect accelerometer with REFE pin in Arduino to give it a voltage reference

Source Code

available on Github


Calibration code is credit to Adafruit

Future Implementation

add calibration procedure to the device. Make the threshold proportional to the calibration value instead of hard code value

tom also suggested to add a condition to read the accelerometer value. For example, only if the user touches a certain area, can the accelerometer be read by Arduino. Otherwise, the loop() function does nothing. In this way, it can avoid some random movements.

Music Playback Controller

This time, the assignment is to make a device that controls the playback of some pre-recorded music on a web page. The required functions are play, pause, stop, fast forward, skip ahead, skip back and random.


When I saw the requirement, I took play, pause, stop and fast forward as states of the music; skip and random song as actions towards the music. Thus, I came up with the idea of a little device that can sit on the desk in four different ways (has four faces) that map to four states and has three corners that triggers the three actions when facing down. It was hard to came up with a 3D shape satisfying all the requirements but I  finally decided on a cube with sharp side faces. Shaking the device “violently” in y axis will random the song.


In terms of the hardware, I used accelerometer to track the state. Since the cable from Arduino to computer is troublesome when you move the device



I used a lot of time tracking and state checking in the code. Wondering a better way to code a program like this.

Source Code

Circuit Diagram




Since the device was designed for users to roll it back and forth, I tried to reduce the hard edge of the cube on the side by adding some diamond shaped structure between surfaces to create a smoother transition. The center was cut out to indicate which state the device is in, depends on which surface is facing up.


The left and right faces should have been more curved so that the device couldn’t stay still on those surfaces because the left and right are not designed as a stable state but an action. In order to do so, I also tried converting a 3D model into a laser cut file using 123D Design but it is so limited to a few of ways and it is hard to customize, so I just used multiple lays and glue them together.

Before assembling:


Further Development

Left and right faces: a sphere-like end so that users know the left and right are just actions and that the device shouldn’t been put on the table with either left or right side facing down.


The bluetooth was set up with help from adafruit learning system

Accelerometer was set up with help from adafruit learning system

web page p5 sketch is credit to Tom

Last but not the least, great thanks to Stephanie Koltun

Light Controller

When I saw this assignment, I thought about HSV color mode instead of RGB, especially this assignment requires fading. HSV represents hue, saturation and value respectively. The value can be associated with on and off switch. What left are hue and saturation, which is a 2D circle. Thus, I though we can have a dot on this circle which position is controlled by a joystick. Where it lands gives the hue in terms of degree, and saturation, in terms of its distance to the origin.


With the push button in the joystick, we are able to turn on and off the color picker. However, there was not a indicator of whether it is on or off. That was why I added a small red LED on the side.


While making the enclosure, I wanted to integrate the light with the controller: you play with the lamp but also you change the light, so I rounded the neopixels along with the joystick.

Circuit diagram:


System diagram:


Source Code

I used a HSV to RGB converter from

Game Controller

This is a game controller to play Atari’s Lunar Lander game in a browser

However, my initial idea was something different. From left to the right, it is consist of: a potentiometer (a, d) with a laser cut lunar lander on top of it. The orientation of this lander should match with the one in the game. Two buttons that represent increasing power (w) and decreasing power respectively. A larger button that matches with the space bar. A joystick that enables the mouse movement and click.



I really want to make the potentiometer work so I tested that if I pressed the left arrow nine times, the lander will be on its left end, the same for right side. Thus, I created 18 states for the lander and then mapped the value to 0-18, like the illustration in the middle of my sketch below. However, it is really hard to achieve that same effect that the keyboard gives with what Arduino gives. This design ended up with a crazy keyboard either does nothing or prints tons of ‘a’ and ‘d’ in my text editor.


I decided to just use five buttons. During the process, I was totally confused by Keyboard.write() and The device worked very well as a typewriter but it doesn’t work as a game controller in the game. My solution was to use and use Keyboard.releaseAll() when the user releases the button but I still don’t understand it.

Here is the enclosure design. I tried using standoffs. The part on the right was for the five buttons. It appears to be a supporter for all the five buttons. With this design, I ended up with no using hot glue at all 🙂screen-shot-2017-01-30-at-8-52-30-pm

Link to the code