PComp Midterm Assignment - Beat Box

Introduction

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.

music2

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

final_photo

drums-and-bass_pcomp_midterm

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() { 
    myservo.attach(9); 
    // attaches the servo on pin 9 to the servo object
    pinMode(3,OUTPUT);
    Serial.begin(9600);
} 

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
    Serial.println(mappedSensor);
    // waits for the servo to get there
}

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

Credits:

*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

Midterm - Proposal

Midterm

For my midterm project, Alejandro and I have decided to pair up to expand on one of his previous projects that he made earlier in the  semester.

We have a couple of ideas, but haven't finalized anything concrete.

Concept

The main idea is that we want to make a music making machine that reads a strip of translucent colored material where bands of alternating color sections are read from a light sensor that is mapped to create a song. We will be mapping the different colors to the distinct tones that, which either via (1) a revolving disk, or (2) a moving flat sheet will create lyrical sounds.

Movement of music maker

We need to determine how we will move the strips of of translucent strips.  A DC motor might be effective for the rotating disk, but we are unaware of how to move the strip along a track.

Representation of colors

The other variable that we need to determine is how we will represent the colors on the strip.  Do we want to simply tape together colored acrylic sections to create the song or do we want to have it more of a contribution from the user by having them color the bands using a marker on a transparency film strip.

Serial Communication

Assignment

For the serial communication assignment, my partner Dominic and I from the Synthesis workshop added a second variable to our sketch with serial communication.

Using the potentiometer, the color of the sketch would change as you moved from 0-1023

Our original Synthesis sketch is explained in this blog post.

Synthesis Workshop - Combining PComp and ICM

The purpose of this workshop was the apply learnings from physical computing and combine that with Introduction to Computation Media to create physical interactions on the breadboard and have the result be reflected on the screen in the p5.js editor. The first activity was to use a potentiometer to move an ellipse across the screen as you turned the dial from 0 to 1023 and the second activity was to use a button to have an ellipse disappear on a screen when pushed.

This is what my board looked like for both of those exercises

The tricky part was ensuring that the breadboard and Arduino properly spoke to the p5.js library through serial communications.

Here were the exact instructions for the above activities (I want to share them here because there are a lot of variables and I want to be sure not to miss anything):

1. Download the P5 Serial Control application. This application serves as a bridge between your arduino and your p5 sketch. For it to run you'll on a mac you either need to have "allow apps downloaded from anywhere" enabled or cntrl-click to open. More info on apple's help pages.
2. Open the following example, connect your arduino, and get it running. (You can "duplicate" it in the p5 editor to save it into your account.) Make sure the editor is using http and not https.
   • p5.js code for reading analog value. Works with AnalogReadSerial Arduino sketch, found in the Arduino IDE, File menu, Examples-> Basics —> AnalogReadSerial. Turn a potentiometer from 0 - 1023, the ball moves from 0-255 on the screen.
   • p5.js code for reading digital value. Works with DigitalReadSerial Arduino sketch, found in the Arduino IDE, File menu, Examples -> Basics —> DigitalReadSerial. Push a button, ball appears or disappears.

The examples use the p5.serialport library. You can read documentation and find more examples.

You might notice the above examples use a new concept called a "callback." This is a concept we will examine in detail next week in ICM while looking at "DOM manipulation." A quick explanation for how this relates to serial communication is as follows:

There is an "event" each time your p5 sketch receives data from the serial port. You get to decide what function is executed for that event. In the case of the examples, that function is serialEvent().

// When there is data, run serialEvent  
serial.on('data', serialEvent);

The above line of code then requires you write a function called serialEvent() to handle the data.

function serialEvent() { 
// Your code for reading the data goes here. 
}

The only issue that we ran into was with the potentiometer activity -- when the ellipse moved across the screen it was very jittery. Apparently there is a smoothing function that can help with this issue

Application

Finally, we were asked to create out own "physical variable sketch" in p5.js.  We were given the option to create a new sketch and add a physical component or incorporate a a physical interaction through serial on a previously created sketch.

My partner, Dominic, and I decided that we would implement a button interaction to a previous sketch that I created for ICM: Horus.

Because this was a previously generated sketch we had to upload p5.serialport.js file and link the this to the index.html file by including this line of code:

<script src="p5.serialport.js"></script>

Here is the code in the p5.js Horus sketch that allowed the serial communications to work in the browser:

var clicked = false;
var lastPeriodic = 1;
var serial; // variable to hold an instance of the serialport library
var sensorValue = 0; // ellipse position

function periodic(freq) {
 if (clicked == false) {
 return lastPeriodic;
 }
 // sin of frequency * two pi * time
 lastPeriodic = sin(freq * TWO_PI * millis());
 return lastPeriodic;
}

function randColor() {
 if (clicked == true) {
 fill(random(255), random(255), random(255));
 }
}

// When mouse is clicked, switched Boolean value of clicked
function mouseClicked() {
 clicked = !clicked;
}

function setup() { 
 createCanvas(400, 400);
 serial = new p5.SerialPort(); // make a new instance of serialport library
 serial.on('list', printList); // callback function for serialport list event
 serial.on('data', serialEvent);// callback for new data coming in
 serial.list(); // list the serial ports
 serial.open("/dev/cu.usbmodem1411"); // open a port
}

function draw() { 
 background(220);
 randColor();
 // Stroke growing based on time
 strokeWeight((millis() / 75) % 400);
 // Draw ellipse using periodic function for width and height
 ellipse(width / 2, height / 2, 300 * periodic(22), 300 * periodic(22));
 if (sensorValue !== 0) {
 clicked = true;
 }
 else {
 clicked = false;
 }
}

function printList(portList) {
 for (var i = 0; i < portList.length; i++) {
 // Display the list the console:
 println(i + " " + portList[i]);
 }
}

function serialEvent() {
 var inString = serial.readLine();
 if (inString.length > 0) {
 inString = inString.trim();
 sensorValue = Number(inString/4);
 }
}

Here is a video that demonstrates how the button behavior affected the Horus sketch

I would be interested to also include the potentiometer in this sketch so that the Horus eye moved from right to left with the values on the potentiometer. Combining two serial inputs is something that we will be working on in class this week, so I hope to implement after.

Analog Output - Theremin Jam

One of my favorite musicians is the guitarist from the band Phish -- Trey Anastasio. He plays a mean guitar and sometimes a trippy theremin.For class no. 4 in physical computing we were asked to create an analog output circuit. My mind went immediately to creating a theremin after applying the tone() function to a piezo in class.

Why not create a theremin to jam with your favorite musician, right? Below is my attempt at a v.1 theremin:

Here is the entire song of Trey Anastasio and OysterHead playing Shadow of a Man live.

The code was fairly simple to produce the theremin effect:

const int speakerPin = 9;

void setup() {
 pinMode(speakerPin, OUTPUT);
 Serial.begin(9600);
}

void loop() {
 int senState = analogRead(A0);
 int frequency = map(senState, 500, 1000, 3000, 50);
 tone(speakerPin, frequency);
 Serial.println(senState);

}

The tone() function gives you the ability to change the frequency, when mapped to the light sensor using the map() function, based on how much light it emitted on the light sensor.

Because I wanted to have the theremin be making noise in the dark, the 3000 number was used first in the 'min & max' of the mapping function.

ex.

map(potState, 500, 100, 3000, 50);

rather than

map(potState, 500, 100, 50, 3000);

If I were to use the second map() function in the example, then the piezo would only make sound if the light was removed from the sensor.

The components list:

1. light sensor
2. 10K resistor
3. A3 piezo

Here is what the circuit looks like: