Week 12 Assignment

Assignment 1:

For this assignment, it displays an ellipse whose horizontal position is controlled by a potentiometer connected to an Arduino board. When the space bar is pressed, it establishes a serial connection. The Arduino continuously reads the potentiometer value and sends it to the P5.js sketch via serial communication, allowing real-time adjustment of the ellipse’s position.

P5 code:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let ellipseHorizental;
function setup() {
createCanvas(640, 480);
textSize(18);
ellipseHorizental = width/2;
}
function draw() {
background(220);
// Draw ellipse with width based on potentiometer value
fill("green");
ellipse(ellipseHorizental, height / 2, 100, 150);
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
// Print the current potentiometer value
text('Potentiometer Value = ' + str(ellipseHorizental), 20, 50);
}
}
function keyPressed() {
if (key == " ") {
setUpSerial();
}
}
function readSerial(data) {
if (data != null) {
// convert the string to a number using int()
let fromArduino = split(trim(data), ",");
// Map the potentiometer value to the ellipse width
ellipseHorizental = map(int(fromArduino[0]), 0, 1023, 0, 640);
}
}
let ellipseHorizental; function setup() { createCanvas(640, 480); textSize(18); ellipseHorizental = width/2; } function draw() { background(220); // Draw ellipse with width based on potentiometer value fill("green"); ellipse(ellipseHorizental, height / 2, 100, 150); if (!serialActive) { text("Press Space Bar to select Serial Port", 20, 30); } else { text("Connected", 20, 30); // Print the current potentiometer value text('Potentiometer Value = ' + str(ellipseHorizental), 20, 50); } } function keyPressed() { if (key == " ") { setUpSerial(); } } function readSerial(data) { if (data != null) { // convert the string to a number using int() let fromArduino = split(trim(data), ","); // Map the potentiometer value to the ellipse width ellipseHorizental = map(int(fromArduino[0]), 0, 1023, 0, 640); } }
let ellipseHorizental;
function setup() {
  createCanvas(640, 480);
  textSize(18);
  ellipseHorizental = width/2; 
}
function draw() {
  background(220);
  // Draw ellipse with width based on potentiometer value
  fill("green");
  ellipse(ellipseHorizental, height / 2, 100, 150);
  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
    // Print the current potentiometer value
    text('Potentiometer Value = ' + str(ellipseHorizental), 20, 50);
  }
}
function keyPressed() {
  if (key == " ") {
    setUpSerial();
  }
}
function readSerial(data) {
  if (data != null) {
    // convert the string to a number using int()
    let fromArduino = split(trim(data), ",");
    // Map the potentiometer value to the ellipse width
    ellipseHorizental = map(int(fromArduino[0]), 0, 1023, 0, 640); 
  }
}

Arduino code:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const int potPin = A0; // Analog pin connected to the potentiometer
void setup() {
Serial.begin(9600);
}
void loop() {
int potValue = analogRead(potPin); // Read the value from the potentiometer
// Send the potentiometer value to p5.js
Serial.println(potValue);
}
const int potPin = A0; // Analog pin connected to the potentiometer void setup() { Serial.begin(9600); } void loop() { int potValue = analogRead(potPin); // Read the value from the potentiometer // Send the potentiometer value to p5.js Serial.println(potValue); }
const int potPin = A0;  // Analog pin connected to the potentiometer
void setup() {
  Serial.begin(9600);
}
void loop() {
    int potValue = analogRead(potPin);  // Read the value from the potentiometer
      // Send the potentiometer value to p5.js
      Serial.println(potValue);
}

Assignment 2:

For assignment 2 it establishes communication between a P5.js sketch and an Arduino board for controlling LED brightness. The P5.js sketch allows users to adjust brightness by dragging the mouse horizontally, with instructions displayed when the serial connection is active. The Arduino board continuously waits for serial data from the P5.js sketch, adjusting the LED brightness accordingly. During setup, a handshake process is initiated, blinking the built-in LED while waiting for serial data.

