ETCH A SKETCH- Exercise 1
[Processing code] FROM ARDUINO TO PROCESSINGETCH A SKETCH
// IMA NYU Shanghai
// Interaction Lab
// For receiving multiple values from Arduino to Processing
/*
* Based on the readStringUntil() example by Tom Igoe
* https://processing.org/reference/libraries/serial/Serial_readStringUntil_.html
*/
import processing.serial.*;
String myString = null;
Serial myPort;
int NUM_OF_VALUES = 2; /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int[] sensorValues; /** this array stores values from Arduino **/
float B;
float C;
void setup() {
size(500, 500);
background(100);
setupSerial();
}
void draw() {
updateSerial();
printArray(sensorValues);
float x = map(sensorValues[0],0,1023,0,width);//these are values that are being calculated, 0 to width part is making it compressed
float y = map(sensorValues[1],0,1023,0,height);// different scale
line (x,y,B,C);//makes the line change the position based on the sensor values
B=x;// where we start the next time will be where "x" was
C=y;//where we start the next time will be where "y" was
}
// use the values like this!
// sensorValues[0]
// add your code
//
void setupSerial() {
printArray(Serial.list());
myPort = new Serial(this, Serial.list()[ 15 ], 9600);
// WARNING!
// You will definitely get an error here.
// Change the PORT_INDEX to 0 and try running it again.
// And then, check the list of the ports,
// find the port "/dev/cu.usbmodem----" or "/dev/tty.usbmodem----"
// and replace PORT_INDEX above with the index number of the port.
myPort.clear();
// Throw out the first reading,
// in case we started reading in the middle of a string from the sender.
myString = myPort.readStringUntil( 10 ); // 10 = '\n' Linefeed in ASCII //'n'=next line
myString = null;//start fresh
sensorValues = new int[NUM_OF_VALUES];
}
void updateSerial() {//reading information
while (myPort.available() > 0) {
myString = myPort.readStringUntil( 10 ); // 10 = '\n' Linefeed in ASCII
if (myString != null) {
String[] serialInArray = split(trim(myString), ",");//seperating three values based on commma
if (serialInArray.length == NUM_OF_VALUES) {//then your putting it into an array
for (int i=0; i<serialInArray.length; i++) {
sensorValues[i] = int(serialInArray[i]);
}
}
}
}
}
||
Arduino code [ARDUINO to PROCESSING]
// IMA NYU Shanghai // Interaction Lab // For sending multiple values from Arduino to Processing void setup() { Serial.begin(9600); } void loop() { int sensor1 = analogRead(A0); int sensor2 = analogRead(A1); //int sensor3 = analogRead(A2); // keep this format Serial.print(sensor1);//whatever value from sensor 1 value and then put a comma next to it Serial.print(","); // put comma between sensor values, this is separating the data with both sensors Serial.print(sensor2); //Serial.print(","); //Serial.print(sensor3); Serial.println(); // add linefeed after sending the last sensor value, you NEED this break // // too fast communication might cause some latency in Processing // this delay resolves the issue. delay(10); }
ETCH-A-SKETCH Write-Up Description
For this exercise, we were challenged with creating an Etch-A-Sketch Animation connecting both the arduino and processing platforms. These are the steps I took in order to do it:
Arduino Code
- First, I set up two potentiometers and called these “sensor 1” and “sensor 2” in void loop. I put this here because we want the values to repeat themselves.
- Then, under this, I connected each of the sensors in Serial. print because we want the sensors to produce number values. These values not only tell us that the connection is working, but are also what processing will read in order to create the image. We also add a comma after each one to distinguish the sensor values from one another.
Processing Code
- Before void setup: The first step was to establish that we have two sensor values coming in from arduino— “int NUM_OF_VALUES =2.” I also added float b and float c because these are the x and y coordinates that will be controlled by the potentiometers.
- void draw: Within void draw, I created float x and float y because these are the values that are being calculated on the x and y coordinates. I wrote them within the map function like this: “float x map(sensorValues[0],0,1023,0,width);” because we want to calculate all of the values that processing can from “0-1023” and then compress it within the size of our screen “0-width.”
- Then, I wrote ” line (x,y,B,C)” because “x and y” are one point on the line and “B and C” are another point of the line. We want to establish this in void draw so processing knows that this is what we want to draw.
- Lastly, in order to make the etch-a-sketch create various lines that are connected, we needed to tell processing that when the potentiometer sensor values change, we want the new B and C values to start where the x and y stopped. Therefore, these values should equal one another.
Exercise 2
Within this exercise, we had to attach processing and arduino and make it so that when you press around the mousepad, a different frequency will play.
PROCESSING TO ARDUINO [Arduino Code]
// IMA NYU Shanghai // Interaction Lab /** This example is to send multiple values from Processing to Arduino. You can find the Processing example file in the same folder which works with this Arduino file. Please note that the echo case (when char c is 'e' in the getSerialData function below) checks if Arduino is receiving the correct bytes from the Processing sketch by sending the values array back to the Processing sketch. **/ #define NUM_OF_VALUES 2 /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/ /** DO NOT REMOVE THESE **/ int tempValue = 0; int valueIndex = 0; /* This is the array of values storing the data from Processing. */ int values[NUM_OF_VALUES]; void setup() { Serial.begin(9600); pinMode(13, OUTPUT); pinMode(9, OUTPUT); } void loop() { getSerialData(); if (values [1] == true) { //if mouse is pressed which is at position 1 (which is mouse press) then... tone(11, values[0]); //at pin 11 play the mouse x values frequency } else { noTone(11); } } //recieve serial data from Processing void getSerialData() { if (Serial.available()) { char c = Serial.read(); //switch - case checks the value of the variable in the switch function //in this case, the char c, then runs one of the cases that fit the value of the variable //for more information, visit the reference page: https://www.arduino.cc/en/Reference/SwitchCase switch (c) { //if the char c from Processing is a number between 0 and 9 case '0'...'9': //save the value of char c to tempValue //but simultaneously rearrange the existing values saved in tempValue //for the digits received through char c to remain coherent //if this does not make sense and would like to know more, send an email to me! tempValue = tempValue * 10 + c - '0'; break; //if the char c from Processing is a comma //indicating that the following values of char c is for the next element in the values array case ',': values[valueIndex] = tempValue; //reset tempValue value tempValue = 0; //increment valuesIndex by 1 valueIndex++; break; //if the char c from Processing is character 'n' //which signals that it is the end of data case 'n': //save the tempValue //this will b the last element in the values array values[valueIndex] = tempValue; //reset tempValue and valueIndex values //to clear out the values array for the next round of readings from Processing tempValue = 0; valueIndex = 0; break; //if the char c from Processing is character 'e' //it is signalling for the Arduino to send Processing the elements saved in the values array //this case is triggered and processed by the echoSerialData function in the Processing sketch case 'e': // to echo 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; } } }
PROCESSING TO ARDUINO [Processing code]
// IMA NYU Shanghai
// Interaction Lab
/**
* This example is to send multiple values from Processing to Arduino.
* You can find the arduino example file in the same folder which works with this Processing file.
* Please note that the echoSerialData function asks Arduino to send the data saved in the values array
* to check if it is receiving the correct bytes.
**/
import processing.serial.*;
int NUM_OF_VALUES = 2; /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
Serial myPort;
String myString;
// This is the array of values you might want to send to Arduino.
int values[] = new int[NUM_OF_VALUES];
void setup() {
size(500, 500);
background(0);
printArray(Serial.list());
myPort = new Serial(this, Serial.list()[ 31 ], 9600);
// check the list of the ports,
// find the port "/dev/cu.usbmodem----" or "/dev/tty.usbmodem----"
// and replace PORT_INDEX above with the index of the port
myPort.clear();
// Throw out the first reading,
// in case we started reading in the middle of a string from the sender.
myString = myPort.readStringUntil( 10 ); // 10 = '\n' Linefeed in ASCII
myString = null;
}
void draw() {
background(0);
values [0]= mouseX;//frequency is changing based on moving the mouse around, sends to arduino
values [1]=int(mousePressed);// turn true or false (boolean) into an integer that can be sent
// sends the values to Arduino.
sendSerialData();
// This causess the communication to become slow and unstable.
// You might want to comment this out when everything is ready.
// The parameter 200 is the frequency of echoing.
// The higher this number, the slower the program will be
// but the higher this number, the more stable it will be.
echoSerialData(200);
}
void sendSerialData() {
String data = "";
for (int i=0; i<values.length; i++) {
data += values[i];
//if i is less than the index number of the last element in the values array
if (i < values.length-1) {
data += ","; // add splitter character "," between each values element
}
//if it is the last element in the values array
else {
data += "n"; // add the end of data character "n"
}
}
//write to Arduino
myPort.write(data);
}
void echoSerialData(int frequency) {
//write character 'e' at the given frequency
//to request Arduino to send back the values array
if (frameCount % frequency == 0) myPort.write('e');
String incomingBytes = "";
while (myPort.available() > 0) {
//add on all the characters received from the Arduino to the incomingBytes string
incomingBytes += char(myPort.read());
}
//print what Arduino sent back to Processing
print( incomingBytes );
}
Exercise 2 Explanation
Processing
1). Before void setup: I established that we will be working with two values: mouse pressed and mouse x.
2. In void draw:
values [0]= mouseX;
values [1]=int(mousePressed);
In order to send the information about the frequency of the buzzer or where the mouse is pressed to arduino, we needed to place “mouse x” and “mouse pressed” within the values functions so that the numbers can be translated for arduino.
Arduino
- Before void setup- #define NUM_OF_VALUES 2 — We had to tell arduino here that it should be expecting two values from processing
- Within void setup- { Serial.begin(9600); pinMode(11, OUTPUT); pinMode(9, OUTPUT); } In this section, we needed to tell arduino at which pin value is the buzzer connected to
- Within void loop: { getSerialData(); if (values [1] == true) { tone(11, values[0]); } else { noTone(11); } } — Here we are saying, if the mouse is pressed (which is at position 1), then play the frequency which is at pin 11. However, if the mouse is not pressed, then don’t play the tone.
Exercise 2 Video