Group Members: Shamsa Alremeithi and Maliha
Exercise 1
For this exercise, we had connected a potentiometer to the Arduino by connecting the middle pin to analog pin A1, and the other two pins to 5V and GND. we had written a simple Arduino code to read the analog value from the potentiometer and map it to a range of 0 to 400, which was then sent to the computer through the serial port. With p5.js and the p5.webserial library, a circle moves left to right across the screen based on the potentiometer’s position. we also included “Connect” and “Disconnect” buttons to control the serial connection from the browser with ease.
Arduino Code:
// Read the analog value from pin A1 (0 to 1023)
int potentiometer = analogRead(A1);
// Map the raw potentiometer value to a new range (0 to 400) for use in p5.js
int mappedPotValue = map(potentiometer, 0, 1023, 0, 400);
Serial.println(mappedPotValue);
void setup() {
Serial.begin(9600);
}
void loop() {
// Read the analog value from pin A1 (0 to 1023)
int potentiometer = analogRead(A1);
// Map the raw potentiometer value to a new range (0 to 400) for use in p5.js
int mappedPotValue = map(potentiometer, 0, 1023, 0, 400);
Serial.println(mappedPotValue);
delay(100);
}
void setup() {
Serial.begin(9600);
}
void loop() {
// Read the analog value from pin A1 (0 to 1023)
int potentiometer = analogRead(A1);
// Map the raw potentiometer value to a new range (0 to 400) for use in p5.js
int mappedPotValue = map(potentiometer, 0, 1023, 0, 400);
Serial.println(mappedPotValue);
delay(100);
}
p5.js Code:
// Create a new Web Serial port instance using p5.webserial
// If a port was previously used, auto-connect to it
let usedPorts = usedSerialPorts();
if (usedPorts.length > 0) {
port.open(usedPorts[0], baudrate);
// Create the Connect button and open the port when clicked
connectBtn = createButton("Connect to Serial");
connectBtn.position(10, 10);
connectBtn.mousePressed(() => {
port.open(baudrate); // Opens a serial connection using the chosen baud rate
// Create the Disconnect button to close the serial port
disconnectBtn = createButton("Disconnect");
disconnectBtn.position(150, 10);
disconnectBtn.mousePressed(() => {
port.close(); // closes the serial connection
// Clear screen and show "Disconnected" message
textAlign(CENTER, CENTER);
text("Disconnected.", width / 2, height / 2);
//"\n", signaling the end of one complete piece of data after sending each number.
let str = port.readUntil("\n");
// Convert the received string to an integer (e.g., mapped potentiometer value)
// Make sure x stays within the canvas width (safety measure)
x = constrain(x, 0, width);
let port;
let connectBtn;
let disconnectBtn;
let baudrate = 9600;
let isConnected = false;
function setup() {
createCanvas(400, 400);
background(220);
// Create a new Web Serial port instance using p5.webserial
port = createSerial();
// If a port was previously used, auto-connect to it
let usedPorts = usedSerialPorts();
if (usedPorts.length > 0) {
port.open(usedPorts[0], baudrate);
isConnected = true;
}
// Create the Connect button and open the port when clicked
connectBtn = createButton("Connect to Serial");
connectBtn.position(10, 10);
connectBtn.mousePressed(() => {
port.open(baudrate); // Opens a serial connection using the chosen baud rate
isConnected = true;
});
// Create the Disconnect button to close the serial port
disconnectBtn = createButton("Disconnect");
disconnectBtn.position(150, 10);
disconnectBtn.mousePressed(() => {
port.close(); // closes the serial connection
isConnected = false;
// Clear screen and show "Disconnected" message
background(255);
textAlign(CENTER, CENTER);
textSize(18);
fill(100);
text("Disconnected.", width / 2, height / 2);
});
}
function draw() {
if (isConnected) {
//"\n", signaling the end of one complete piece of data after sending each number.
let str = port.readUntil("\n");
if (str.length > 0) {
background("white");
// Convert the received string to an integer (e.g., mapped potentiometer value)
let x = int(str);
// Make sure x stays within the canvas width (safety measure)
x = constrain(x, 0, width);
ellipse(x, 200, 40, 40);
}
}
}
let port;
let connectBtn;
let disconnectBtn;
let baudrate = 9600;
let isConnected = false;
function setup() {
createCanvas(400, 400);
background(220);
// Create a new Web Serial port instance using p5.webserial
port = createSerial();
// If a port was previously used, auto-connect to it
let usedPorts = usedSerialPorts();
if (usedPorts.length > 0) {
port.open(usedPorts[0], baudrate);
isConnected = true;
}
// Create the Connect button and open the port when clicked
connectBtn = createButton("Connect to Serial");
connectBtn.position(10, 10);
connectBtn.mousePressed(() => {
port.open(baudrate); // Opens a serial connection using the chosen baud rate
isConnected = true;
});
// Create the Disconnect button to close the serial port
disconnectBtn = createButton("Disconnect");
disconnectBtn.position(150, 10);
disconnectBtn.mousePressed(() => {
port.close(); // closes the serial connection
isConnected = false;
// Clear screen and show "Disconnected" message
background(255);
textAlign(CENTER, CENTER);
textSize(18);
fill(100);
text("Disconnected.", width / 2, height / 2);
});
}
function draw() {
if (isConnected) {
//"\n", signaling the end of one complete piece of data after sending each number.
let str = port.readUntil("\n");
if (str.length > 0) {
background("white");
// Convert the received string to an integer (e.g., mapped potentiometer value)
let x = int(str);
// Make sure x stays within the canvas width (safety measure)
x = constrain(x, 0, width);
ellipse(x, 200, 40, 40);
}
}
}
Exercise 2
make something that controls the LED brightness from p5
p5.js interface:
Arduino Code:
int ledPin = 9; // PWM-capable pin to control LED brightness
Serial.begin(9600); // Start serial communication at 9600 baud rate
pinMode(ledPin, OUTPUT); // Set the LED pin as an output
if (Serial.available()) { // Check if data is available to read from serial
int brightness = Serial.parseInt(); // Read the integer value (brightness)
brightness = constrain(brightness, 0, 255); // Limit the value to the 0-255 range
analogWrite(ledPin, brightness); // Write the brightness value to the LED pin
int ledPin = 9; // PWM-capable pin to control LED brightness
void setup() {
Serial.begin(9600); // Start serial communication at 9600 baud rate
pinMode(ledPin, OUTPUT); // Set the LED pin as an output
}
void loop() {
if (Serial.available()) { // Check if data is available to read from serial
int brightness = Serial.parseInt(); // Read the integer value (brightness)
brightness = constrain(brightness, 0, 255); // Limit the value to the 0-255 range
analogWrite(ledPin, brightness); // Write the brightness value to the LED pin
}
}
int ledPin = 9; // PWM-capable pin to control LED brightness
void setup() {
Serial.begin(9600); // Start serial communication at 9600 baud rate
pinMode(ledPin, OUTPUT); // Set the LED pin as an output
}
void loop() {
if (Serial.available()) { // Check if data is available to read from serial
int brightness = Serial.parseInt(); // Read the integer value (brightness)
brightness = constrain(brightness, 0, 255); // Limit the value to the 0-255 range
analogWrite(ledPin, brightness); // Write the brightness value to the LED pin
}
}
This project creates a real-time visual and physical interface to control an LED’s brightness using a slider in a p5.js sketch. The brightness value is sent from the browser to an Arduino board via serial communication. As the user moves the slider, the LED’s intensity changes accordingly, both in the physical circuit and on-screen through a glowing animation and gauge ring. The interface also includes a connect/disconnect button for flexible hardware control.
Exercise 3
In this exercise, we took the gravity and wind example and instead connected it to the Arduino. We replaced the digital wind control with a potentiometer, allowing us to control the wind force by hand. Additionally, we used an LED to light up every time the ball hit the ground and is at rest.
Arduino Code:
int sensorValue = analogRead(potPin);
Serial.println(sensorValue);
if (Serial.available() > 0) {
char msg = Serial.read();
digitalWrite(ledPin, HIGH);
digitalWrite(ledPin, LOW);
while (Serial.available() > 0) Serial.read();
const int ledPin = 5;
const int potPin = A0;
void setup() {
Serial.begin(9600);
pinMode(ledPin, OUTPUT);
}
void loop() {
int sensorValue = analogRead(potPin);
Serial.println(sensorValue);
if (Serial.available() > 0) {
char msg = Serial.read();
if (msg == '1') {
digitalWrite(ledPin, HIGH);
}
else if (msg == '0') {
digitalWrite(ledPin, LOW);
}
while (Serial.available() > 0) Serial.read();
}
delay(50);
}
const int ledPin = 5;
const int potPin = A0;
void setup() {
Serial.begin(9600);
pinMode(ledPin, OUTPUT);
}
void loop() {
int sensorValue = analogRead(potPin);
Serial.println(sensorValue);
if (Serial.available() > 0) {
char msg = Serial.read();
if (msg == '1') {
digitalWrite(ledPin, HIGH);
}
else if (msg == '0') {
digitalWrite(ledPin, LOW);
}
while (Serial.available() > 0) Serial.read();
}
delay(50);
}
p5.js Code:
let position, velocity, acceleration, gravity, wind;
position = createVector(width / 2, 0);
velocity = createVector(0, 0);
acceleration = createVector(0, 0);
gravity = createVector(0, 0.5 * mass);
wind = createVector(0, 0);
let connectButton = createButton("Connect");
connectButton.position(10, 10);
connectButton.mousePressed(() => {
if (!port.opened()) port.open(baudrate);
let disconnectButton = createButton("Disconnect");
disconnectButton.position(100, 10);
disconnectButton.mousePressed(() => {
if (port.opened()) port.close();
let dropButton = createButton("Drop Ball");
dropButton.position(220, 10);
dropButton.mousePressed(dropBall);
velocity.add(acceleration);
ellipse(position.x, position.y, mass, mass);
if (position.y > height - mass / 2) {
position.y = height - mass / 2;
port.write("1\n"); // turn LED on
port.write("0\n"); // turn LED off
str = port.readUntil("\n");
function applyForce(force) {
let f = p5.Vector.div(force, mass);
function updateWind(val) {
wind.x = map(val, 0, 1023, -1, 1);
let port;
let baudrate = 9600;
let position, velocity, acceleration, gravity, wind;
let drag = 0.99;
let mass = 50;
let val = 0;
let str = "";
let hitGround = false;
function setup() {
createCanvas(640, 360);
noFill();
position = createVector(width / 2, 0);
velocity = createVector(0, 0);
acceleration = createVector(0, 0);
gravity = createVector(0, 0.5 * mass);
wind = createVector(0, 0);
port = createSerial();
let connectButton = createButton("Connect");
connectButton.position(10, 10);
connectButton.mousePressed(() => {
if (!port.opened()) port.open(baudrate);
});
let disconnectButton = createButton("Disconnect");
disconnectButton.position(100, 10);
disconnectButton.mousePressed(() => {
if (port.opened()) port.close();
});
let dropButton = createButton("Drop Ball");
dropButton.position(220, 10);
dropButton.mousePressed(dropBall);
}
function draw() {
background(255);
applyForce(gravity);
applyForce(wind);
velocity.add(acceleration);
velocity.mult(drag);
position.add(velocity);
acceleration.mult(0);
ellipse(position.x, position.y, mass, mass);
if (position.y > height - mass / 2) {
velocity.y *= -0.9;
position.y = height - mass / 2;
if (!hitGround) {
hitGround = true;
if (port.opened()) {
port.write("1\n"); // turn LED on
}
}
} else {
hitGround = false;
if (port.opened()) {
port.write("0\n"); // turn LED off
}
}
str = port.readUntil("\n");
val = int(str.trim());
if (!isNaN(val)) {
updateWind(val);
}
}
function applyForce(force) {
let f = p5.Vector.div(force, mass);
acceleration.add(f);
}
function updateWind(val) {
wind.x = map(val, 0, 1023, -1, 1);
}
function dropBall() {
// Reset ball to the top
position.y = 0;
velocity.set(0, 0);
acceleration.set(0, 0);
hitGround = false;
// Force LED off
if (port.opened()) {
port.write("0\n");
}
}
let port;
let baudrate = 9600;
let position, velocity, acceleration, gravity, wind;
let drag = 0.99;
let mass = 50;
let val = 0;
let str = "";
let hitGround = false;
function setup() {
createCanvas(640, 360);
noFill();
position = createVector(width / 2, 0);
velocity = createVector(0, 0);
acceleration = createVector(0, 0);
gravity = createVector(0, 0.5 * mass);
wind = createVector(0, 0);
port = createSerial();
let connectButton = createButton("Connect");
connectButton.position(10, 10);
connectButton.mousePressed(() => {
if (!port.opened()) port.open(baudrate);
});
let disconnectButton = createButton("Disconnect");
disconnectButton.position(100, 10);
disconnectButton.mousePressed(() => {
if (port.opened()) port.close();
});
let dropButton = createButton("Drop Ball");
dropButton.position(220, 10);
dropButton.mousePressed(dropBall);
}
function draw() {
background(255);
applyForce(gravity);
applyForce(wind);
velocity.add(acceleration);
velocity.mult(drag);
position.add(velocity);
acceleration.mult(0);
ellipse(position.x, position.y, mass, mass);
if (position.y > height - mass / 2) {
velocity.y *= -0.9;
position.y = height - mass / 2;
if (!hitGround) {
hitGround = true;
if (port.opened()) {
port.write("1\n"); // turn LED on
}
}
} else {
hitGround = false;
if (port.opened()) {
port.write("0\n"); // turn LED off
}
}
str = port.readUntil("\n");
val = int(str.trim());
if (!isNaN(val)) {
updateWind(val);
}
}
function applyForce(force) {
let f = p5.Vector.div(force, mass);
acceleration.add(f);
}
function updateWind(val) {
wind.x = map(val, 0, 1023, -1, 1);
}
function dropBall() {
// Reset ball to the top
position.y = 0;
velocity.set(0, 0);
acceleration.set(0, 0);
hitGround = false;
// Force LED off
if (port.opened()) {
port.write("0\n");
}
}
SchematiC

Video
Link: https://drive.google.com/file/d/1bVrW1jPjtYBfAijWJPNHeHTnERkzNfPb/view?usp=sharing