Basics of Arduino and Processing

Topic No. 5

Name, Surname, Date:

Aim of this work: get know Processing software and its usage for data reading from serial port.
Processing
Processing is an open source programming language and environment for people who want to create images, animations, and
interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming
within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, there are tens
of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and
production.

Free to download and open source

Interactive programs using 2D, 3D or PDF output
OpenGL integration for accelerated 3D
For GNU/Linux, Mac OS X, and Windows
Projects run online or as double-clickable applications
Over 100 libraries extend the software into sound, video, computer vision, and more...
Well documented, with many books available

The Processing Development Environment

A Processing program is called a sketch. The idea is to make Java-style programming feel more like scripting, and adopt the
process of scripting to quickly write code. Sketches are stored in the sketchbook, a folder that's used as the default location for
saving all of your projects. Sketches that are stored in the sketchbook can be accessed from File Sketchbook. Alternatively,
File Open... can be used to open a sketch from elsewhere on the system.
A program written as a list of statements (like the previous examples) is called a static sketch. In a static sketch, a series of
functions are used to perform tasks or create a single image without any animation or interaction. Interactive programs are
drawn as a series of frames, which you can create by adding functions titled setup() and draw() as shown in the code below.
These are built-in functions that are called automatically.

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. As such, setup() can be used for any initialization; in this
case, setting the screen size, making the background orange, and setting the stroke color to white. The draw() block is used to
handle animation. The size() function must always be the first line inside setup().
Because the background() function is used only once, the screen will fill with lines as the mouse is moved. To draw just a single
line that follows the mouse, move the background() function to the draw() function, which will clear the display window (filling
it with orange) each time draw() runs.
void setup() {
size(400, 400);
stroke(255);
}
void draw() {
background(192, 64, 0);
line(150, 25, mouseX, mouseY);
}

Static programs are most commonly used for extremely simple examples, or for scripts that run in a linear fashion and then
exit. For instance, a static program might start, draw a page to a PDF file, and exit.
Most programs will use the setup() and draw() blocks. More advanced mouse handling can also be introduced; for instance,
the mousePressed() function will be called whenever the mouse is pressed. In the following example, when the mouse is
pressed, the screen is cleared via the background() function:
void setup() {
size(400, 400);
stroke(255);
}
void draw() {
line(150, 25, mouseX, mouseY);
}
void mousePressed() {
background(192, 64, 0);
}

Shapes in Processing
The coordinate system for pixels in a computer window, however, is reversed along the y-axis. (0,0) can be found at the top
left with the positive direction to the right horizontally and down vertically.

There are few basic shapes:

A point() is the easiest of the shapes and a good place to start. To draw a point, we only need an x and y coordinate.

A line() isn't terribly difficult either and simply requires two points: (x1,y1) and (x2,y2):
Once we arrive at drawing a rect(), things become a bit more complicated. In Processing, a rectangle is specified by the
coordinate for the top left corner of the rectangle, as well as its width and height.
A second way to draw a rectangle involves specifying the centerpoint, along with width and height. If we prefer this method,
we first indicate that we want to use the "CENTER" mode before the instruction for the rectangle itself. Note that Processing is
case-sensitive.
Finally, we can also draw a rectangle with two points (the top left corner and the bottom right corner). The mode here is
"CORNERS".

Once we have become comfortable with the concept of drawing a rectangle, an ellipse() is a snap. In fact, it is identical to
rect() with the difference being that an ellipse is drawn where the bounding box of the rectangle would be. The default mode
for ellipse() is "CENTER", rather than "CORNER."

