lecture 7 - weebly

Processing Development Environment (or PDE)

Lecture 7

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 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/Troubles

hooting 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 Processing’s 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):

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

We can send values to Processing from an

Arduino and use these values to control

things in 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);


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.


• 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.


Here’s 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 loop function.


• 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


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.


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

import processing.serial.*;

Serial usbPort;

int [ ] sensors = null;

boolean firstContact =

false;

void setup() {

usbPort = new Serial (this,

Serial.list( ) [0], 9600);

usbPort.bufferUntil (‘\n’);

}

• We’re sending data from the Arduino but

we need a way to receive it in Processing.

• First, import the serial library.

• We’ll also need a Serial object to define

which serial port we’ll be using, as well as

an integer array for our sensor data. We

also have a boolean variable to keep

track of if we’ve heard from Arduino or

not.

• In your setup function, you need to

initialize your Serial object, passing it the

parent object (don’t worry about this)

which port you want to use, and the baud

rate.

• Make sure you pick the same baud rate

that you defined in the Arduino sketch.

• The bufferUntil function just stores

our incoming data in a buffer until we’re

ready to do something with it.


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 you’re getting values.

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.


Next there is some code to deal with the eventuality that we have not

made contact with the Arduino yet. If we haven’t 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 we’ve made contact with the Arduino.


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 don’t put the array values into their own

variables you will get a null pointer exception when you try to use

them in your code.


So we’ve 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.


But wait! Why does the point draw itself over

and over again? How can we fix this?


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. Here’s what that

code looks like:


Ok, that’s fixed but one pixel is kind of hard to

see. Let’s put an ellipse in place of the pixel.


We’ve still got two buttons we haven’t used.

Next we will use them to switch the circle

between a circle and a square.

What Else?

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

Here’s what we need to type to make our

empty function named squareDrawer.


Let’s pass it the same variable that we sent to

dotDrawer. (Copy and Paste is your friend.)


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.


Add these last two lines of code so you can

move the square by turning the potentiometer.


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 don’t mix up the ==

and the =.)

Switching between the sphere and the circle

Now simply add

two more if

statements that

check the

buttonPresse

d variable to

decide which of

your two

functions should

be called.

Switching between the sphere and the circle

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.

We Controlled X, What About Y?

We’ve 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.) Don’t 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.


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.


Here are this workshop’s materials:

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

Here are some links to help you with Processing:

http://processing.org/





Where To Go From Here?


http://processing.org/





lecture 7 - weebly

Documents