P5 code:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let brightness = 0; //variable for brightness control
function setup()
{
createCanvas(400, 400); //create canvas
}
function textDisplay() //display text in the starting
{
text("PRESS SPACE TO START SERIAL PORT", width/2 - 109, height/2 - 5);
}
function draw()
{
background(220); //grey background
if (serialActive) //if serial is active
{
text("connected", width/2 - 27, height/2 - 5); //tell the user that it is connected
text("Drag the mouse horizontally to change brighthess", width/2 - 130, height/2 + 15); //give instructions on how to control brightness
}
else
{
textDisplay(); //display instructions on how to start serial is not active
}
if (mouseX >= 0 && mouseX<=10){
brightness = 0;
}
else if (mouseX >= 3 && mouseX<=width/5){
brightness = 51;
}
else if(mouseX >= width/5 && mouseX<=2*width/5){
brightness = 102;
}
else if(mouseX >= 2*width/5 && mouseX<=3*width/5){
brightness = 153;
}
else if(mouseX >= 3*width/5 && mouseX<=4*width/5){
brightness = 204;
}
else if (mouseX>=4*width/5){
brightness = 255;
}
else{
brightness = 0;
}
}
function keyPressed() //built in function
{
if (key == " ") //if space is pressed then
{
setUpSerial(); //setup the serial
}
}
//callback function
function readSerial(data)
{
let sendToArduino = brightness + "\n"; //add the next line to dimness counter
writeSerial(sendToArduino); //write serial and send to arduino
}
let brightness = 0; //variable for brightness control function setup() { createCanvas(400, 400); //create canvas } function textDisplay() //display text in the starting { text("PRESS SPACE TO START SERIAL PORT", width/2 - 109, height/2 - 5); } function draw() { background(220); //grey background if (serialActive) //if serial is active { text("connected", width/2 - 27, height/2 - 5); //tell the user that it is connected text("Drag the mouse horizontally to change brighthess", width/2 - 130, height/2 + 15); //give instructions on how to control brightness } else { textDisplay(); //display instructions on how to start serial is not active } if (mouseX >= 0 && mouseX<=10){ brightness = 0; } else if (mouseX >= 3 && mouseX<=width/5){ brightness = 51; } else if(mouseX >= width/5 && mouseX<=2*width/5){ brightness = 102; } else if(mouseX >= 2*width/5 && mouseX<=3*width/5){ brightness = 153; } else if(mouseX >= 3*width/5 && mouseX<=4*width/5){ brightness = 204; } else if (mouseX>=4*width/5){ brightness = 255; } else{ brightness = 0; } } function keyPressed() //built in function { if (key == " ") //if space is pressed then { setUpSerial(); //setup the serial } } //callback function function readSerial(data) { let sendToArduino = brightness + "\n"; //add the next line to dimness counter writeSerial(sendToArduino); //write serial and send to arduino }
let brightness = 0; //variable for brightness control

function setup()
{
createCanvas(400, 400); //create canvas
}

function textDisplay() //display text in the starting
{
text("PRESS SPACE TO START SERIAL PORT", width/2 - 109, height/2 - 5);
}

function draw()
{

background(220); //grey background

if (serialActive) //if serial is active
{
text("connected", width/2 - 27, height/2 - 5); //tell the user that it is connected
text("Drag the mouse horizontally to change brighthess", width/2 - 130, height/2 + 15); //give instructions on how to control brightness
}
else
{
textDisplay(); //display instructions on how to start serial is not active
}
  
if (mouseX >= 0 && mouseX<=10){
  brightness = 0;
}
else if (mouseX >= 3 && mouseX<=width/5){
  brightness = 51;
}
else if(mouseX >= width/5 && mouseX<=2*width/5){
  brightness = 102;
}
else if(mouseX >= 2*width/5 && mouseX<=3*width/5){
  brightness = 153;
}
else if(mouseX >= 3*width/5 && mouseX<=4*width/5){
  brightness = 204;
}
else if (mouseX>=4*width/5){
  brightness = 255;
}
else{
  brightness = 0;
}
  
}

function keyPressed() //built in function
{
if (key == " ") //if space is pressed then
{
setUpSerial(); //setup the serial
}


}

//callback function
function readSerial(data)
{
let sendToArduino = brightness + "\n"; //add the next line to dimness counter
writeSerial(sendToArduino); //write serial and send to arduino
}

