and I like to make things.

And welcome to another Arduino

tutorial video.

Today we're going to learn

how Arduino can control software

running on your computer.

We are going to use

a very simple circuit

as you can see here,

where we are going to read

the position of a potentiometer

and sending that data over

the USB connection to your computer,

where a small program

written in the processing language

is going to be used to change

the color of the Arduino logo

depending on the position

of the potentiometer.

So, how does this work?

Well, if you noticed it,

the Arduino has two chips.

One main processor here,

that is the one that execute

the code that you program

in the Arduino IDE.

And this other smaller square chip

that lets the Arduino processor

communicate with the USB

bus over to the computer.

So, we are going to use

for this project

something that is called,

Serial Communication.

Because the Arduino

will send data

over to the computer

one bit at the time

at a certain speed we will define

in software, and then,

the square chip that you see here

will convert that into

USB data

that travels over to the computer.

We have used the serial communication

in the past

in order to visualize the data

that comes from the

Arduino board with the Arduino IDE.

There is a button on the Arduino IDE

called serial monitor.

If you press that,

a small window opens up

and then you can see

all the data that comes

from the Arduino board,

visualized scrolling down

the small window.

Then there is a little menu

at the bottom

that says normally 9600,

and that's for example

the speed of communication

used by the Arduino

to send the data

so, the Arduino speed of

sending and the Arduino IDE speed

of receiving have to be the same

in other to keep the data readable.

In this case

we are going to do more

with the data that comes

to the computer.

Instead of just visualizing it

on the screen,

we are going to use

another software

to capture the data

and use it to do something

and control the software

from the Arduino.

In order to do this,

we are going to use the processing language.

Processing is a great software

that was a major inspiration,

and one of the bases

for developing Arduino

and it is a great way

to learn how to program.

You can download the processing IDE

for free from the

prossesing.org website.

After you download it,

you should install it according

to the instructions you find on the web site

and you should go through a couple of

tutorials like the overview tutorial.

After that,

you can load the processing code

into the processing IDE,

and you can load the Arduino code

into the Arduino IDE

and then transfer

the program on the Arduino board

and after the code is loaded,

you will see that the TX LED

will start to blink

signaling that the Arduino is sending data.

You can open the serial monitor,

see the data scrolling on the screen...

after you see that,

the Arduino part of the work is done.

You can close the serial monitor,

then you switch over to the processing IDE,

you press the button to start

the code on the processing IDE.

That will read the data

coming from the Arduino

from the serial port

and then it will use the number

to change the background color

of the Arduino logo.

Now, we should go through the code

and see in detail

how the two different applications work.

Let's build the circuit first.

Here you can see that we have

a potentiometer

plugged into the breadboard

and we have

one wire going from the potentiometer

to the analog input zero,

in order to read the value

coming from the potentiometer.

Then we have two wires

connected to the potentiometer

going to the plus and minus rail

on the breadboard

and then we have

a red and black wire

going from those two rails

to the 5V

and GND signals

on the breadboard.

When I change

the position of the potentiometer

corresponding voltage is

coming out of this wire

and going into the analog input zero

and that data

gets converted into a number

that gets sent down the USB cable

over to the computer

and then to the processing code.

We will start with the Arduino code,

so here you will see

that the code is very simple.

In the setup()function

we have a Serial.begin() command

with 9600 as a parameter.

This opens up

the serial communication between

the Arduino and the computer

at the speed of 9600 bits

per second.

Then in the main loop

we read,

from the analog input zero,

using analogRead(A0).

The value that we read

is between 0 and 1023

and we divide that by 4.

This is because Serial.write(),

which is the function

we are using to send the data

over to the computer

only accepts bytes

that have a value

that goes between 0 and 255

as a maximum value.

So, by dividing the result of "analog read"

by 4 we go from a value

that goes between 0 and 1023

to a value that goes from 0 to 255.

Serial.write() sends the data

from the Arduino onto the cable

over to the computer.

After that we've the delay of

33ms just to avoid

overloading the serial communication

with too much data that can actually

create some problems

on some slower computers.

Once the data

is reaching the computer,

then we have to explore

what the processing code

is doing in order to read that data

and visualize it

So, switching over to the processing code.

At the beginning we have this "import"

statement that imports

the library "prossesing.serial

this one

is the twin library of

our Serial.begin()

a serial library on our Arduino

There is a corresponding serial library

in processing that we are using

to open the communication and

read the data from the board

Then we have an object called

"Serial" that defines the serial port

we want to use to communicate

with the Arduino

And then we define a "PImage" object

called logo

that will contain the logo image

that we want to tweak.

Finally, we have an integer value

called "bgcolor"

that starts at 0

and that defines the color

of the background.

Let's look at the setup() function.

At the beginning

we use colorMode(HSB)

to define that the colors

that we are going to specify later,

are using this HSB convention,

and you can read more about this

in the processing documentation.

Then,

we use the loadImage() function

to load the "logo.png" file

into the "logo" object.

Then, the size() function

defines the size

of the processing output window,

that is going to be the same as the size

of the Arduino logo.

Then here,

there is a tricky part.

There's a println() statement

that will print a list

of all the serial ports

that are present

on your computer.

This is because

we need to know the name

of the serial port

in order to open the correct one.

Now, for a strange number of reasons,

on a Mac,

the Arduino board port

is always the first one on the list.

So, if you look at the code

we have here,

my port is defined

as a new serial object

that picks the element zero

in the list of ports,

so the first port in the list.

So, on Mac and Linux

this generally works out of the box,

while on windows

we get a list of

COM1, COM5, COM3, COM19, etc...

The actual COM ports

you get on the computer

change depending on your computer,

on where the Arduino is plugged in

and a number of others factors.

You will have to use

the output of Serial.list()

and what you see

at the bottom of the screen

on processing to determinate

witch one is the port

that you need to use,

and then you change in your code,

you change the 0 here,

that I'm highlighting,

with the number of the port

from the list that corresponds

to your Arduino.

After you have done that

the processing code is configured

in order to talk to the Arduino

and we can then,

look at what happens in the loop.

In the loop we start

by setting the background to white,

by doing background(255),

that cleans the window

at the beginning of each frame,