1. Make something that uses only one sensor on arduino and makes the ellipse in p5 move on the horizontal axis, in the middle of the screen, and nothing on arduino is controlled by p5
For this project, I used a potentiometer connected to the Arduino to send its readings to a p5.js sketch via serial communication. The position of the ellipse on the screen will correspond to the potentiometer’s position.
Arduino Code:
#include <Arduino.h>
void setup() {
Serial.begin(9600);
}
void loop() {
int sensorValue = analogRead(A0); // Read the potentiometer
Serial.println(sensorValue); // Send the value to the serial port
delay(50); // Delay for stability
}
p5.js Code:
let serial;
let latestData = 0;
function setup() {
createCanvas(640, 360);
serial = new p5.SerialPort();
serial.on('data', gotData);
serial.open('/dev/tty.usbmodem11101');
}
function draw() {
background(255);
let sensorValue = map(latestData, 0, 1023, 0, width);
ellipse(sensorValue, height / 2, 50, 50);
}
function gotData() {
let currentString = serial.readLine();
trim(currentString);
if (!currentString) return;
latestData = parseInt(currentString);
}
2. Make something that controls the LED brightness from p5
To control an LED’s brightness from p5.js sketch, this setup will use a graphical slider in the p5.js sketch to send brightness values to the Arduino, which in turn will adjust the brightness of the LED accordingly.
Arduino Code:
#include
const int ledPin = 9;
void setup() {
pinMode(ledPin, OUTPUT);
Serial.begin(9600);
}
void loop() {
if (Serial.available()) {
int brightness = Serial.parseInt();
if (Serial.read() == '\n') {
analogWrite(ledPin, brightness);
}
}
}
p5.js Code:
let serial;
let slider;
function setup() {
createCanvas(400, 300);
serial = new p5.SerialPort();
serial.on('open', onSerialOpen);
serial.on('error', onSerialError);
serial.open('/dev/tty.usbmodem11101');
//Create a slider from 0 to 255 (LED brightness range)
slider = createSlider(0, 255, 127);
slider.position(10, 10);
slider.style('width', '380px');
}
function draw() {
background(102);
let val = slider.value();
serial.write(val + '\n');
fill(255);
noStroke();
text("LED Brightness: " + val, 10, 50);
}
function onSerialOpen() {
console.log('Serial Port is open');
}
function onSerialError(err) {
console.log('Something went wrong with the serial port. ' + err);
}
3. Take the gravity wind example and make it so every time the ball bounces one led lights up and then turns off, and you can control the wind from one analog sensor
For this, the wind force is controlled by a potentiometer connected to the Arduino, allowing the user to influence the ball’s horizontal movement by adjusting the potentiometer. And every time the ball bounces off the bottom of the canvas, an LED connected to the Arduino lights up briefly as a visual indicator of the bounce.
Arduino Code:
#include
const int ledPin = 13;
const int potPin = A0;
void setup() {
pinMode(ledPin, OUTPUT);
Serial.begin(9600);
}
void loop() {
int potValue = analogRead(potPin);
Serial.println(potValue);
if (Serial.available()) {
char command = Serial.read();
if (command == '1') {
digitalWrite(ledPin, HIGH);
delay(100);
digitalWrite(ledPin, LOW);
}
}
delay(10);
}
p5.js Code:
let serial;
let position, velocity, acceleration, gravity;
let wind = 0;
let drag = 0.99;
let mass = 50;
function setup() {
createCanvas(640, 360);
serial = new p5.SerialPort();
serial.on('data', serialEvent);
serial.open('/dev/tty.usbmodem11101');
position = createVector(width / 2, 50);
velocity = createVector(0, 0);
acceleration = createVector(0, 0);
gravity = createVector(0, 0.1 * mass);
}
function draw() {
background(220);
applyForce(createVector(wind, 0));
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;
position.y = height - mass / 2;
serial.write('1\n');
} else {
serial.write('0\n');
}
}
function applyForce(force) {
let f = p5.Vector.div(force, mass);
acceleration.add(f);
}
function serialEvent() {
let data = serial.readStringUntil('\n').trim();
if (data !== '') {
let analogVal = int(data); // Convert the received string to an integer
wind = map(analogVal, 0, 1023, -5, 5); // Map the value to a suitable range for wind
}
}
Challenges:
As I had to do this solo while other people did in groups, I had some disadvantages of course – by not having another perspective of “why’s this not working”.
The first one was rather easy, thought I’m not sure if we’re supposed to show the values on the serial monitor in the video. The second one was quite tricky for me at first – I had taken a different approach where the brightness of the LED was supposed to increase while I move the cursor horizontally on screen from left to right with a ball on screen which when white the LED would turn off and when getting filled with darker shades the brightness of the LED will also increase. But that wasn’t working well as the LED would turn on and off randomly so I took the slider approach instead which was better and clearer to see.
For the third one, as it took input from p5 to show output to Arduino and vice versa – it took a bit of understanding to implement it. First I did one where the ball bounces vertically and the LED will turn on and off with every bounce – as instructed. And you could push the ball to either left or right using the potentiometer. But the one I submitted I found it better – it can bounce towards left or right depending on which side you turn the potentiometer – even if it starts at one side you can change the way while it’s bouncing and the LED also works fine. Overall, it was a great experience doing it by myself to learn better about serial communication.
