Week 11: Serial Communication (Mariam and Mohammed)

Exercise 1: Arduino to P5 Communication

For this exercise, we used a potentiometer as the analog sensor. The potentiometer controls the ellipse’s position on the horizontal axis in the P5 sketch. When you turn it one way, the ellipse moves to the right, turning it the other way causes it to move left.

We added a little text at the top of the sketch that displays the sensor value. As the value increases, the ellipse moves to the right, and vice versa.

Demo

Full Code

Schematic

Arduino:

void loop() {

  potentiometerValue = analogRead(potentiometerPin);  // reads sensor value (0–1023)


  // Send value to p5 via serial as a line of text

  Serial.println(potentiometerValue);

  delay(20);

}

P5:

// read sensor value from Arduino
 let data = port.readUntil("\n");
 if (data.length > 0) {
   sensorValue = int(trim(data)); // convert from string to number
 }

 // map potentiometer range (0–1023) to screen width
 let x = map(sensorValue, 0, 1023, 0, width);
 let y = height / 2;

 //draws ellipse
 ellipse(x, y, 50, 50);

Exercise 2: P5 to Arduino Communication

Here, we used the keyboard arrow keys to change the LED brightness. Pressing the right arrow increases the brightness, and the left arrow decreases it.

Demo

Full Code

Schematic

Arduino:

void loop() {
  if (Serial.available() >= 0) {
    brightness = Serial.parseInt(); 
    brightness = constrain(brightness, 0, 255);
    analogWrite(ledPin, brightness); 
  }
}

P5:

function draw() {
  background(240);

  if (!port.opened()) {
    text("Disconnected - press button to connect", 20, 80);
  } else {
    text("Connected - use arrow keys to adjust brightness", 20, 80);
    text("Brightness: " + sendToArduino, 20, 120);

    // Send the brightness value to Arduino
    port.write(sendToArduino + "\n");
  }
}

function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    sendToArduino -= 10;
  } else if (keyCode === RIGHT_ARROW) {
    sendToArduino += 10;
  }

  sendToArduino = constrain(sendToArduino, 0, 255);
}

Exercise 3: Bi-directional Communication

For the Arduino to P5 communication, the potentiometer acts like the “wind” in the gravity/wind example. As you turn it, the ball gets pushed left or right depending on the mapped value.

For the P5 to Arduino communication, every time the ball hits the bottom and bounces, it triggers the LED to briefly turn on and then off, so the LED flashes in sync with each bounce.

Demo

Full Code

Schematic

Arduino:

void loop() {
  // Read analog sensor
  sensorValue = analogRead(sensorPin);
  // Send sensor value to P5
  Serial.println(sensorValue);
  
  // Check for bounce signal from P5
  if (Serial.available() > 0) {
    int bounce = Serial.read();
    if (bounce == 1) {
      digitalWrite(ledPin, HIGH);
      delay(100);
      digitalWrite(ledPin, LOW);
    }
  }

  delay(50);
}

P5:

// Read analog sensor value from Arduino
 if (port.available() > 0) {
   sensorValue = int(port.read());
   wind.x = map(sensorValue, 0, 1023, -2, 2); // Map sensor to wind strength
 }