Object: Entry 7

Serial Communications

The point of this lab was to create a connection between an Arduino and p5.js. p5.js is a JavaScript library based on Processing, a language built for easy sketch-coding. For this lab, we required a sensor, an actuator, an Arduino, and a computer. A lot of the lab’s challenge was in the computer installation and setup of the p5.js code.

Arduino to p5

After starting a new sketch in the p5.js web editor, we added p5.serialport.js which allowed us to access the ports from the browser.

On the arduino side, we created two sensors that then sent the data back to the computer via serial communications. I used a potentiometer and a light sensor. The values from these were sent back in ASCII as comma separated values.

The p5.js then parsed this and mapped them to a circle’s height and width.

Setup of circuit

https://editor.p5js.org/kerchevski/sketches/PXU6suwI4

Here the potentiometer is controlling the width of the circle. The potentiometer readings were rather jittery and with the frequency of the readings, the circle appears to jump sizes.

Arduino potentiometer controlling circle width

P5 to Arduino

For this part of the lab, neither the Arduino or the codes changed much. There was the change that the Arudino was reading instead of printing and had to do its own try/except error catching.

https://editor.p5js.org/kerchevski/sketches/hAMBEV3pD

R and G keys changing Arduino Neopixel setup