Exercise 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.
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:
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.
Make something that controls the LED brightness from p5.
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:
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.
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.
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:
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: