EXCERCISE 1: ARDUINO TO P5.JS COMMUNICATION
RESULT:
P5 CODE:
let sensorValue = 0; // Variable to store sensor data function setup() { createCanvas(640, 480); textSize(18); if (!serialActive) { setUpSerial(); // Start serial communication with Arduino } } function draw() { // Set the background to dark blue and purple hues based on the sensor value background(map(sensorValue, 0, 1023, 50, 75), 0, map(sensorValue, 0, 1023, 100, 150)); // Map the sensor value to control the ellipse's horizontal position let ellipseX = map(sensorValue, 0, 1023, 0, width); // Draw the ellipse in the middle of the screen fill(255); // White ellipse for contrast ellipse(ellipseX, height / 2, 50, 50); // Display connection status fill(255); // White text for readability if (!serialActive) { text("Press Space Bar to select Serial Port", 20, 30); } else { text("Connected", 20, 30); // Display the current sensor value text("Sensor Value = " + str(sensorValue), 20, 50); } } function keyPressed() { if (key === " ") { setUpSerial(); // Start the serial connection when the spacebar is pressed } } // This function is called by the web-serial library with each new line of data function readSerial(data) { if (data != null) { // Parse the sensor value from the Arduino sensorValue = int(trim(data)); } }
ARDUIN CODE:
int sensorPin = A0; // Sensor connected to A0 void setup() { Serial.begin(9600); // Start serial communication } void loop() { int sensorValue = analogRead(sensorPin); // Read sensor value Serial.println(sensorValue); // Send the value to p5.js delay(10); // Small delay to avoid overwhelming the serial buffer }
EXCERCISE 2: P5 TO ARDUINO COMMUNICATION
RESULT:
P5 CODE:
let brightness = 0; // Brightness value to send to Arduino function setup() { createCanvas(640, 480); textSize(18); // Check if serial is active and set it up if not if (!serialActive) { setUpSerial(); // Initialize serial communication } } function draw() { background(30); // Dark background fill(255); // White text text("Use the UP and DOWN arrows to control LED brightness", 20, 30); // Display the current brightness value text("Brightness: " + brightness, 20, 60); } function keyPressed() { if (keyCode === UP_ARROW) { // Increase brightness brightness = min(brightness + 10, 255); // Max brightness is 255 sendBrightness(); } else if (keyCode === DOWN_ARROW) { // Decrease brightness brightness = max(brightness - 10, 0); // Min brightness is 0 sendBrightness(); } else if (key === " ") { // Start serial connection when spacebar is pressed setUpSerial(); } } function sendBrightness() { if (writer) { // Send the brightness value to Arduino writer.write(brightness + "\n"); } else { console.error("Writer is not available. Please connect to the serial port."); } }
ARDUINO CODE:
int ledPin = 9; // LED connected to PWM pin 9 int brightness = 0; // Variable to store brightness value from p5.js void setup() { Serial.begin(9600); // Start serial communication pinMode(ledPin, OUTPUT); // Set LED pin as an output } void loop() { // Check if data is available to read if (Serial.available() > 0) { // Read the brightness value sent from p5.js brightness = Serial.parseInt(); // Constrain the brightness value to 0-255 brightness = constrain(brightness, 0, 255); // Set the LED brightness analogWrite(ledPin, brightness); } }
EXCERCISE 3: BI-DIRECTIONAL COMMUNICATION
RESULT:
TASK 3 VIDEO
P5 CODE:
let velocity; let gravity; let position; let acceleration; let wind; let drag = 0.99; let mass = 50; let sensorValue = 0; // Variable to store wind value from Arduino let windStrength = 0; // Wind force determined by the sensor 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); // Initialize serial communication if (!serialActive) { setUpSerial(); } } function draw() { background(255); // Apply gravity applyForce(gravity); // Apply wind (continuously updated from sensor) wind.x = map(sensorValue, 0, 1023, -2, 2); // Map sensor value to a stronger wind range applyForce(wind); // Update position and velocity velocity.add(acceleration); velocity.mult(drag); position.add(velocity); acceleration.mult(0); // Draw the ball ellipse(position.x, position.y, mass, mass); // Check for bounce if (position.y > height - mass / 2) { velocity.y *= -0.9; // A little dampening when hitting the bottom position.y = height - mass / 2; // Notify Arduino about the bounce sendBounce(); } } function applyForce(force) { // Newton's 2nd law: F = M * A let f = p5.Vector.div(force, mass); acceleration.add(f); } // Notify Arduino when the ball bounces function sendBounce() { if (writer) { writer.write('1\n'); // Send the bounce signal } } // Read wind control value from Arduino function readSerial(data) { if (data != null) { // Parse the sensor value directly into a variable for wind force sensorValue = int(trim(data)); } } // Handle serial setup (using the serial.js file) function keyPressed() { if (key === " ") { setUpSerial(); } }
ARDUINO CODE:
const int ledPin = 9; // LED connected to pin 9 const int sensorPin = A0; // Analog sensor for wind control int sensorValue = 0; // Variable to store sensor value from analog pin void setup() { Serial.begin(9600); // Start serial communication pinMode(ledPin, OUTPUT); // Set LED pin as output } void loop() { // Read the sensor value and send it to p5.js sensorValue = analogRead(sensorPin); Serial.println(sensorValue); // Check if a bounce signal is received if (Serial.available() > 0) { char command = Serial.read(); if (command == '1') { // Turn on the LED digitalWrite(ledPin, HIGH); delay(100); // Keep the LED on briefly digitalWrite(ledPin, LOW); // Turn off the LED } } }