Arduino code:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
int LED = 5; // Digital pin connected to the LED
void setup() {
Serial.begin(9600);
pinMode(LED_BUILTIN, OUTPUT);
pinMode(LED, OUTPUT);
// start the handshake
while (Serial.available() <= 0) {
digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data
Serial.println("0"); // send a starting message
delay(300); // wait 1/3 second
digitalWrite(LED_BUILTIN, LOW);
delay(50);
}
}
void loop() {
// wait for data from p5 before doing something
while (Serial.available()) {
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
int brightnessValue = Serial.parseInt();
if (Serial.read() == '\n') {
delay(5);
Serial.println(brightnessValue);
}
analogWrite(LED, brightnessValue);
digitalWrite(LED_BUILTIN, LOW);
}
}
int LED = 5; // Digital pin connected to the LED void setup() { Serial.begin(9600); pinMode(LED_BUILTIN, OUTPUT); pinMode(LED, OUTPUT); // start the handshake while (Serial.available() <= 0) { digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data Serial.println("0"); // send a starting message delay(300); // wait 1/3 second digitalWrite(LED_BUILTIN, LOW); delay(50); } } void loop() { // wait for data from p5 before doing something while (Serial.available()) { digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data int brightnessValue = Serial.parseInt(); if (Serial.read() == '\n') { delay(5); Serial.println(brightnessValue); } analogWrite(LED, brightnessValue); digitalWrite(LED_BUILTIN, LOW); } }
int LED = 5; // Digital pin connected to the LED
void setup() {
  Serial.begin(9600);
  pinMode(LED_BUILTIN, OUTPUT);
  pinMode(LED, OUTPUT);
  // start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data
    Serial.println("0");             // send a starting message
    delay(300);                       // wait 1/3 second
    digitalWrite(LED_BUILTIN, LOW);
    delay(50);
  }
}
void loop() {
  // wait for data from p5 before doing something
  while (Serial.available()) {
    digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
    int brightnessValue = Serial.parseInt();
    if (Serial.read() == '\n') {
      delay(5);
      Serial.println(brightnessValue);
    }
    analogWrite(LED, brightnessValue);
    digitalWrite(LED_BUILTIN, LOW);
  }
}

Assignment 3:

For this assignment, we tried to establish communication between a P5.js sketch and an Arduino board (bi-directional). The P5.js sketch simulates a ball’s motion affected by wind and gravity, with its behavior controlled by sensor data received from the Arduino. The Arduino reads data from an ultrasonic sensor to determine distance, sending LED control signals back to the P5.js sketch based on the received distance data, influencing wind direction and LED turning on.

