Processing Language for Beginners in Arduino

Created on: 10 January 2022

Processing language for beginners in Arduino tutorial that explains and demonstrates how to communicate between an Arduino and computer. Processing is a language and programming environment based on the Java language. In this part of the Arduino tutorial for beginners, example program code is loaded to the Processing IDE. After this, the code from the example program is run. This results in an application that sends data to an Arduino board over the USB connection. A sketch on the Arduino board receives data from the application and reacts to it.

Part 5 of the Arduino Tutorial for Beginners

Complete the previous parts of this Arduino tutorial for beginners before continuing with this part. This part of the tutorial requires the Arduino IDE to already be installed and tested by programming an Arduino board. The previous tutorial parts cover these tasks.

Processing Language IDE and Application for Beginners in Arduino

The image below shows the Processing IDE with example code open on the left. When this example code is run, it produces the application at the right of the below image. This small application window running on a computer reacts to mouse movements. When the mouse cursor or pointer is moved over the gray square in the middle of the window, the on-board LED on the Arduino switches on. On the other hand, when the mouse cursor is moved off the gray square, the Arduino on-board LED switches off.

Get the Processing IDE

To follow this part of the Arduino tutorial for beginners, the Arduino IDE and the Processing IDE are both used. Before continuing, install the Processing IDE as explained next.

Download the Processing IDE

Go to the Processing language download page. After this, find the download for the computer and operating system that you have. There are downloads for Windows, Linux and Apple Mac. At the time of writing this tutorial, the latest stable release is version 3.5.4.

Click the appropriate download link. This starts the ZIP file download.

Install the Processing IDE

Double-click the ZIP file download. This opens the ZIP file. Drag and drop the Processing folder (for example a folder called processing-3.5.4) from the opened ZIP file to a convenient location. For example to the Desktop. That is all that is needed to install Processing.

The Processing Getting Started tutorial has alternate Processing IDE installation instructions.

Start using the Processing Language for Beginners in Arduino

Open the folder extracted to the Desktop or other location in the previous sub-section. Double-click the processing file in the folder to start the Processing IDE. This file is displayed as processing.exe on a Windows computer that has settings for hiding extensions of known file types disabled.

Open the Physical Pixel Arduino Example

Start the Arduino IDE. After this, open the PhysicalPixel example, as was done at the end of the previous part of this tutorial. Select File → Examples → 04.Communication → PhysicalPixel from the top Arduino IDE menu bar. Upload the PhysicalPixel sketch to the target Arduino Uno or MEGA 2560.

Copy and Paste the Processing Language Sketch Code

In the Arduino IDE, scroll down the PhysicalPixel example code. Below the PhysicalPixel code is a comment block that starts as follows.

/* Processing code for this example

Use the mouse to select everything below this comment, and up to the closing */ of the comment block. This code is followed by Max/MSP code in another comment block. Be sure not to select anything from this comment block.

Copy the selected code and paste it into the Processing IDE. This Processing code is one big comment at the bottom of the PhysicalPixel example in the Arduino IDE. Because it is a comment, the Arduino IDE does not try to compile it. When the code is copied to the Processing IDE, it is valid Processing code that runs in the Processing IDE. To make the above copying procedure absolutely clear, the code that is in the Processing IDE at this stage, looks as follows.

  // Mouse over serial

  // Demonstrates how to send data to the Arduino I/O board, in order to turn ON
  // a light if the mouse is over a square and turn it off if the mouse is not.

  // created 2003-4
  // based on examples by Casey Reas and Hernando Barragan
  // modified 30 Aug 2011
  // by Tom Igoe
  // This example code is in the public domain.

  import processing.serial.*;

  float boxX;
  float boxY;
  int boxSize = 20;
  boolean mouseOverBox = false;

  Serial port;

  void setup() {
    size(200, 200);
    boxX = width / 2.0;
    boxY = height / 2.0;
    rectMode(RADIUS);

    // List all the available serial ports in the output pane.
    // You will need to choose the port that the Arduino board is connected to
    // from this list. The first port in the list is port #0 and the third port
    // in the list is port #2.
    // if using Processing 2.1 or later, use Serial.printArray()
    println(Serial.list());

    // Open the port that the Arduino board is connected to (in this case #0)
    // Make sure to open the port at the same speed Arduino is using (9600bps)
    port = new Serial(this, Serial.list()[0], 9600);
  }

  void draw() {
    background(0);

    // Test if the cursor is over the box
    if (mouseX > boxX - boxSize && mouseX < boxX + boxSize &&
        mouseY > boxY - boxSize && mouseY < boxY + boxSize) {
      mouseOverBox = true;
      // draw a line around the box and change its color:
      stroke(255);
      fill(153);
      // send an 'H' to indicate mouse is over square:
      port.write('H');
    }
    else {
      // return the box to its inactive state:
      stroke(153);
      fill(153);
      // send an 'L' to turn the LED off:
      port.write('L');
      mouseOverBox = false;
    }

    // Draw the box
    rect(boxX, boxY, boxSize, boxSize);
  }

