Week 11 Production(Ling and Abdelrahman) – Introduction to Interactive Media

Conceptualization:

The central idea was to build a simple connection between physical and digital worlds.

Exercise 1: Single-Sensor and p5.js Movement
Using only one analog sensor (a potentiometer), the Arduino continuously reads values and streams them to p5.js over serial. p5.js interprets those readings and moves an ellipse along the horizontal axis, keeping it vertically centered.

// exercise 1
void setup() {
 Serial.begin(9600);
  // wait for p5 to connect
 while (Serial.available() <= 0) {
   Serial.println("0,0");
   delay(300);
 }
}
void loop() {
 // wait for data from p5
 while (Serial.available()) {
   digitalWrite(LED_BUILTIN, HIGH);
    Serial.read();     // read incoming
  
   int sensorValue = analogRead(A0); // read sensor
  
   Serial.println(sensorValue);   // send sensor value
 }
 digitalWrite(LED_BUILTIN, LOW);
}

P5js: https://editor.p5js.org/aka7951/sketches/alRawYdiF

Demo https://drive.google.com/file/d/1Morf2y7cxIAgYLHKVnitsadjr813cX4Z/view?usp=sharing

Exercise 2: LED Brightness Controlled by p5.js
Next, I reversed the flow. Instead of only reading from Arduino, I sent numerical values from p5.js back to the board so it could adjust LED brightness using PWM.

int ledPin = 9;


void setup() {
 Serial.begin(9600);
 pinMode(ledPin, OUTPUT);
 pinMode(LED_BUILTIN, OUTPUT);
  // Wait for p5 connection
 while (Serial.available() <= 0) {
   digitalWrite(LED_BUILTIN, HIGH);
   delay(300);
   digitalWrite(LED_BUILTIN, LOW);
   delay(300);
 }
}
void loop() {
 if (Serial.available() > 0) {
   int brightness = Serial.parseInt();  // Read brightness value from p5
   analogWrite(ledPin, brightness);     // Set LED brightness
  
   if (Serial.read() == '\n') {
     digitalWrite(LED_BUILTIN, LOW);
   }
 }
}

P5js: https://editor.p5js.org/aka7951/sketches/tQoRTseMj

Demo: https://drive.google.com/file/d/1rdLpd3JG87jDa9bJEWZWtLMIvA9Ub0Vg/view?usp=sharing

Exercise 3: Gravity + Wind Integration
Finally, I modified the p5.js gravity wind sketch. Each time the ball hits the “ground,” p5 sends a signal to Arduino, turning an LED on briefly before switching back off. Meanwhile, an analog sensor feeds continuous data to p5.js to influence the wind force acting on the falling ball.

int ledPin = 5;


void setup() {
 Serial.begin(9600);
 pinMode(ledPin, OUTPUT);
  // wait for p5 to connect
 while (Serial.available() <= 0) {
   digitalWrite(LED_BUILTIN, HIGH);
   Serial.println("0");
   delay(300);
   digitalWrite(LED_BUILTIN, LOW);
   delay(50);
 }
}
void loop() {
 while (Serial.available()) {   //check if there's data from p5
   digitalWrite(LED_BUILTIN, HIGH);
  
   int ledValue = Serial.parseInt();     //read LED value from p5 (0 or 1)
   if (Serial.read() == '\n') {     // check for newline character
     digitalWrite(ledPin, ledValue);
    
     int sensorValue = analogRead(A0);  // read potentiometer value
     Serial.println(sensorValue);  // send sensor value back to p5
   }
 }
 digitalWrite(LED_BUILTIN, LOW);
}

P5js: https://editor.p5js.org/aka7951/sketches/ze7W5LcOi

Demo: https://drive.google.com/file/d/1c0O6wrqE6aStFpg9cvYVOke0zxojdR4Z/view?usp=sharing

Reflection & Challenges:

This project helped me practice the bidirectional serial communication between Arduino and p5.js. One difficulty came from synchronizing input and output flows. In Exercises 2 and 3, sending and receiving serial data simultaneously often led to mixed or incomplete values being parsed. I learned to structure the serial communication carefully — ensuring each transmission ended with a newline and that both ends only read or wrote when data was available.

Leave a Reply Cancel reply