PComp Midterm Assignment - Beat Box


I paired up with Alejandro Matamala to work on the midterm assignment for Physical Computing. We both decided that we were interested in creating a music machine. Below is the process of how we ultimately created the 'Beat Box'

Here is a detailed description of the proposal we created for pre-work to prepare for this assignment.


This image is the first proposal that Alejandro created of what the final product might look like.


Below was the test sheet that we printed on transparency film to test the different colors and see where they overlap in regards to how much light they allow to shine through. Each color diffuses the light in different varying degrees. 

This is a video of our first prototype with rotating colored strip.  Initially, we had two cups stacked on top of each other, with the inner cup mounted on a continuous servo motor. We cut the inner cup so that we would only use the bottom 1/3 of the cup as a platform to rotate and we mounted the transparency film strip with alternating colors on that platform. We then cut a hole in the outer cup to try and project the colors onto the box (as seen in the video above).  As a result the color wasn't strong enough for the light sensor to read the colors so we had to rethink our design.

Below is our second approach. We decided to cut out the color on the transparency film and past the colored strips on a transparent disk. The colors that we found to be the most different in their ranges from the test sheet for their specific defusion numbers were:

  1. Black
  2. Red
  3. Pink

This video shows us testing the disc by sending the analog output to the Arduino and creating tones via a piezo. As you can see the light sensor is looped over the disc through an arm made out of a straw for this prototype.

We decided that we preferred the sounds to come out of P5,js because we could more easily change the sounds from drums to base by loading different samples into the p5.sound library.  We decided that we like this better than the glitchy piezo tones. Here is a video of the visuals created for the p5.js synthesizer:

The final result


These are the final beat discs that we made for this project. The white portions of the disk were printed as clear. The two that only have two colors are used for a drum beat, where black is mapped to a snare sound and the red is mapped to a clap sound.**

This video below is simply to demonstrate the visual of the box. Notes: none of the sounds in the clip are generated from the the Beat Box.

Here is the Beat Box in action: Here you can observe the interaction with the p5.js synthesizer that we created to play along with the Beat Box. *

Here is the Arduino code:

#include <Servo.h> Servo myservo; 
// create servo object to control a servo int potpin = 0; 
// analog pin used to connect the potentiometer int val; 
// variable to read the value from the analog pin 

void setup() { 
    // attaches the servo on pin 9 to the servo object

void loop() { 
    // delay(50);
    int sensorValue = analogRead(A0);
    int mappedSensor = map(sensorValue, 0, 1023, 20,225);
    if (mappedSensor > 193 && mappedSensor < 204) { 
    // tone(3, 523, 20);
    //Play Red
    else if (mappedSensor > 155 && mappedSensor < 164 ) { 
    // tone(3, 494, 20);
    //Play Red
    // waits for the servo to get there

And here is the p5.js code for this assignment.


*Music notes were sources from this interactive website: https://sampulator.com/

**All the instrumental sound clips were sourced from http://sampleswap.org/.

Thank you to Simon for helping out with the overlapping tone code issue