ATLAS 2013

Super Fast Intro to Arduino and Processing

Materials by Lindsay Craig, David Stillman and Ben Leduc-Mills

 SIK and Processing Class
Overview
What is Processing? Installation and Intro
Serial Comm from Arduino to Processing
Drawing a dot & controlling position
Drawing a circle & controlling grayscale
Drawing a square
Switching control using buttons
Additional Processing material
 Processing?
Processing is a free, open source, cross-
platform programming language and
environment for people who want to
create images, animations, and
interactions.
Created in 2001 by Casey Reas and Ben
Fry at the MIT Media Lab.
Downloads, updates, reference, forums,
etc. at: http://processing.org
 Installation
For Linux:
Download the .tar.gz file to your home directory, then open a terminal window and type:
Tar xvfz processing-xxxx.tgz
(replace xxxx with the rest of the files name, which is the version number)
This will create a folder named processing-1.5 or something similar. Then change to that directory:
cd processing-xxxx
and run processing:
./processing

For Mac:
Double-click the .dmg file and drag the Processing icon from inside this file to your applications folder,
or any other location on your computer. Double click the Processing icon to start Processing.

For Windows:
Double-click the .zip file and drag the folder inside labeled Processing to a location on your hard drive.
Double click the Processing icon to start Processing.
If you are stuck go to http://wiki.processing.org/index.php/Troubleshooting for help.
 Anatomy of a sketch
A sketch is a file or
project you create
in Processing.
When you first
open up a new
sketch it will be
completely blank.
 Setup()
This function runs once, at the very beginning of your
sketch. You will use setup to set up certain aspects of
your sketch, makes sense right?
Most importantly for this class you will begin Serial
communication in the setup function. The setup function
without anything in it looks like this:
 Draw()
This function is where everything happens in your
sketch. The draw loop is the portion of code that keeps
repeating while the Processing sketch is open. The draw
loop looks like this:
Basic Graphics we will be using

point (x, y);

background(color);
ellipse (x, y, width, height);
fill (red, green, blue, transparency);
rect(x, y, width, height);
 Reference
One very convenient way to access Processings Help
Reference is to highlight a function or a word used in
your code, right click and select Find in Reference
(which brings you to the processing.org reference page):
 Hooking into Processing
We can send values to Processing from an
Arduino and use these values to control
things in Processing

First step: Open ATLASArduinoI.ino

Well briefly cover this code, but once you

load it onto your Arduino you dont have to do
anything else with it until the end of the class.
 Arduino Basics: Reading

Digital values are 8 bit resolution: 0 255

Analog values are 10 bit resolution: 0 1023

Commands for reading sensors:

