When doing the step1, the first thing I found challenging is how to set the start point and the end point for the line. For the ellipse, I just need to put the end point in the new circle but I don’t know where to put the end point in the line();. I first created the start point then I don’t know how to link the end point with the start point. Then after looking at the code in the Arduino I noticed that the processing is to read the statistic from Arduino. Then I realize I only need to set xp=x; yp=y after the line(xp,yp,x,y); then it can draw the line controlling by parameters. Then I met the second question is that the line will draw out the canvas. I solve this problem by using the map to lower the range. x=map(sensorValues[0],0,1023,0,500);
y=map(sensorValues[1],0,1023,0,500) and now it can draw in the canvas. By doing this I learn the importance of the position of the xp=x; yp=y is really important. Because before when I put them in front of line(xp,yp,x,y); this doesn’t work. Then I learn that the xp and yp is to read the changing location of the line and it should set after the line(xp,yp,x,y); to measure the end point of the line. Also, step1 strengthen the importance of map.
When doing step2, the first difficulty I meet is how to connect a buzzer. I search and I learn that one should be connect to 13 and the other should be connect to the ground. Second difficulty is how to change the code in the Arduino. I peeked helped and learn that I need to use a if statement to link the buzzer( if (values[1] == 1) {tone(13, values[0],values[2]);(make the buzzer rings)
} else {noTone(13);(make the buzzer not rings)})with the mouse and I need to set three values to let the mouse control the buzzer. Once the mouse pressed, the buzzer rings. Then I also need to change the code in processing to make it connect with the Arduino. If mouse pressed, it will jump to value[1]. During step2, I learned how to connect the processing with Arduino when there are multiple values changing and how to read the mouse Pressed and link it with the Arduino. I also enhance my understanding of how to set values and how to connect two if statements(one in Arduino and one in processing) to make the mouse link with Arduino.
This is the code and the video for step1 and step2.
import processing.serial.*;
String myString = null;
Serial myPort;
float x;
float y;
float xp;
float yp;
int NUM_OF_VALUES = 2; /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int[] sensorValues; /** this array stores values from Arduino **/
void setup() {
size(500, 500);
background(0);
setupSerial();
//rectMode(CENTER);
}
void draw() {
//background(0);
updateSerial();
printArray(sensorValues);
//rect(width/2,height/2,400,400);
x=map(sensorValues[0],0,1023,0,500);
y=map(sensorValues[1],0,1023,0,500);
stroke(255);
strokeWeight(1);
ellipse(x,y,30,30);
//line(xp,yp,x,y);
xp=x;
yp=y;
ellipse(xp,yp,30,30);
//// use the values like this!
// //fill(sensorValues[0],sensorValues[1],sensorValues[2]);
//// add your code
//
}
void setupSerial() {
printArray(Serial.list());
myPort = new Serial(this, Serial.list()[ 1 ], 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
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]);
}
}
}
}
}
ellipse(the video for it)
import processing.serial.*;
String myString = null;
Serial myPort;
float x;
float y;
float xp;
float yp;
int NUM_OF_VALUES = 2; /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int[] sensorValues; /** this array stores values from Arduino **/
void setup() {
size(500, 500);
background(0);
setupSerial();
//rectMode(CENTER);
}
void draw() {
//background(0);
updateSerial();
printArray(sensorValues);
//rect(width/2,height/2,400,400);
x=map(sensorValues[0],0,1023,0,500);
y=map(sensorValues[1],0,1023,0,500);
stroke(255);
//strokeWeight(1);
//ellipse(x,y,30,30);
line(xp,yp,x,y);
xp=x;
yp=y;
//ellipse(xp,yp,30,30);
//// use the values like this!
// //fill(sensorValues[0],sensorValues[1],sensorValues[2]);
//// add your code
//
}
void setupSerial() {
printArray(Serial.list());
myPort = new Serial(this, Serial.list()[ 1 ], 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
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]);
}
}
}
}
}
11.15 step1(the video for the line)
Step2:
// 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 3 /** 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();
// add your code here
// use elements in the values array
// values[0]
// values[1]
// if (values[0] == 1) {
// digitalWrite(13, HIGH);
// } else {
// digitalWrite(13, LOW);
// }
if (values[1] == 1) {
tone(13, values[0],values[2]);
} else {
noTone(13);
}
}
//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;
}
}
}
import processing.serial.*;
int NUM_OF_VALUES = 3; /** 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()[1], 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;
values[2]= mouseY;
if(mousePressed){
values[1]=1;
}
else{
values[1]=0;
}
// 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 );
}
The circuit:
(This is the paintings I saw in the gallery next to the 
(to run)
(to hide)