P5 code:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//declare variables
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let LEDvalue = 1401;
let goRight = 0;
let goLeft = 0;
let first
function setup() {
createCanvas(1000, 360); //create canvas
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 textDisplay()
{
text("PRESS SPACE TO START SERIAL PORT", width/2 - 109, height/2 - 5); //display the appropriate text in the start
}
function draw() {
background(255);
if (serialActive) //if the serial is active
{
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) //if the ball touches the bottom
{
velocity.y *= -0.9; // A little dampening when hitting the bottom
position.y = height-mass/2;
LEDvalue = 1401; //take LED value to be 1401 because we dont want the value (1) to be lurking in the serial and then affecting the wind values
}
else
{
LEDvalue = 1400; //when the LED is off
}
}
else
{
fill(0);
textDisplay();
}
}
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==' '){ //if space is pressed, then serial is set up
setUpSerial();
}
if (keyCode == DOWN_ARROW) //if down arrow is pressed
{
//mass etc is changed
mass=random(15,80);
position.y=-mass;
velocity.mult(0);
}
}
function readSerial(data) //call back function
{
let sendToArduino = LEDvalue + "\n"; //sends value of LED to Arduino with \n added
writeSerial(sendToArduino); //write to Arduino
if (data != null) //if the data is not null and something is received
{
console.log(data);
if (data > 1450) //if the distance is greater than 1450, then
{
wind.x = 1; //the ball/wind goes right
}
else if (data < 1350) //if the distance is less than 1350
{
wind.x = -1; //the ball/wind goes left
}
}
}
//declare variables let velocity; let gravity; let position; let acceleration; let wind; let drag = 0.99; let mass = 50; let LEDvalue = 1401; let goRight = 0; let goLeft = 0; let first function setup() { createCanvas(1000, 360); //create canvas 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 textDisplay() { text("PRESS SPACE TO START SERIAL PORT", width/2 - 109, height/2 - 5); //display the appropriate text in the start } function draw() { background(255); if (serialActive) //if the serial is active { 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) //if the ball touches the bottom { velocity.y *= -0.9; // A little dampening when hitting the bottom position.y = height-mass/2; LEDvalue = 1401; //take LED value to be 1401 because we dont want the value (1) to be lurking in the serial and then affecting the wind values } else { LEDvalue = 1400; //when the LED is off } } else { fill(0); textDisplay(); } } 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==' '){ //if space is pressed, then serial is set up setUpSerial(); } if (keyCode == DOWN_ARROW) //if down arrow is pressed { //mass etc is changed mass=random(15,80); position.y=-mass; velocity.mult(0); } } function readSerial(data) //call back function { let sendToArduino = LEDvalue + "\n"; //sends value of LED to Arduino with \n added writeSerial(sendToArduino); //write to Arduino if (data != null) //if the data is not null and something is received { console.log(data); if (data > 1450) //if the distance is greater than 1450, then { wind.x = 1; //the ball/wind goes right } else if (data < 1350) //if the distance is less than 1350 { wind.x = -1; //the ball/wind goes left } } }
//declare variables
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let LEDvalue = 1401;
let goRight = 0;
let goLeft = 0;
let first

function setup() {
createCanvas(1000, 360); //create canvas
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 textDisplay()
{
text("PRESS SPACE TO START SERIAL PORT", width/2 - 109, height/2 - 5); //display the appropriate text in the start
}

function draw() {
background(255);
if (serialActive) //if the serial is active
{
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) //if the ball touches the bottom
{
velocity.y *= -0.9; // A little dampening when hitting the bottom
position.y = height-mass/2;
LEDvalue = 1401; //take LED value to be 1401 because we dont want the value (1) to be lurking in the serial and then affecting the wind values

}
else
{
LEDvalue = 1400; //when the LED is off
}

}
else
{
fill(0);
textDisplay();
}
}

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==' '){ //if space is pressed, then serial is set up
setUpSerial();
}

if (keyCode == DOWN_ARROW) //if down arrow is pressed
{
//mass etc is changed
mass=random(15,80);
position.y=-mass;
velocity.mult(0);
}
}

function readSerial(data) //call back function
{
let sendToArduino = LEDvalue + "\n"; //sends value of LED to Arduino with \n added
writeSerial(sendToArduino); //write to Arduino

if (data != null) //if the data is not null and something is received
{
console.log(data);
if (data > 1450) //if the distance is greater than 1450, then
{
wind.x = 1; //the ball/wind goes right
}
else if (data < 1350) //if the distance is less than 1350
{
wind.x = -1; //the ball/wind goes left
}
}
}

 

