Tutorial: Serial Communication with Arduino and p5.js
How to use p5.js to read from Arduino, and write to Arduino demonstrated with building an awareness communication system
Overview
This tutorial will help you understand how to setup HTML/JavaScript pages (p5.js sketches) to communicate with microcontroller (Arduino). We will focus specifically on how to setup Arduino for sending information to browser-based app, how to setup p5.js so browser-based application can read serial input (sent by Arduino), and how to setup p5.js and Arduino, so the web app can control Arduino with serial output.
What this tutorial will (and will not) cover?
We will not cover basics about Arduino, circuits, or how to use code in p5.js from scratch. We will briefly talk about p5.js in the tutorial but focus more on serial communication aspect of using p5.js. However, we will provide some useful resources for learning Processing and p5.js at the end of the tutorial.
Project Scenario and Design
The example project we will use here is an awareness communication system, including a physical component, and a web application component. Considering a scenario where you and your friend are in two different cities, and you are both too busy to visit each other or making phone calls. You want some lightweight method to inform your friend about how you are. One design solution is this physical device, where you can change the brightness of an LED light with a knob to let your friend know how you are doing. The physical device has another LED light that visualizes your friend’s communication input. There is also a web app that shows both of your status in the browser. The following tutorial will first walk you through how to visualize your communication input (from Arduino) in the web app. Then we will move to how to communicate to your friend’s device from the web app (considering the scenario that you cannot bring the physical device with you, but you still want to communicate with your friend).
The design of this project is inspired by an interactive installation created by one of my favorite design technologists.
Part 0: Prepare the Development for p5.js and Arduino
To begin with this project, first we want to make sure that your computer is well prepared for coding with p5.js. We will also provide some background information about p5.js, and information behind how p5.js communicate with Arduino.
What is p5.js?
P5.js is a JavaScript library that follows the idea of “sketchbook for code”, which started by Processing, and is intended for artist, designers, technologists. Sketching is p5.js is similar as coding with HTML canvas, with simplified syntax. Moreover, there are a lot of p5.js addons libraries that make it easy to interact with HTML5 object (e.g., text, input, webcam, sound).
Because p5.js is web based, it is easier to setup, prototype, and testing in different scenarios and platforms (unlike Processing, which is Java based, relies on having a computer to support it). However, because it is a relatively new library, there might be cases where it doesn’t not have enough features you want to utilize, or lack of support for debugging. There might be cases when you want to leverage other JavaScript libraries for some designs.
You can learn more about Processing and p5.js here.
How does p5.js communicate with Arduino?
As the following diagram shows, we need to setup a layer between Arduino and p5.js to facilitate serial communication. In this tutorial, we will use the p5.js serialport library. There are other relatively new libraries for p5.js’s communicating with microcontroller (e.g., p5bots library). Because it is easier to setup the environment with this serialport library, we will use it for this tutorial.
Checklist before moving to Part 1
- Download and install the P5.serialcontrol app (which is a packaged application for running serial server on computer). When you run this program, it allows you to select the serial port for communication. You also have the option to run p5.serialserver in command line, which requires node.js environment.
- Download the p5.js codes here for starting the project. Since we will not go through details about p5.js, this package will help you catch up with the instructions in the tutorial.
- Have a text editor ready or using the online version for editing p5.js. Make sure you have all libraries included and properly linked in your index.html file.
Part 1: Prepare the Arduino Board for the System
First, let’s get the circuit ready for serial communication in the project. You will need the following parts for completing this project:
Breadboard x 1
Redboard or Arduino Uno x 1
LED with different colors x 2
Potentiometer x 1
Jumper Wires x 8
330Ω Resistor x 2
Assemble the circuit and upload sketch to Arduino
Wire your circuit following the digram. Basically we have two parallel circuits: one for reading the potentiometer (where we use A0 pin to sense the input from it), and one for controlling LED light (where we use ~9 pin to write output).
Then, copy paste the following code and upload to your Arduino board. So the board will read the input from potentiometer and map it to a certain brightness level for LED light, and then write this information to the light.
Things to notice in Part 1
- Make sure the potentiometer is properly been connected and can be read with the correct sensor pin identified in the codes (in the example, A0).
- Make sure you are using an analog pin to write to the LED light. Because we want to control the brightness of the LED light, we are using the analog pin for output. The analog pins are often identified with a ~ before the number (e.g., ~9, ~10, ~11).
What you should be able to do by completing Part 1
Part 2: (p5.js) Read from Arduino Board
Setup Arduino for serial communication
In order for serial communication with p5.js, we need to modify the sketch in the board, so it will write output to serial server that can be picked up by our web app.
The following code snippet provides changes you will need to make to your sketch from Part 1.
Run p5.js to listen to Arduino
Open the code package from previous part and run the application in the local server. You will need to modify the port variable for serial communication before running the app. You will be able to see both the number read in the monitor in the server app, as well as changes in the numbers from the web browser (p5.js sketch will look like the following screenshot).
Things to notice in Part 2
- Make sure the serial port variable is correctly identified in the code. You can access this port information with the application.
- Make sure you initialize the serial port communication in the Arduino sketch (line 4 in the gist).
What you should be able to do by completing Part 2
Part 3: (p5.js) Write to Arduino Board
Modify circuits to let p5.js control the board
Now we are at the scenario that we don’t want to carry the physical device but we still want to communicate with our friend with the system. In order to do this, we need to modify our board so it can pick up input from the web app. We are also adding a second LED to visualize the other side’s communication. Thus, we are adding another parallel circuit, with a second LED. Make sure this LED is connected to an analog pin (like pin ~10 in the example) as well (as we want to control the brightness of the light).
Then, modify the sketch with the following changes and upload to the board.
Modify p5.js for serial output
In order to control the LED light from the browser, we first need to add a controller for input in our web application (like a slider), and then, we need to make sure the changes in this controller is properly communicate with the Arduino board (i.e. the application is writing to serial port as it changes value). The following code snippet outlines the changes that needed for sketch.js file.
What you should be able to do by completing Part 3
Ending
Hopefully you enjoyed this tutorial and learned about serial communication in p5.js and Arduino! The p5.js sketch in this example is pretty simple and can be improved a lot (change colors, use different visualization for serial input, etc.) . Feel free to use this sketch to continue practicing coding with p5.js. The following section also provides some useful resources if you want to learn more about p5.js and Processing.
Here is the final code package for this project.
Thank you for reading this!
References and Other Useful Resources
Arduino References
Dim LED light, Potentiometer, BushButton
Serial Communication References
Serial Input to p5.js, Serial Output from p5.js