It is important to acknowledge that these ellipses do not look particularly circular. Processing has a built-in methodology for
selecting which pixels should be used to create a circular shape. Zoomed in like this, we get a bunch of squares in a circle-like
pattern, but zoomed out on a computer screen, we get a nice round ellipse. Processing also gives us the power to develop our
own algorithms for coloring in individual pixels (in fact, we can already imagine how we might do this using "point" over and

over again), but for now, we are content with allowing the "ellipse" statement to do the hard work. (For more about pixels,
start with: the pixels reference page, though be warned this is a great deal more advanced than this tutorial.)
Now let's look at what some code with shapes in more realistic setting, with window dimensions of 200 by 200. Note the use
of the size() function to specify the width and height of the window.
size(200,200);
rectMode(CENTER);
rect(100,100,20,100);
ellipse(100,70,60,60);
ellipse(81,70,16,32);
ellipse(119,70,16,32);
line(90,150,80,160);
line(110,150,120,160);

Serial
The Processing serial library allows for easily reading and writing data to and from external machines. It allows two computers
to send and receive data and gives you the flexibility to communicate with custom microcontroller devices, using them as the
input or output to Processing programs.
To use serial communication a certain library have to be importe in the Processing code
import processing.serial.*;

To know awailable pors there are function list()

// List all the available serial ports:
println(Serial.list());

To get data from serial port, a serial connection have to be setuped

// Open the port you are using at the rate you want:
Serial myPort = new Serial(this, Serial.list()[0], 9600);

To rite data in to the serial port, function rite can be used

// Send a capital A out the serial port:
myPort.write(65);

To read data from serial port more difficult code structure have to be used. First of all there should be checked id there any
data to be received (function available()). Is there is any, it can be read by functions read(), readChar(), readBytes(),
readString() and others.
However there can be generated the user events where function bufferUntil() can be used to deine the division of transfere
data.
import processing.serial.*;
Serial myPort;
String inString;
int lf = 10;

// The serial port

// Input string from serial port
// ASCII linefeed

void setup() {
size(400,200);
// List all the available serial ports:
println(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
myPort.bufferUntil(lf);
}
void draw() {
background(0);
text("received: " + inString, 10,50);
}
void serialEvent(Serial p) {
inString = (myPort.readString());
}

Tasks
1. Write a Processing code, which would move a person picture (the one You had in previous examples or draw it by You
self) according to Your mouse moves. Write the code below:

2. Connect a potentiometer and LED to the Arduino bloard and write a code to send potentiometers data to Serial post.

Code for Arduino:

void setup(){
Serial. begin(9600);
}
void loop(){
int aV = analogRead(2);
Serial.println(aV);
delay(1000);
}

Code for Processing:

import processing.serial.*;
Serial myPort;
int xPos = 1;

// The serial port

// horizontal position of the graph

void setup () {
// set the window size:
size(400, 300);
// List all the available serial ports
println(Serial.list());

// I know that the first port in the serial list on my mac

// is always my Arduino, so I open Serial.list()[0].
// Open whatever port is the one you're using.
myPort = new Serial(this, Serial.list()[0], 9600);
// don't generate a serialEvent() unless you get a newline character:
myPort.bufferUntil('\n');
// set inital background:
background(0);
}
void draw () {
// everything happens in the serialEvent()
}
void serialEvent (Serial myPort) {
// get the ASCII string:
String inString = myPort.readStringUntil('\n');
if (inString != null) {
// trim off any whitespace:
inString = trim(inString);
// convert to an int and map to the screen height:
float inByte = float(inString);
inByte = map(inByte, 0, 1023, 0, height);
// draw the line:
stroke(127,34,255);
line(xPos, height, xPos, height - inByte);
// at the edge of the screen, go back to the beginning:
if (xPos >= width) {
xPos = 0;
background(0);
}
else {
// increment the horizontal position:
xPos++;
}
}
}

You can copy it from http://arduino.cc/en/Tutorial/Graph

Write down what this system should do, how it works.

3. Change the Processing code to draw a chart with changing colour depending on the x axis (chart start with one colour
and ends with another step by step changing from one to another). Write down only those lines, which have been
changed

4. Change the schema by adding one LED to it. Now change the code to turn on the LED when a axis fills up (when x axis
is filled with values it starts from the beginning and LED should indicate is it the first time or no). Write down what
have to be changed in the code.

Mark: