Subscribe To Our List

We help electronics hobbyists to create projects related to Micro-controllers. Join our newsletter to get access to new projects first.
Email address
Secure and Spam free...

In this tutorial, you will read about the Arduino Processing communication. We will connect Arduino to Processing through the serial communication. Firstly, we will send data from Arduino to processing and then we will send from processing to Arduino.

Processing is a language for creating graphics i.e. media art, virtual design. So, in this tutorial we will use Arduino Processing to make a simple example and in the future, we will make projects using the Arduino and Processing.

Required Components For Arduino Processing Tutorial

The components required for Arduino Processing tutorial are as following

Click to buy from amazon.

  • Arduino Uno
  • LED
  • 220 ohm resistor
  • Potentiometer (any value will work)

Sending Data from Arduino to Processing

In the first part, we will send data from Arduino to the processing and we will change the background color of processing’s serial monitor using the potentiometer.

The Arduino will read the value from the potentiometer from 0 to 1023 and then we will map these values to 0 – 255 because we only require values from 0 to 255 to change the color. The processing will then receive these values through the serial communication and then the background color will be changed according to the movement of potentiometer.

Circuit Diagram

The circuit diagram for Arduino Processing is as follows.Arduino Processing

Arduino Code

Copy this code and upload in the Arduino IDE.

int potentiometer_pin = A0;
int output;

void setup()
{
  Serial.begin(9600);
}

void loop()
{
  output = analogRead(potentiometer_pin);
  int new_output = map(output, 0, 1023, 0, 255);
  Serial.println(new_output);
  delay(50);
}

Code Explanation

First of all, we defined two variables to read from the potentiometer and to store the value.

int potentiometer_pin = A0;
int output;

In the setup() function, we started the serial communication at 9600 baud rate to communicate with the processing.

void setup()
{
  Serial.begin(9600);
}

In the loop() function, first we read the values from the potentiometer and then stored these values in the output variable. Then we map these values and again stored these values in the new variable. The serial.println() will send the output value to the processing.

void loop()
{
  output = analogRead(potentiometer_pin);
  int new_output = map(output, 0, 1023, 0, 255);
  Serial.println(new_output);
  delay(50);
}

Processing Code

Upload the code in the processing IDE and a window will come. Move the potentiometer and you will see the change in background color.

import processing.serial.*;
Serial get;
float background_color ;

void setup()
{
  size(500,500);
  get = new Serial(this, "COM3", 9600);
  get.bufferUntil('\n'); 
}

void draw()
{
  background(150,50,background_color);
}

void serialEvent (Serial get)
{
  background_color = float(get.readStringUntil('\n'));
}

 Code Explanation

First of all, we have added the library for the serial communication. No need to download the library, it is already present in processing. Then we declared a variable named get for serial communication. You can give it any other name. After that, we initialized a variable of float type.

import processing.serial.*;
Serial get;
float background_color ;

In the setup() function, we defined the size of the window that will open after uploading the code. The “new Serial(this, “COM3”, 9600)” command will set the com port and the baud rate. Set the com port according to your port and also set baud rate equal to the baud rate that you have set in the Arduino. The “bufferUntil(‘\n’)” will wait for the command to receive and it will change the background color of the window according to the command received.

void setup()
{
  size(500,500);
  get = new Serial(this, "COM3", 9600);
  get.bufferUntil('\n'); 
}

In the draw() function, we have given the code for the colors. The background color will change from pink to brown.

void draw()
{
  background(150,50,background_color);
  }

Sending data from processing to Arduino

In the second part, we will send the values from the processing to the Arduino. We will make the LED high or low according to the mouse click (left click or right click).

Circuit Diagram

The circuit diagram for Arduino Processing is as followsConnect arduino to processing

Arduino Code

int led_pin = 13;
char state;

void setup() {
pinMode(led_pin, OUTPUT);
Serial.begin(9600);
}

void loop(){
if(Serial.available() > 0) {
state = Serial.read();
if(state == '1'){
digitalWrite(led_pin, HIGH);
}
if(state == '0'){
digitalWrite(led_pin, LOW);
}
}
delay(50);
}

Code Explanation

First of all, we have initialized pin 12 for LED and then we have declared a ‘state’ named character in which we will store the state of the LED.

int led_pin = 12;
char state;

In the setup() function, we have defined the pin 12 as output pin and have started the serial communication at 9600 baud rate.

void setup() {
pinMode(led_pin, OUTPUT);
Serial.begin(9600);
}

In the loop() function, we will wait for the character to receive and if the character will be received, then we will compare it with ‘1’ and ‘0’. If the character will be ‘1’, then the LED will light up and if the state will be ‘0’, then the LED will go down.

void loop(){
if(Serial.available() > 0) {
state = Serial.read();
if(state == '1'){
digitalWrite(led_pin, HIGH);
}
if(state == '0'){
digitalWrite(led_pin, LOW);
}
}
delay(50);
}

Processing code

import processing.serial.*;
Serial senddata;

void setup(){
size(300, 300);
senddata = new Serial(this, "COM3", 9600);
}

void draw(){
if(mousePressed && (mouseButton == LEFT)){
senddata.write('1');
}
if (mousePressed && (mouseButton == RIGHT)){
senddata.write('0');
}
}

Code Explanation

First of all, we will add the library for serial communication and then we will declare a variable of type serial.

import processing.serial.*;
Serial senddata;

In the setup() function, the “size()” command will define the size of the window that will open when we will upload the code. Here we have defined the size of 300 height and 300 width. The “new Serial(this, “COM3”, 9600)” command will set the com port and the baud rate. Set the com port according to your port and also set baud rate equal to the baud rate that you have set in the Arduino.

void setup(){
size(300, 300);
senddata = new Serial(this, "COM3", 9600);
}

In the draw() function, if the left mouse button will be pressed, then it will send ‘1’ to the Arduino and if the right mouse button is pressed, then it will send 0 to the Arduino.

void draw(){
if(mousePressed && (mouseButton == LEFT)){
senddata.write('1');
}
if (mousePressed && (mouseButton == RIGHT)){
senddata.write('0');
}
}

Video



If you have any comments, feel free to ask us in the comment section.

JOIN OUR NEWSLETTER
We help electronics hobbyists to create projects related to Micro-controllers. Join our newsletter to get access to new projects first.
We hate spam. Your email address will not be sold or shared with anyone else.

Leave a Reply

Your email address will not be published.

Subscribe To Our List

We help electronics hobbyists to create projects related to Micro-controllers. Join our newsletter to get access to new projects first.
Email address
Secure and Spam free...
Skip to toolbar