Skip to content

Getting Started with Serial and p5.js

Shawn Van Every edited this page Oct 11, 2017 · 5 revisions

Getting Started with Serial and p5.js

  1. Download the P5 Serial Control application. This application serves as a bridge between your arduino and your p5 sketch. For it to run you'll on a mac you either need to have "allow apps downloaded from anywhere" enabled or cntrl-click to open. More info on apple's help pages.

  2. Open the following example, connect your arduino, and get it running. (You can "duplicate" it in the p5 editor to save it into your account.) Make sure the editor is using http and not https.

    • p5.js code for reading analog value. Works with AnalogReadSerial Arduino sketch, found in the Arduino IDE, File menu, Examples-> Basics —> AnalogReadSerial. Turn a potentiometer from 0 - 1023, the ball moves from 0-255 on the screen.

The examples use the p5.serialport library. You can read documentation and find more examples.

You might notice the above examples use a new concept called a "callback." This is a concept we will examine in detail next week in ICM while looking at "DOM manipulation." A quick explanation for how this relates to serial communication is as follows:

There is an "event" each time your p5 sketch receives data from the serial port. You get to decide what function is executed for that event. In the case of the examples, that function is serialEvent().

// When there is data, run serialEvent  
serial.on('data', serialEvent);

The above line of code then requires you write a function called serialEvent() to handle the data.

function serialEvent() {
  // Your code for reading the data goes here.
}

If you start a new sketch or are adapting a previous sketch made in the p5 editor, you'll need to upload p5.serialport.js to your sketch.

As well as add the following line to the index.html file.

<script src="p5.serialport.js"></script>

The Pcomp site has much more in-depth serial information complete with a brand new video for a similar example!