Working on... Processing - Giuseppe Corvaglia

1. Processing is an open source programming language and
environment for people who want to create images,
animations, and interactions.
Processing can interact with Arduino using serial
communication.
Processing (www.processing.org) is complementary to Arduino,
because the languages and IDEs are so similar.
Processing programs are called sketches
http://www.processing.org and download the
appropriate version for your OS of your choice.
PROCESSING & ARDUINO PAU 2016

2. Arduino IDE was based on the Processing IDE
PROCESSING & ARDUINO PAU 2016

3. Structure of a Processing Sketch: example
int timer;
void setup() {
// The next function sets the size of the sketch
size(800,600);
/*
This is a multiline comment, anything written between the two multiline commment
delimiters will be ignored by the compiler.
*/
}
void draw() {
background(255);
ellipse(timer, height/2, 30, 30);
timer = timer + 1;
}
setup() Function
draw() Function
will run as a loop until the program is terminated by the
user.
PROCESSING & ARDUINO PAU 2016

4. Processing IDE
We are going to draw a circle on
screen that will move to the right
of the screen as time passes.
Background() function i s necessary to clear
the frame with a color at every iteration. If
we comment it out (temporarily remove it
by adding // to the beginning of the line),
we will see that the circles are drawn on
top of the previous ones.
Press the Run button
PROCESSING &
ARDUINO
PAU 2016

5. The following simple sketch in processing reads the mouse position and
sends data (‘1’ or ‘0’) to the arduino board by serial port. The yellow
LED connected on pin 13 is on or off depending of the position of the
mouse in the rectangle.

6. void setup() {
Serial.begin(9600);
pinMode(13, OUTPUT);
}
void loop(){
if (Serial.available()>0) {
byte input=Serial.read();
if(input == '1'){
digitalWrite(13, HIGH);
}else{
digitalWrite(13, LOW);
}
}
}
Scketch for Arduino
on_off_LED_da_mouse_ino
import processing.serial.*;
Serial myPort;
void setup()
{
size(255, 255);
//String portName = Serial.list()[0];
myPort = new Serial(this, "com4", 9600);
}
void draw() {
noStroke();
rect(0,0,width/2,height);
if (mouseX>width/2) {
myPort.write('1');
}
else {
myPort.write('0');
}
}
Scketch for processing
on_off_LED_da_mouse
PROCESSING & ARDUINO PAU 2016

7. ARDUINO_PWM in
processing_Example_libraries_Arduino(firmata)_arduino_pwm
Demonstrates the control of analog output (PWM) pins of an Arduino board
running the StandardFirmata firmware. Moving the mouse horizontally across
the sketch changes the output on pins 9 (value is proportional to the mouse
X coordinate) and 11 (inversely porportional to mouse X).
ARDUINO_OUTPUT in
processing_Example_libraries_Arduino(firmata)_arduino_output
Demonstrates the control of digital pins of an Arduino board running the
StandardFirmata firmware. Clicking the squares toggles the corresponding
digital pin of the Arduino.
Su arduino occorre caricare Standardfirmata da
esempi_firmata_standardfirmata
Using the Arduino software, upload the StandardFirmata example (located
in Examples > Firmata > StandardFirmata) to your Arduino board.
PROCESSING & ARDUINO PAU 2016

8. 1. we import the Serial library and declare a global Serial object
2. Arduino and Processing communicate at the same rate by ”com 4”
3. In our draw() loop, we send whatever we want over the serial port by using the “write method” from the
Processing Serial library.
4. For this sketch, we will send a ‘1’ or a ‘ 0’ whenever we click our mouse in the Processing window
5. nostroke() disabilita il contorno
6. size() create a window
7. List all the available serial port
8. background(0) put up a black background
9. if (myPort.available() > 0) Read the serial port.
10. String PortName…. /* On some computers, Arduino will usually be connected to the first serial
port. If not, change the 0 to the correct one (examine the output of the previous line of code to figure
out which one to use). */
11. rect(0,0, width/2,heigth) 0,0 coordinates, width of the size and heigth of the size
12. Ellipse (x,y, larghezza, altezza) x a partire da sinistra ed y a partire dall’alto
13.strokeWeigth(20) spessore del contorno a 20 pixel