digitalRead(pin#); & analogRead(pin#);
 Arduino Basics: Writing

All output is 8 bit resolution.

Commands for writing to actuators:

digitalWrite(pin#, value);
&
analogWrite(pin#, value);
 Hooking into Processing

Like Processing, we have a setup()

function.
In that function, we need to open Serial
communication with this line of code:
Serial.begin(9600);
Hooking into
Processing
The code we are loading
onto the Arduino is a
combination of SIK circuits
2 and 5.

Our potentiometer is
connected to analog pin 0.

Our buttons are connected

to digital pins 2 and 3.

The three characters are

used for Serial
communication.
Hooking into
Processing
We now have to set all
pins to the right
pinMode, in our setup
function as well as
pulling internal pull up
resistors HIGH and
establishing Serial
communication.

The establishContact()
function keeps the
Arduino sketch from
exiting the setup function
until it hears from
Processing and
establishes contact.
Hooking into
Processing
Heres the establishContact() function. It continually
sends Hello out on the transmit serial pin. This travels to
the computer. While the computer has not responded there
is no data in the Serial buffer so Arduino just keeps sending
Hello. Once the Arduino hears anything from the
computer it exits establishContact() as well as the
setup function and enters the Arduino draw function.
Hooking into
Processing
In our loop() function,
we need to read from all
the sensors and send
the values out the serial
port by calling
Serial.write
and
Serial.print
Well talk about the
difference between these
two commands as well as
the start byte, delimiter
and the end byte next.
Hooking into
Processing
The difference
between
Serial.write
and
Serial.print
is that write is
used to transmit
byte type variables
and print is used
to transmit all other
variable types.
Hooking into
Processing
Here are the rest of the loop() statements. Basically we
are just sending more data about the other sensors
plugged into the Arduino.
Then we send an end byte with Serial.write.
Finally we send an empty println() command so
Processing receives a \n and knows we have sent all the
sensors values and will be starting over from the beginning.
Receiving Data in
Processing
Were sending data from the Arduino but import processing.serial.*;
we need a way to receive it in Processing.
First, import the serial library. Serial usbPort;
Well also need a Serial object to define int [ ] sensors = null;
which serial port well be using, as well as boolean firstContact = false;
an integer array for our sensor data. We
also have a boolean variable to keep track
of if weve heard from Arduino or not. void setup() {
In your setup function, you need to initialize
your Serial object, passing it the parent usbPort = new Serial (this,
object (dont worry about this) which port Serial.list( ) [0], 9600);
you want to use, and the baud rate.
Make sure you pick the same baud rate usbPort.bufferUntil (\n);
that you defined in the Arduino sketch.
The bufferUntil function just stores our }
incoming data in a buffer until were ready
to do something with it.
 Receiving Data in Processing
Our next step is to define a SerialEvent function this
function automatically gets called every time a character in
our bufferUntil() statement is read from the serial
port.
We then read a chunk of data into a String, trim
whitespace, and split it using our delimiter character into
our sensors[ ] integer array. This puts each sensor
value into its own addressable place in the array.
There is a println that should be printing out the sensors
values it sees try running the sketch to make sure youre
getting values. If youre getting errors trying unplugging
and plugging your Arduino back in.
The code is on the next slide.
Receiving Data in Processing
 Receiving Data in Processing
Theres a lot going on here, so dont worry if it doesnt
make sense at first.
Basically, we check for Serial Communication from
Arduino. Once it reads a carriage return it checks to make
sure the data string is not empty.
Then we print out the string to the console in Processing
so we can see what data we are receiving.
 Receiving Data in Processing
Next there is some code to deal with the eventuality that we have not
made contact with the Arduino yet. If we havent made contact it listens
for a Hello. When it receives this it clears the Serial Buffer with
usbPort.clear(), sets the variable firstContact true and sends
an A to the Arduino. This causes the Arduino to exit the
establishContact() function and start sending data. After all that
we print contact to the Processing console so that we can follow what
is going on and we know weve made contact with the Arduino.
 Receiving Data in Processing
If firstContact is true we do the following code which splits the
string up by our delimiter character into an array. This lets us put each
sensor value into its own variable.
Then there is a for loop that prints out the sensor values so we can
see them.
Then we assign the various values from the sensors array to individual
variables. If you dont put the array values into their own variables you
will get a null pointer exception when you try to use them in your code.
 Using Received Data in Processing
So weve got all of the data we want placed in variables.
Now we need to use them.

In the draw loop we are calling the dotDrawer function

and sending it the value of the potentiometer or sensor1.
 Using Received Data in Processing
Inside the dotDrawer function we have to use map to
calibrate the potentiometer value (which goes up to 1023)
so they correspond to an X value in the window created by
Processing.
Then we can use that value to draw a point in the window.
 Using Received Data in Processing
But wait! Why does the point draw itself over
and over again? How can we fix this?
 Using Received Data in Processing
In order to fix this we will need to re-draw the
background of the window over and over again
before we draw the point. Heres what that
code looks like:
 Using Received Data in Processing
Ok, thats fixed but one pixel is kind of hard to
see. Lets put an ellipse in place of the pixel.
 What Else?
Weve still got two buttons we havent used.
Next we will use them to switch the circle
between a circle and a square.
 Making a New Tab and Function
First thing we have to do is create a function that
creates a square.
To do this click on the arrow in the upper right
corner of the Processing environment and select
New Tab. Name the tab squareDrawer.
 Making a New Tab and Function

Heres what we need to type to make our empty

function named squareDrawer.
 Making a New Tab and Function

Lets pass it the same variable that we sent to

dotDrawer. (Copy and Paste is your friend.)
 Making a Square Similar to the Circle

Now copy the following code from dotDrawer

and paste it into your new function.
 Making a Square Similar to the Circle

Now add the following code to actually display the

square when the function is called.
 Making a Square Similar to the Circle

Add these last two lines of code so you can move

the square by turning the potentiometer.
 Switching between the sphere and the circle
At the beginning of your draw function add two
if statements that check the first and second
button and change the variable you just created to
keep track of the last button that was pushed.
(Make sure you dont mix up the == and the =.)
 Switching between the sphere and the circle
Now simply add
two more if
statements that
check the
buttonPressed
variable to decide
which of your two
functions should
be called.
 We Controlled X, What About Y?
Add another analog
sensor, such as the
soft potentiometer,
and see if you can
control the Y position
of your circle and
square with it.
Remember, you will
need to change code
on the Arduino side as
well as in Processing.
 Sending Data from Processing to Arduino
Weve received data in Processing from Arduino, but what
if we want to go the other direction? In order to send data
back to Arduino the first thing we need to do is add a
command that spits information back over the Serial line
from Processing to Arduino. (In this case we added two
commands.) Dont forget the single quotation marks!
 Sending Data from Processing to Arduino
Now we need to add some code to the Arduino side so
Arduino does something depending on what data it
receives.
The first thing we need to add is code that listens to see if
there is data available on the RX Serial line. Add this code
at the beginning of your loop function.

Now we have a variable named signal that contains the

data Arduino sees in the Serial buffer.
(Getting an error message? Did you remember to declare the signal
variable as a char type at the beginning of the sketch?)
 Sending Data from Processing to Arduino
Next we need a simple switch case statement that tells us what to do if
we receive certain information. You can use communication that is
larger than one character, similar to the TX data Arduino is already
sending. In this case we are using a single character to communicate.
 Where To Go From Here?

While we may not have time for it- lets talk about how we
could make sure that the circle or square stays in the same
place when we switch between their functions.

How would you make the potentiometer control the angle

of the circles trajectory as it constantly moves forward? If
youve got that figured out how about making one of the
buttons speed the circle up and the other slow it down?

Finally, see if you can make a button in the Processing

window to control the LED. (Hint, look up mousePressed
and combine that with a check of mouseY and mouseX.)
 Where To Go From Here?
Here are this workshops materials:
http://learn.sparkfun.com/curriculum/46

Here are some links to help you with Processing:

http://processing.org/

http://learn.sparkfun.com/curriculum/16

http://learn.sparkfun.com/curriculum/35

http://learn.sparkfun.com/curriculum/43

http://learn.sparkfun.com/curriculum/45
Questions?
 www.sparkfun.com
6175 Longbow Drive, Suite 200
Boulder, Colorado 80301