For this recitation, I uploaded an image of a field to Processing and used an image of a rose with a transparent background. This rose is to be controlled by two potentiometers in terms of its position on the field, to keep creating more roses on the field.
I ran into trouble a few times due to the sizing of the images compared to the size of the virtual ‘canvas’ but I was able to figure out how to resize the images to fit my canvas (I did not want to change the size of my canvas to fit the images as that would have made it far too large — probably bigger than my computer screen).
Here’s the Processing code:
// 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
*/
PImage photo2;
PImage photo;
float posX2 = 0;
float posY2 = 0;
import processing.serial.*;
String myString = null;
Serial myPort;
int PORT_INDEX = 1;
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);
photo = loadImage(“yellowrosecopy.png”);
photo2 = loadImage(“grassfieldcopy.png”);
background(photo2);
setupSerial();
}
void draw() {
updateSerial();
printArray(sensorValues);
// use the values like this!
// sensorValues[0]
// add your code
float posX = map(sensorValues[0], 0, 1023, 0, width);
float posY = map(sensorValues[1], 0, 1023, 0, height);
stroke(255);
image(photo, posX2, posY2);
posX2 = posX;
posY2 = posY;
}
void setupSerial() {
printArray(Serial.list());
myPort = new Serial(this, Serial.list()[ PORT_INDEX ], 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]);
}
}
}
}
}
Here is the Arduino code:
// IMA NYU Shanghai
// Interaction Lab
// For sending multiple values from Arduino to Processing
void setup() {
Serial.begin(9600);
//pinMode(7,INPUT);
}
void loop() {
int sensor1 = analogRead(A0);
int sensor2 = analogRead(A1);
// int sensor3 = analogRead(A2);
// keep this format
Serial.print(sensor1);
Serial.print(“,”); // put comma between sensor values
Serial.print(sensor2);
Serial.println();
// Serial.print(“,”);
// Serial.print(sensor3);
// Serial.println(); // add linefeed after sending the last sensor value
// too fast communication might cause some latency in Processing
// this delay resolves the issue.
delay(100);
}