This lab helps us to see how serial communication looks in the web browser.

To begin we prepare a breadboard by connecting the potentiometer to the analog pin A0:


Then program Arduino to read the pot (notice that we’re reading the binary data because of Serial.write):

Screen Shot 2015-10-12 at 15.08.52

Program p5.js to show the list of available ports (we’ll get /dev/cu.usbmodem1421):

Screen Shot 2015-10-12 at 15.26.05

Add list of serial events to p5.js code (here you see console giving me “sensorvalue: undefined”, which is not true. It runs well in the browser — assuming p5 has a bug):

Screen Shot 2015-10-12 at 16.05.42

After we do that, we can graph out different sensor values using p5.js. It’s exactly the same what we see in Arduino serial monitor, only shown in graph. The first picture shows binary data and the second on ASCII.

Screen Shot 2015-10-12 at 16.16.27 Screen Shot 2015-10-12 at 16.22.32


  1. List of serial events: which one to use when? Or should we have all in the code by default?
  2. Do I need this long code every time? In other words: how much needs to be remembered? If I get it right, what’s basically changing are functions, setup, draw and serialEvent and others remain the same all the time?
  3. I get “undefined” when running code in p5 browser, whereas all is good when I run it in Google Chrome, is it just p5 bug?
  4. “See if you can modify the Arduino sketch and the P5.js sketch to exchange a potentiometer value that spans the whole range from 0 to 1023.” — how exactly would that be?
  5. Update | wed Oct8: I feel like I would appreciate going once again through all the functions to entirely understand why each one is necessary. I say this because when I did the application homework, I just pasted it without really getting why I need it (few I get, but I wouldn’t remember, unless I repeat it many times).

Leave a Reply

Your email address will not be published. Required fields are marked *