Author: Connor Matthew Schone

Once I understood/got a refresher from a fellow about the line of logical thinking behind creating an Etch A Sketch type experience with Arduino and Processing, I was able to feel miles more confident in my ability to grasp the methods used to facilitate serial communication between the two programs. After about 35 minutes of going over a step-by-step guide on connecting Arduino and Processing and how to implement certain functions and syntax that allow them to effectively communicate, I began working on the initial stages of an Etch A Sketch: 

 

Although it’s a little hard to make out from the photo’s atrociously bad quality, I began by following the instructions in the recitation site, and essentially made an Etch A Sketch of a bunch of trailing circles rather than one continuous line. After fiddling with the code for a little while, trying to determine the best way to form a line similar to that of an Etch A Sketch, I felt as though the line was perhaps the easiest component to produce, with delayed ellipses and setting up serial communication initially being the most difficult parts of the process.   

   

The image shown above demonstrates the relative simplicity of the code used for this recitation, a development that surprised me considering my slow start to getting my bearings with setting up serial communication. While I did not have time during the recitation to complete the make a musical instrument section, I did however come to understand the added benefit of knowing how to work with Arduino and Processing simultaneously.

I believe Young did a great job in his workshop on serial communication explaining how to send multiple values from Arduino to Processing. I learned that the process is fairly simple in that it requires fairly little on the Arduino side, and is relatively easy to grasp after taking some time to become acquainted with the format. 

The examples given explaining how to send information from Arduino to Processing and vice versa were helpful in understanding the relationship between the two programs and how they communicate with each other. I especially enjoyed learning more about sending multiple values from Arduino to Processing because I could see myself using this feature in future projects involving physical interactions.      

Arduino code from example:

// 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);
Serial.print(“,”); // put comma between sensor values
Serial.print(sensor2);
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);
}

Processing code from example:

import processing.serial.*;

String myString = null;
Serial myPort;

int NUM_OF_VALUES = 3; /** MUST CHANGE THIS **/
int[] sensorValues; /** this array stores values from Arduino **/

void setup() {
size(500, 500);
background(0);
setupSerial();
}

void draw() {
updateSerial();
printArray(sensorValues);

// use the values like this!
// sensorValues[0], sensorValues[1], …
}

// never touch below here
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]);
}
}
}
}
}

Step 1: Graphic involving 3 different shapes

I kept this first task simple with three different shapes sitting on top a blue background:

void setup() {
size(600, 600);
background(673);
}
void draw() {
ellipse(100, 522, 72, 72);
fill(255);

triangle(18, 18, 18, 360, 81, 360);
fill(204);

rect(81, 81, 63, 63);
fill(102);
}

Step 2: The for loop

After implementing a “for loop” on the code to display the same code 100 times and in different colors and positions, this outcome seemed fairly predictable until comparing this response to the one derived from the draw() loop section. Running the code under the draw section caused images to continuously generate on the screen, whereas running the code under the for loop only performed the task once. This is made even more apparent after looking back at a description on Processing.org, which says “the loop continues until the test evaluates to false,” which would then stop the generation of images in my example rather than continue the process without such a command in play.     

Step 3: Arrays          

Introducing arrays to a code like this one and other more advanced codes is  a drastic improvement in that it helped mitigate the more tedious aspects of the process by eliminating the need to manually enter a collection of previously written values. While the end result is the same when applying arrays to the same original code, it quickly became clear how much time and effort could be saved by beginning a project with an organized data set to return to later.         

Step 4: 

After adding an “if” statement to control the speed at which the different shapes traveled and randomizing some of their sizes I began to recognize how valuable arrays can be in effectively managing larger collections of data where manually altering the behavior of each asset would be overly cumbersome. 

Documentation:  

The main difference between setup() and draw() comes down to the commands they each give to the respective code. draw() operates similarly to a .gif, in that it plays and displays the code given to it almost like how a moview reel quickly flashes image after image to create something that appears to be moving. The setup() function is called only once per sketch and is used for general structuring of the code like size, frame rate, etc. With that distinction in mind, pasting the loop code in draw() as opposed to setup() will cause the loop function the keep restarting until the program itself is stopped. If written under setup(), the loop function will only play once, as it has not been prompted by the continuous recycling found from draw().       

As stated earlier, arrays can have a similarly convenient effect as writing something down in shorthand, but to a higher degree because of the amount of information they can transmit into a few numbers. I bet people who make CGI for movies use a similar strategy when rendering  big crowds of people, or maybe anything that requires a lot of moving parts, but not in a way that necessitates they all be independently and/or singularly dynamic from one another.