Exercise 1.
p5 code:
let position;
let mass = 50;
let potValue = 0;
function setup() {
createCanvas(640, 360);
noFill();
// Initialize position of the ellipse
position = createVector(width / 2, height / 2);
}
function draw() {
background(255);
// Map potentiometer value to horizontal position
position.x = map(potValue, 0, 1023, 0, width);
// Keep the ellipse in the middle
ellipse(position.x, height / 2, mass, mass);
}
function keyPressed(){
if (key == " ") { //set up serial
setUpSerial();
}
}
function readSerial(value) {
potValue = int(value); // Parse the potentiometer value
}
Arduino Code:
void setup() {
Serial.begin(9600); // Start serial communication
}
void loop() {
int potValue = analogRead(A0); // Read the potentiometer value
Serial.println(potValue); // Send the value to p5.js
delay(10);
}
Exercise 2.
p5 code:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(225);
// brightness based on cursor's x position
let brightness = map(mouseX, 0, width, 0, 255);
brightness = constrain(brightness, 0, 255); // Ensure brightness stays within range
// Send brightness value to Arduino if serial is active
if (serialActive) {
writeSerial(`${brightness}\n`);
}
}
function keyPressed(){
if (key == " ") { //set up serial
setUpSerial();
}
}
function readSerial(value) {
potValue = int(value); // Parse the potentiometer value
}
Arduino Code:
int ledPin = 9;
int brightness = 0;
void setup() {
Serial.begin(9600); // Start serial communication
pinMode(ledPin, OUTPUT); //LED pin as output
}
void loop() {
if (Serial.available() > 0) {
// Read the incoming brightness value
brightness = Serial.parseInt();
brightness = constrain(brightness, 0, 255);
// Set the LED brightness
analogWrite(ledPin, brightness);
}
}
Exercise 3.
p5 code:
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let potValue = 0; // potentiometer value
let serialConnected = false;
let onGround = false; // whether ball is on the ground
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);
}
function draw() {
background(255);
if (!serialConnected) {
textAlign(CENTER, CENTER);
fill(0);
text("Press 'Space' key on the keyboard", width / 2, height / 2);
return;
}
applyForce(wind);
applyForce(gravity);
velocity.add(acceleration);
velocity.mult(drag);
position.add(velocity);
acceleration.mult(0);
// check for bounce on the x axis
if (position.x > width - mass / 2) {
if(!onGround){
position.x = width - mass / 2;
velocity.x *= -0.9;
}
}
else if (position.x < mass / 2) {
position.x = mass / 2;
velocity.x *= -0.9;
}
// check for bounce on the y axis
if (position.y > height - mass / 2) {
velocity.y *= -0.9;
position.y = height - mass / 2;
if (!onGround) {
sendBounceSignal();
onGround = true;
}
} else {
onGround = false;
}
wind.x = map(potValue, 0, 1023, -1, 1);
ellipse(position.x, position.y, mass, mass);
// boundaries on x axis
if (position.x > width - mass / 2 || position.x < mass / 2) {
velocity.x *= -0.9;
}
}
function applyForce(force) {
let f = p5.Vector.div(force, mass);
acceleration.add(f);
}
// bouncing signal to Arduino
function sendBounceSignal() {
if (serialActive) {
let sendToArduino = "1\n";
writeSerial(sendToArduino);
}
}
// receive data from Arduino
function readSerial(data) {
potValue = int(trim(data));
}
// initialize serial connection
function keyPressed() {
if (key == ' ') {
mass = random(10,100);
setUpSerial();
serialConnected = true;
}
}
function serialOpened() {
serialActive = true;
}
Arduino code:
const int potPin = A0;
const int ledPin = 13;
int potValue = 0;
bool ledState;
void setup() {
pinMode(ledPin, OUTPUT);
Serial.begin(9600);
}
void loop() {
// read the potentiometer value
potValue = analogRead(potPin);
// send potentiometer value to p5
Serial.println(potValue);
// check for data from p5
if (Serial.available() > 0) {
char received = Serial.read();
if (received == '1' && !ledState) {
// turn on the LED
digitalWrite(ledPin, HIGH);
ledState = true;
delay(100);
// turn off the LED
digitalWrite(ledPin, LOW);
}
else if (received != '1'){
ledState = false;
}
}
delay(50);
}
Video demonstration:
