Task 1:
We made it so that the program shows a circle on the screen that moves left and right when u rotate the potentiometer. The Arduino sends values to p5, and p5 reads those values through the serial port. As the potentiometer is rotated, the circle moves across the canvas to match its position. Theres also a button in the sketch that lets you connect to the Arduino manually.
p5.js
let serialPort; // connection to the arduino
let connectButton; // button to connect to arduino
let serialSpeed = 9600; // speed of communication between p5 and arduino
let xCircle = 300; // starting x position of circle
function setup() {
createCanvas(300, 300);
background(245);
serialPort = createSerial();
let previous = usedSerialPorts();
if (previous.length > 0) {
serialPort.open(previous[0], serialSpeed);
}
connectButton = createButton("Connect Arduino"); // connect button
connectButton.mousePressed(() => serialPort.open(serialSpeed)); // when clicked, connect
}
function draw() {
let data = serialPort.readUntil("\n"); // reads the data from arduino
if (data.length > 0) { // if data received
let sensorValue = int(data); // convert it to a number
xCircle = sensorValue; // use it to update the circles x position
}
background(245);
fill(255, 80, 100);
noStroke();
ellipse(xCircle, height/2, 35); // draw circle at new position
}
Arduino
void setup() {
Serial.begin(9600); // initialize serial communications
}
void loop() {
// read the input pin:
int potentiometer = analogRead(A1);
// remap the pot value to 0-300:
int mappedPotValue = map(potentiometer, 0, 1023, 0, 300);
Serial.println(mappedPotValue);
// slight delay to stabilize the ADC:
delay(1);
delay(100);
}
Task 2:
When the Arduino receives the letter ‘H’, it turns the LED on. When it receives the letter ‘L’, it turns the LED off. This lets you control the LED p5 by pressing the “Turn ON” or “Turn OFF” buttons.
p5.js
let serialPort;
let connectButton;
let serialSpeed = 9600;
function setup() {
createCanvas(300, 200);
background(240);
serialPort = createSerial(); // create serial port connection
let prev = usedSerialPorts(); // check if theres a previously used port
if (prev.length > 0) {
serialPort.open(prev[0], serialSpeed);
}
connectButton = createButton("Connect Arduino");
connectButton.position(10, 10); // button position
connectButton.mousePressed(() => serialPort.open(serialSpeed)); // open port when button clicked
let onBtn = createButton("Turn ON"); // button to turn the LED on
onBtn.position(10, 50); // position of ON button
onBtn.mousePressed(() => serialPort.write('H')); // Send 'H' to arduino when pressed
let offBtn = createButton("Turn OFF"); // button to turn the LED off
offBtn.position(90, 50); // position of OFF button
offBtn.mousePressed(() => serialPort.write('L')); // send 'L' to arduino when pressed
}
function draw() {
}
Arduino
void setup() {
pinMode(9, OUTPUT); // LED on pin 9
Serial.begin(9600); // start serial communication
}
void loop() {
if (Serial.available()) {
char c = Serial.read();
if (c == 'H') {
digitalWrite(9, HIGH); // turn LED on
}
else if (c == 'L') {
digitalWrite(9, LOW); // turn LED off
}
}
}
Task 3:
We used serialPort to read the sensor value and mapped it to wind force. To light up the LED only once per bounce, we added a boolean flag (ledTriggered). When the ball hits the ground, it sends a signal like ‘H’ to the Arduino to turn on the LED and ‘L’ to turn it off.
p5.js
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let serial;
let connectBtn;
let ledTriggered = 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);
// setup serial connection
serial = createSerial();
let previous = usedSerialPorts();
if (previous.length > 0) {
serial.open(previous[0], 9600);
}
connectBtn = createButton("Connect to Arduino");
connectBtn.position(10, height + 10); // button position
connectBtn.mousePressed(() => serial.open(9600));
}
function draw() {
background(255);
// check if we received any data
let sensorData = serial.readUntil("\n");
if (sensorData.length > 0) {
// convert string to an integer after trimming spaces or newline
let analogVal = int(sensorData.trim());
let windForce = map(analogVal, 0, 1023, -1, 1);
wind.x = windForce; // horizontal wind force
}
applyForce(wind);
applyForce(gravity);
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; // A little dampening when hitting the bottom
position.y = height - mass / 2;
if (!ledTriggered) {
serial.write("1\n"); // trigger arduino LED
ledTriggered = true;
}
} else {
ledTriggered = false;
}
}
function applyForce(force) {
// Newton's 2nd law: F = M * A
// or A = F / M
let f = p5.Vector.div(force, mass);
acceleration.add(f);
}
function keyPressed() {
if (key === ' ') {
mass = random(15, 80);
position.y = -mass;
velocity.mult(0);
}
}
Arduino
int ledPin = 5;
void setup() {
Serial.begin(9600);
pinMode(ledPin, OUTPUT);
}
void loop() {
// send sensor value to p5.js
int sensor = analogRead(A1);
Serial.println(sensor);
delay(100);
// check for '1' from p5 to trigger LED
if (Serial.available()) {
char c = Serial.read();
if (c == '1') {
digitalWrite(ledPin, HIGH);
delay(100);
digitalWrite(ledPin, LOW);
}
}
}
