1. 3.2 Serial Communication Part 2
By using our Physical Data from Arduino we can use it to control Animations and a Graphical User Interface

2. 3.2 Learning Objectives Using Physical Hardware to control Graphics
3D/2D Graphics in Processing
Smoothing Data
Save Information on an external file

3. 3.2 Breadboard Diagram
Hardware: Potentiometer Photoresistor 330 Ohm Resistor

4. 3.2 Variable Initialization - Arduino
Initialize the variables at the top of the program
#include <SoftwareSerial.h>
SoftwareSerial mySerial(0,1);
// Initialize location (Pin Hole) for the Temperature sensor
int xValue;
int yValue;
int zValue;
int myByte[3] = {0, 0, 0};
int potValue;
int photoValue;
int POT_PIN = A0;
int PHOTO_PIN = A1;
CODE

5. 3.2 Variable Initialization - Arduino
After initialization the variables, we then assign specific functions in order to program.
void setup() {
// Start the Serial Monitor to display data (Console)
Serial.begin(9600);
xValue = 0;
yValue = 0;
zValue = 0;
potValue = 0;
photoValue = 0; }
CODE

6. 3.2 Loop Function - Arduino
Loop function will run on the Arduino infinite times till reset or power is disabled.
// main execution function
void loop() {
potValue = analogRead(POT_PIN);
potValue = map(potValue, 0, 1023, 0, 255);
photoValue = analogRead(PHOTO_PIN);
photoValue = map(photoValue, 0, 1023, 0, 255);
xValue = potValue;
yValue = photoValue;
zValue = 30; …
CODE

7. 3.2 Loop Function - Arduino
Loop function will run on the Arduino infinite times till reset or power is disabled.
// Going to write the byte in order in a for loop we initialize the values into our loop.
myByte[0] = xValue;
myByte[1] = yValue;
myByte[2] = zValue;
for (int i = 0; i < 3; i++) {
mySerial.write(myByte[i]); }
delay(100); …
CODE

8. 3.2 Variable Initialization - Processing
Initialize the variables at the top of the program
import processing.serial.*;
String PORT = “COM3”;
Serial mySerial; PrintWriter mLogger;
int xValue;
int yValue;
int zValue;
int myByte[3] = {0, 0, 0};
float mValue;
float mInterpolate;
float time;
CODE

9. 3.2 Void Setup - Processing
After initialization the variables, we then assign specific functions in order to program.
void setup() {
// Establish connection through our port
mySerial = new Serial(this, PORT, 9600);
if (mySerial.available() == 0) {
println("Port connection established..."); }
delay(2000);
mValue = 0;
mInterpolate = 0;
...
CODE

10. 3.2 Void Setup - Processing
After initialization the variables, we then assign specific functions in order to program.
...
xValue = 0;
yValue = 0;
zValue = 0;
mLogger = createWriter("DataOutput.csv");
mLogger.println("Time" + "," +
"x" + "," +
"y" + "," +
"z" + "," +
"mVal" + "," +
"mInter");
size(500, 500, P3D); }
CODE

11. 3.2 Void Draw - Processing
Initialize time and start a background with color black.
void draw() {
time = millis();
background(0);
noStroke();
...
CODE

12. 3.2 Void Draw - Processing
Print our variables to the monitor and the .csv file …
println("x:", xValue,
"y:", yValue,
"z:", zValue,
"mVal: ", radians(mValue),
"mInter: ", radians(mInterpolate));
mLogger.println(time + "," +
xValue + "," +
yValue + "," +
zValue + "," +
radians(mValue) +
"," + radians(mInterpolate));
...
CODE

13. 3.2 Void Draw - Processing
Use our while loop from before to store our data into each x,y,z variable.
...
while (mySerial.available() > 3) {
for (int i = 0; i < 3; i++) {
myByte[i] = mySerial.read(); }
// After all the values are stored align them properly in each variable to be used later on.
xValue = myByte[0];
yValue = myByte[1];
zValue = myByte[2];
mValue = map(xValue, 0, 255, 0, 180);
mInterpolate = interpolate(mInterpolate, mValue, 0.5); …
CODE

14. 3.1 Push and Pop Matrix
PushMatrix() – Pushes and saves the current coordinate system into a stack matrix
The stack matrix will contain the current transformation matrix
PopMatrix() restores the previous coordinate system
This method will allow us to create a transformation separately from other coordinate systems
Therefore it will only affect what's inside the matrix

15. 3.1 Push and Pop Matrix
We can use this method to manipulate objects separately from each other.
Thus we can individually rotate and translate independently from other objects and the main coordinate system

16. 3.2 Void Draw - Processing
Push and Pop Matrix will allow us to move and rotate each specific object. …
lights();
pushMatrix();
translate(width/4, height/2, zValue);
rotateY(radians(mInterpolate));
box(100);
popMatrix();
translate(width - width/4, height/2, zValue);
rotateY(radians(mValue)); }
CODE

17. 3.1 Interpolation
Interpolation means inserting values between two points of A and B
In this example we are going to insert more values between the initial and last position
This effect will thus create a smoother transition between point A and B.
For example, its similar to 25fps vs. 60fps.

18. 3.1 Interpolation A B without Interpolation 2 variables A 1 2 3 4 5 67 B
with Interpolation
9 variables

19. 3.2 Interpolation- Processing
Interpolating is a method used to smooth our animations and slow down effects. Smaller the number the slower animation.
// Interpolation creates key frames in between point and to point b
// in order to create a smoother animation.
float interpolate(float a, float b, float amount) {
return a + (b - a) * amount; }
CODE