Welcome to Processing

Who does not have access to digital camera?

What is Processing?

• Screen based programming environment with a code structure very much like java.

• Programs are called “sketches” just like in Arduino

• http://processing.org/reference/• FREE!

Draw a line

• line(x1, y1, x2, y2)• Draws a line (a direct path between two

points) to the screen. To color a line, use the stroke() function.

• Example: line(15, 25, 70, 90);

Increase size, change background, change stroke color

size(400, 400);background(192, 64, 0);stroke(255);line(150, 25, 270, 350);

This version sets the window size to 400 x 400 pixels, sets the background to an orange-red, and draws the line in white, by setting the stroke color to 255. By default, colors are specified in the range 0 to 255.

Adding Interactivity

• A program written as a list of statements (like the previous examples) is called a static mode sketch.

• Interactive programs are drawn as a series of frames, which you can create by adding functions titled setup() and draw()

Follow the mouse void setup() {size(400, 400);stroke(255);background(192, 64, 0);} void draw() {line(150, 25, mouseX, mouseY);}

The setup() block runs once, and the draw() block runs repeatedly.

Changing code order void setup() {size(400, 400);stroke(255);background(192, 64, 0);} void draw() {background(192, 64, 0);line(150, 25, mouseX, mouseY);}

Adding mousePressed()• void setup() {• size(400, 400);• stroke(255);• }• • void draw() {• line(150, 25, mouseX, mouseY);• }• • void mousePressed() {• background(192, 64, 0);• }

Interfacing with Arduino

Serial communication

Running Processing Code to interpret data the Arduino is sending

Running Arduino code to measure sensors and send info to Processing

Arduino code for interfacing with Processing

• int analogPin = 0;• int analogValue = 0;• • void setup()• {• // start serial port at 9600 bps:• Serial.begin(9600);• }• • void loop()• {• // read analog input, divide by 4 to make the range 0-255:• analogValue = analogRead(analogPin); • analogValue = analogValue / 4;• Serial.print(analogValue, BYTE);• // pause for 10 milliseconds:• delay(10); • }

Processing code for Interfacing w/ Arduino

import processing.serial.*; Serial myPort; // The serial portint graphXPos = 1; // the horizontal position of the graph: void setup () { size(400, 300); // window size // List all the available serial ports println(Serial.list()); // I know that the fisrt port in the serial list on my mac // is usually my Arduino module, so I open Serial.list()[0]. // Open whatever port is the one you're using. myPort = new Serial(this, Serial.list()[0], 9600); // set inital background: background(48,31,65);}void draw () { // nothing happens in draw. It all happens in SerialEvent()}(continued)

• void serialEvent (Serial myPort) {• // get the byte:• int inByte = myPort.read(); • // print it:• println(inByte);• // set the drawing color. Pick a pretty color:• stroke(123,128,158);• // draw the line:• line(graphXPos, height, graphXPos, height - inByte);• • // at the edge of the screen, go back to the beginning:• if (graphXPos >= width) {• graphXPos = 0;• // clear the screen:• background(48,31,65); • } • else {• // increment the horizontal position for the next reading:• graphXPos++;• }• }