Lab 4: Serial Communication

This lab was an exploration of serial communication between an Arduino microcontroller and my laptop, using a Javascript library called p5. p5 is a specialized library intended to make coding more accessible for designers, artists, and educators on the web. It has a lot of functionality and is very flexible, so I was a little overwhelmed by it at first (especially since it has been awhile since I’ve touched any Javascript), but after messing around with it for a while, I started getting comfortable with some of the basic functions.

The first step was setting up communication between our Arduinos and the p5 editor. In class, Arielle taught us how to use a GUI application called p5.serialcontrol for connecting from the p5 editor (a web-based application) to a serial USB port.

The GUI app for connecting from p5 to the Arduino

Next, it was time to actually start using p5. Arielle had made a template for us to start with that could already establish a connection with our serial port, and she showed us a few examples of how to use functions like draw(), which can create interactive graphics on your webpage, and setup(), a function reminiscent of Arduino programming which essentially sets up your code and does some stuff with your serial connection. This is what the basic template looks like:

Once I was able to get my serial port connected, the hardest part of this lab for me was understanding how the serial communication actually worked conceptually. Arielle did a good job going over the differences between binary and ASCII communication and when to use each one. I didn’t understand how to actually parse the data in p5 until Arielle told us to use the split() function, which I have used many times before in other computing classes.

First, I set up two potentiometers that could send data to the p5 application serially. Once I got them working on Arduino, I coded my program to send each potentiometer value, separated by a comma (for ex: 1023,155) to p5, where I could separate the values using the comma and save each to a separate variable. Then, it was just a matter of figuring out how to use the potentiometers to interact with the screen, using p5 functions that can draw shapes and create colors.

Here is my circuit. It is pretty basic, with two analog inputs (one for each potentiometer) and a digital output for my speaker that I would use later.

Schematic showing the wiring of the circuit

For the serial input part of the lab, I decided to use each potentiometer to change a different background color on my p5 screen. One potentiometer affects the color in the middle of the screen, and another affects the color of the sides of the screen. Here’s a video of my serial input in action:

Next, it was time to figure out a creative way for the stuff happening in my p5 application to communicate back with my Arduino and create some sort of output (light, sound, etc.). I decided to use a speaker for my output, and made it so that touching different boxes on the screen would trigger different sounds (I achieved this with the dist() function, which calculates the distance from two points—in my case, the cursor point and the trigger points for each sound, which were the centers of the white boxes). I was able to play the first few lines of the “Happy Birthday” song!

In my code, I achieved this effect by making each target button in p5 send a different letter serially (from ‘A’ to ‘E’) to my Arduino program. Depending on which letter it received, my Arduino would play a different frequency through my speaker using the tone() function. Below is my Arduino code:

	int pot = 0;
	int pot2 = 0;
	int incoming; //variable for storing incoming data
	void setup() {
	Serial.begin(9600);
	pinMode(2, OUTPUT);
	}
	void loop() {
	pot = analogRead(A0);
	pot2 = analogRead(A1);
	//send ASCII
	Serial.print(pot);
	Serial.print(",");
	Serial.println(pot2);
	//receive serial from p5
	if(Serial.available() > 0)
	{
	incoming = Serial.read();
	if(incoming =='A')
	{
	tone(2,294, 50);
	}
	if(incoming == 'B')
	{
	tone(2,386, 50);
	}
	if(incoming == 'C')
	{
	tone(2,330, 50);
	}
	if(incoming == 'D')
	{
	tone(2,345, 50);
	}
	if(incoming == 'E')
	{
	tone(2,261, 50);
	}
	}
	}

view raw

lab4.ino

hosted with ❤ by GitHub

Short and sweet! If you are interested, here is a link to the template from Arielle that I edited with my own code to use my serial input and output.

https://editor.p5js.org/natendaben/sketches/SJyFfN83X

Be aware that it won’t actually work unless you were to have a port hooked up with some forms of input (like the potentiometers that I used).

Until next time!