Arduino code:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//declare variables
const int LED_PIN = 4;
int LEDvalue = 0; //will contain whether or not the LED should be on or off
int distance = 0; //will contain the distance by ultrasonic sensor
const int pingPin = 2; //Trigger Pin of Ultrasonic Sensor
const int echoPin = 3; //Echo Pin of Ultrasonic Sensor
void setup()
{
Serial.begin(9600); // Start serial communication at 9600 baud
pinMode(LED_PIN, OUTPUT); //pin mode is output
//Set the ultrasonic sensor pins as output and input respectively
pinMode(pingPin, OUTPUT);
pinMode(echoPin, INPUT);
while (Serial.available() <= 0)
{
Serial.println(1400); //connection establishment. 1400 so that the wind values do not change
}
}
void loop()
{
//wait for p5js
while (Serial.available())
{
sensorReading(); //reads data from the sensor
LEDvalue = Serial.parseInt(); //parsing from the serial written data from p5js
if (LEDvalue == 1400) //if the LED value is 1400
{
digitalWrite(LED_PIN, LOW); //then turn off the LED
}
else if (LEDvalue == 1401) //if the LED value is 1401
{
digitalWrite(LED_PIN, HIGH); //then turn on the LED
}
}
}
//Function to read the ultrasonic sensor and measure distance
void sensorReading()
{
//Send a short low pulse
digitalWrite(pingPin, LOW);
delay(2); //delay to avoid complications
digitalWrite(pingPin, HIGH); //sends a high pulse for 10 microseconds
delay(10);
digitalWrite(pingPin, LOW); //turn off the ping pin
distance = pulseIn(echoPin, HIGH); //Measure the duration of the ultrasonic pulse and calculate the distance
Serial.println(distance); //print the serial from distance
}
//declare variables const int LED_PIN = 4; int LEDvalue = 0; //will contain whether or not the LED should be on or off int distance = 0; //will contain the distance by ultrasonic sensor const int pingPin = 2; //Trigger Pin of Ultrasonic Sensor const int echoPin = 3; //Echo Pin of Ultrasonic Sensor void setup() { Serial.begin(9600); // Start serial communication at 9600 baud pinMode(LED_PIN, OUTPUT); //pin mode is output //Set the ultrasonic sensor pins as output and input respectively pinMode(pingPin, OUTPUT); pinMode(echoPin, INPUT); while (Serial.available() <= 0) { Serial.println(1400); //connection establishment. 1400 so that the wind values do not change } } void loop() { //wait for p5js while (Serial.available()) { sensorReading(); //reads data from the sensor LEDvalue = Serial.parseInt(); //parsing from the serial written data from p5js if (LEDvalue == 1400) //if the LED value is 1400 { digitalWrite(LED_PIN, LOW); //then turn off the LED } else if (LEDvalue == 1401) //if the LED value is 1401 { digitalWrite(LED_PIN, HIGH); //then turn on the LED } } } //Function to read the ultrasonic sensor and measure distance void sensorReading() { //Send a short low pulse digitalWrite(pingPin, LOW); delay(2); //delay to avoid complications digitalWrite(pingPin, HIGH); //sends a high pulse for 10 microseconds delay(10); digitalWrite(pingPin, LOW); //turn off the ping pin distance = pulseIn(echoPin, HIGH); //Measure the duration of the ultrasonic pulse and calculate the distance Serial.println(distance); //print the serial from distance }
//declare variables
const int LED_PIN = 4;
int LEDvalue = 0; //will contain whether or not the LED should be on or off
int distance = 0; //will contain the distance by ultrasonic sensor
const int pingPin = 2; //Trigger Pin of Ultrasonic Sensor
const int echoPin = 3; //Echo Pin of Ultrasonic Sensor

void setup()
{
Serial.begin(9600); // Start serial communication at 9600 baud

pinMode(LED_PIN, OUTPUT); //pin mode is output

//Set the ultrasonic sensor pins as output and input respectively
pinMode(pingPin, OUTPUT);
pinMode(echoPin, INPUT);

while (Serial.available() <= 0)
{
Serial.println(1400); //connection establishment. 1400 so that the wind values do not change
}
}

void loop()
{
//wait for p5js
while (Serial.available())
{
sensorReading(); //reads data from the sensor

LEDvalue = Serial.parseInt(); //parsing from the serial written data from p5js

if (LEDvalue == 1400) //if the LED value is 1400
{
digitalWrite(LED_PIN, LOW); //then turn off the LED
}
else if (LEDvalue == 1401) //if the LED value is 1401
{
digitalWrite(LED_PIN, HIGH); //then turn on the LED
}
}
}

//Function to read the ultrasonic sensor and measure distance
void sensorReading()
{
//Send a short low pulse
digitalWrite(pingPin, LOW);
delay(2); //delay to avoid complications
digitalWrite(pingPin, HIGH); //sends a high pulse for 10 microseconds
delay(10);
digitalWrite(pingPin, LOW); //turn off the ping pin
distance = pulseIn(echoPin, HIGH); //Measure the duration of the ultrasonic pulse and calculate the distance
Serial.println(distance); //print the serial from distance
}

Leave a Reply