ARDUINO ↔ P5.JS

Week 07 - 10/19/2022

Serial Output to p5.js | p5.serialcontrol

Being able to connect Arduino to p5.js is fun and versatile. This opens up almost unlimited ways and possibilities to approach different projects and make something playful in both open-source ends.

In this lab, p5.serialcontrol is used to connect Arduino with p5.js. A rectangle is drawn on the p5 canvas, and the goal is to rotate the rectangle by using a potentiometer on the breadboard. Firstly, Arduino Nano 33 IoT needs to read the analog input from the potentiometer. Then, p5.serialcontrol translates the data to p5 sketch and then the number (0 - 1023) is mapped to degrees (0 - 360), in order to make the rectangle rotate. Below are the code examples for both Arduino IDE and p5.js.

// reference: 
// https://gist.github.com/shfitz/b78b412960fba668d08ccc84b9ee838d

// pin the pot is connected to
const int potPin = A0;

// variable to hold the value from the potentiometer
int potVal = 0; 

void setup() {
  Serial.begin(9600);
}

void loop() {
  // read the value of the pot and store it
  potVal = analogRead(potPin);

  // write the value out to the serial port
  Serial.println(potVal);
  
  // wait a bit for between readings
  delay(10);
}

Arduino:

let serial; // variable for the serial object
let latestData = "waiting for data"; // variable to hold the data

function setup() {
  createCanvas(windowWidth, windowHeight);
  // serial constructor
  serial = new p5.SerialPort();

  // serial port to use - *user will need to update port number*
  serial.open('/dev/tty.usbmodem101');

  // what to do when we get serial data
  serial.on('data', gotData);

}

// when data is received in the serial buffer

function gotData() {
  let currentString = serial.readLine(); // store the data in a variable
  trim(currentString); // get rid of whitespace
  if (!currentString) return; // if there's nothing in there, ignore it
  console.log(currentString); // print it out
  latestData = currentString; // save it to the global variable
}

function draw() {
  background(255, 255, 255);
  fill(0, 0, 0);
  text(latestData, 10, 10); // print the data to the sketch

  // in this example, we are reciving a value between 0 and 1023
  // and using that to rotate the square
  angleMode(DEGREES);
  let rotDeg = map(latestData, 0, 1023, 0 ,360);

  translate(width / 2, height / 2);
  rotate(rotDeg);
  rectMode(CENTER);
  rect(0, 0, 100, 100);
}

p5.js: