Overview
For this recitation, I worked on combining the functions of Arduino and Processing to create two different projects. First, an etch-a-sketch that draws a line based on the outputs of two potentiometers. Also, a buzzer whose sound turns on with the press of the keyboard as well as changing pitch and duration based on the x and y coordinates of the mouse’s position.
Exercise 1: Etch A Sketch
For the etch-a-sketch, I worked on successfully transmitting the values from two potentiometers from the Arduino to Processing and then using those values to draw a line based on the position of variables x & y. Once having easily connected the two potentiometers, the next step is to go to the Arduino code to correctly read the values coming from the potentiometers, and serial print them in a format that Processing can interpret. Then, I had to map the sensor values into a number ratio that applies to the size of my Processing sketch. Then I created a line whose first two points are a variable equal to the two sensor’s previous values, and whose second two points are equal to the two sensor’s current values. This allows a smooth, and consistent line to be controlled by the potentiometers. I ran into a few problems as I did not correctly insert the commas between the different array values in Arduino, which led to them not being sent correctly to Processing. I also first tried to draw my line with repeating ellipses, however, in order to make a smooth etch-a-sketch, I learned to use the line function and use the previous values and current values in conjunction. This etch-a-sketch involves a lot of interactivity because it allows the user to communicate with two sensors and create a visual work of art to their desire. This is interaction because it involves the user first inputting values through the potentiometers, and then the laptop to output a series of lines in accordance with those values. Then, having visualized what’s on the screen, the user can then continue to draw their desired artwork. This is a cyclical process of communication and understanding.
Code
Arduino
void setup() {
Serial.begin(9600);
}
void loop() {
int sensor1 = analogRead(A0);
int sensor2 = analogRead(A1);
Serial.print(sensor1);
Serial.print(“,”); // put comma between sensor values
Serial.print(sensor2);
Serial.println();
delay(100);
}
Processing
import processing.serial.*;
String myString = null;
Serial myPort;
int NUM_OF_VALUES = 2;
int[] sensorValues;
int v;
int b;
void setup() {
size(600, 600);
background(0);
setupSerial();
}
void draw() {
updateSerial();
printArray(sensorValues);
stroke(255);
line(sensorValues[0],sensorValues[1],v,b);
println(sensorValues[0]);
println(sensorValues[1]);
v = sensorValues[0];
b = sensorValues[1];
}
void setupSerial() {
printArray(Serial.list());
myPort = new Serial(this, Serial.list()[ 3 ], 9600);
myPort.clear();
myString = myPort.readStringUntil( 10 );
myString = null;
sensorValues = new int[NUM_OF_VALUES];
}
void updateSerial() {
while (myPort.available() > 0) {
myString = myPort.readStringUntil( 10 ); // 10 = ‘\n’ Linefeed in ASCII
if (myString != null) {
String[] serialInArray = split(trim(myString), “,”);
if (serialInArray.length == NUM_OF_VALUES) {
for (int i=0; i<serialInArray.length; i++) {
sensorValues[i] = int(serialInArray[i]);
}
sensorValues[0] = int(map(sensorValues[0], 0, 1023, 600, 0));
sensorValues[1] = int(map(sensorValues[1], 0, 1023, 0, 600));
}
}
}
}
Exercise 2: Musical Instrument
At first, I was entirely confused by this exercise as I had no direction with my coding. Just a lot of already-written lines of code but nowhere to dive in. However, thanks to the fabulous fellow Jingyi, a once arbitrary chunk of code somehow now made sense, and I was able to incorporate the lines I needed in order to make the buzzer function. While there were similarities in the coding process in relation to the etch-a-sketch, there were also entirely new elements due to this exercise being from Processing to Arduino. The first step is to establish that the array transmitted to Arduino is made of 3 separate values. One value for the mouse’s x-coordinate, one for the mouse’s y-coordinate, and one for the key pressed function. Once establishing values from these functions into the array, I was able to move onto coding the Arduino. On the Arduino, I created an if, else statement. If the corresponding value of the keyboard being pressed is sent, then the buzzer will have a tone, and if the keyboard isn’t pressed, then it will have no tone. Then inside of the if statement for the buzzer having a tone, I set the frequency and duration of the tone in relation to the values I set for the x and y coordinates of the mouse. One important thing for this code is I had to use the map function in order to create a variable for the frequency that had an applicable range of values. This exercise is definitely interactive as it encourages the user to use the mouse and keyboard to get different tones from the buzzer, and then having heard the tones, they will be inspired to play with the inputs even more to create a melody.
Code
Processing
import processing.serial.*;
int NUM_OF_VALUES = 3;
Serial myPort;
String myString;
int values[] = new int[NUM_OF_VALUES];
void setup() {
size(500, 500);
background(0);
printArray(Serial.list());
myPort = new Serial(this, Serial.list()[ 1 ], 9600);
myPort.clear();
myString = myPort.readStringUntil( 10 );
myString = null;
}
void draw() {
values[0] =mouseX;
values[1] =mouseY;
if (mousePressed) {
stroke(random(255), random(255), random(255));
//strokeWeight(10);
line(pmouseX, pmouseY, mouseX, mouseY);
}
if (keyPressed) {
values[2] = 1;
} else {
values[2] = 0;
}
printArray(values);
sendSerialData();
echoSerialData(200);
}
void sendSerialData() {
String data = “”;
for (int i=0; i<values.length; i++) {
data += values[i];
if (i < values.length-1) {
data += “,”;
}
else {
data += “n”;
}
}
myPort.write(data);
}
void echoSerialData(int frequency) {
if (frameCount % frequency == 0) myPort.write(‘e’);
String incomingBytes = “”;
while (myPort.available() > 0) {
incomingBytes += char(myPort.read());
}
print( incomingBytes );
}
Arduino
#define NUM_OF_VALUES 3
int tempValue = 0;
int valueIndex = 0;
int freq;
int values[NUM_OF_VALUES];
void setup() {
Serial.begin(9600);
pinMode(9, OUTPUT);
}
void loop() {
getSerialData();
req = map(values[0], 0, 500, 31, 4978);
if (values[2] == 1) {
tone(9, freq, values[1]);
} else {
noTone(9);
}
}
void getSerialData() {
if (Serial.available()) {
char c = Serial.read();
switch (c) {
case ‘0’…’9′:
tempValue = tempValue * 10 + c – ‘0’;
break;
case ‘,’:
values[valueIndex] = tempValue;
tempValue = 0;
valueIndex++;
break;
case ‘n’:
values[valueIndex] = tempValue;
tempValue = 0;
valueIndex = 0;
break;
case ‘e’:
for (int i = 0; i < NUM_OF_VALUES; i++) {
Serial.print(values[i]);
if (i < NUM_OF_VALUES – 1) {
Serial.print(‘,’);
}
else {
Serial.println();
}
}
break;
}
}
}