Run the Processing Language Application

Save the code pasted to the Processing IDE. Do this by using the Ctrl + S keyboard keys. Alternatively use File → Save from the top menu bar. Save it with any name that you like, for example Physical_Pixel.

Click the Processing Run button on the top toolbar to run the pasted Processing code. The image below shows the Processing Run button. After this, an application window containing a gray square opens. This is shown at the right of the image at the top of this page.

Test the Processing Language Application with Arduino

Before testing the application, first know that it may not work the first time. The reason for this follows with instructions on what to change. Move the mouse cursor over the gray square in the Processing application window. The Arduino on-board LED only lights up when the correct serial/USB port is selected in the Processing code. Move the cursor off the gray square to turn the LED off.

Change the Serial/USB Port when it Does Not Work

If there is only one serial/USB port on the computer (which is the Arduino board), the PhysicalPixel application should work. In the case when the LED does not light up after moving the mouse over the gray box in the application window, change the serial port in the application code. After running the PhysicalPixel Processing code for the first time, the serial ports on the computer are listed at the bottom of the Processing IDE. For example, the image below shows two COM ports found on a Window computer. The second COM port is the Arduino, so the application did not work the first time.

Close the small Processing application window. After this, look at the code that we pasted into the Processing IDE. Find the following line of code.

port = new Serial(this, Serial.list()[0], 9600);

The number in square brackets is the serial port list number. In the above code it is [0]. Each serial port displayed in the above image is assigned to the serial port list. In this list, numbering starts from 0. This means that COM1 in this example is [0] in the list. COM7, as seen in the image is [1]. In this example, the above line of code is changed so that [0] becomes [1]. The result is that COM7 is selected, which is the Arduino board. The above code therefore looks as follows after changing the serial port list number.

port = new Serial(this, Serial.list()[1], 9600);

If there are three ports listed at the bottom of the Processing IDE, then they are numbered [0], [1] and [2]. Change the number in the above code to select the Arduino port.

After changing the port list number, save the sketch. Afterwards, click the Processing Run button. Test the application again using the mouse cursor over the gray square in the application window.

How the Processing Language PhysicalPixel Example for Beginners Works

In the previous part of this tutorial, the PhysicalPixel code is used with the Arduino serial monitor. In that part of the tutorial the letter H is sent from the serial monitor to switch the LED on. The letter L is sent to switch the LED off. The PhysicalPixel Processing code does the same thing. When the mouse is moved over the gray square, it sends an H to the Arduino board. This causes the on-board LED to switch on. On the other hand, when the mouse cursor is moved off the gray square, the application sends an L. The result is that the on-board LED switches off.

In effect, the PhysicalPixel Processing application does what is manually done in the serial monitor window of the previous part of this tutorial. The application connects to the Arduino USB port instead of the serial monitor. In fact, with the PhysicalPixel Processing application connected to the Arduino, the serial monitor can’t be used. With the PhysicalPixel Processing application connected to the Arduino, an error message is displayed at the bottom of the Arduino IDE when connecting with the serial monitor. A ‘port busy’ error message is displayed.

Processing Language for Beginners in Arduino Conclusion

I hope that you enjoyed this demonstration of the Processing language for beginners. It shows that communications between an Arduino and computer are possible over a USB connection. It is possible to write any application to run on a computer and communicate with an Arduino board. Processing is just one way to write such computer applications. The result is that there are many possibilities and projects in which to use an Arduino this way. For example, to show the current air temperature on a computer. Measure the air temperature with a sensor connected to an Arduino. Then display the reading on a computer. Display the temperature in the serial monitor. Alternatively, display the temperature in a custom Processing application.

As an Amazon Associate I earn from qualifying purchases: