We connected the Arduino to the P5 sketch using a serial monitor. We did this by downloading a Javascript app from the P5 serial library which acts as an intermediary to allow p5 to access hardware via serial port: available here. This has both access to the javascript browser and connected Arduino. The code below is responsible for declaring variables, handling serial communication (events such as (connection, port listing, data reception, errors, port opening, and closing.), and storing data. To complete the connection we used the code below:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let serial;
let latestData = "waiting for data";
let ellipseX; // Variable to store the x-coordinate of the ellipse
functionsetup(){
createCanvas(400, 400);
serial = new p5.SerialPort();
serial.list();
serial.open("/dev/tty.usbmodem101");
serial.on('connected', serverConnected);
serial.on('list', gotList);
serial.on('data', gotData);
serial.on('error', gotError);
serial.on('open', gotOpen);
serial.on('close', gotClose);
}
functionserverConnected(){
print("Connected to Server");
}
functiongotList(thelist){
print("List of Serial Ports:");
for(let i = 0; i < thelist.length; i++){
print(i + " " + thelist[i]);
}
}
functiongotOpen(){
print("Serial Port is Open");
}
functiongotClose(){
print("Serial Port is Closed");
latestData = "Serial Port is Closed";
}
functiongotError(theerror){
print(theerror);
}
functiongotData(){
let currentString = serial.readLine();
trim(currentString);
if(!currentString)return;
console.log(currentString);
latestData = currentString;
}
let serial;
let latestData = "waiting for data";
let ellipseX; // Variable to store the x-coordinate of the ellipse
function setup() {
createCanvas(400, 400);
serial = new p5.SerialPort();
serial.list();
serial.open("/dev/tty.usbmodem101");
serial.on('connected', serverConnected);
serial.on('list', gotList);
serial.on('data', gotData);
serial.on('error', gotError);
serial.on('open', gotOpen);
serial.on('close', gotClose);
}
function serverConnected() {
print("Connected to Server");
}
function gotList(thelist) {
print("List of Serial Ports:");
for (let i = 0; i < thelist.length; i++) {
print(i + " " + thelist[i]);
}
}
function gotOpen() {
print("Serial Port is Open");
}
function gotClose() {
print("Serial Port is Closed");
latestData = "Serial Port is Closed";
}
function gotError(theerror) {
print(theerror);
}
function gotData() {
let currentString = serial.readLine();
trim(currentString);
if (!currentString) return;
console.log(currentString);
latestData = currentString;
}
let serial;
let latestData = "waiting for data";
let ellipseX; // Variable to store the x-coordinate of the ellipse
function setup() {
createCanvas(400, 400);
serial = new p5.SerialPort();
serial.list();
serial.open("/dev/tty.usbmodem101");
serial.on('connected', serverConnected);
serial.on('list', gotList);
serial.on('data', gotData);
serial.on('error', gotError);
serial.on('open', gotOpen);
serial.on('close', gotClose);
}
function serverConnected() {
print("Connected to Server");
}
function gotList(thelist) {
print("List of Serial Ports:");
for (let i = 0; i < thelist.length; i++) {
print(i + " " + thelist[i]);
}
}
function gotOpen() {
print("Serial Port is Open");
}
function gotClose() {
print("Serial Port is Closed");
latestData = "Serial Port is Closed";
}
function gotError(theerror) {
print(theerror);
}
function gotData() {
let currentString = serial.readLine();
trim(currentString);
if (!currentString) return;
console.log(currentString);
latestData = currentString;
}
The x-coordinate of the ellipse is specified by ellipseX, which is updated based on the sensor data in the gotData() function. This allows the ellipse to move horizontally across the canvas based on the sensor readings.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Update the x-coordinate of the ellipse based on the sensor data
// Draw the ellipse at the middle of the screen with dynamic x-coordinate
ellipse(ellipseX, height/2, 50, 50);
}
// Update the x-coordinate of the ellipse based on the sensor data
ellipseX = map(parseInt(latestData), 0, 1023, 0, width);
}
function draw() {
background(255);
fill(0);
// Draw the ellipse at the middle of the screen with dynamic x-coordinate
ellipse(ellipseX, height/2, 50, 50);
}
// Update the x-coordinate of the ellipse based on the sensor data
ellipseX = map(parseInt(latestData), 0, 1023, 0, width);
}
function draw() {
background(255);
fill(0);
// Draw the ellipse at the middle of the screen with dynamic x-coordinate
ellipse(ellipseX, height/2, 50, 50);
}
Demo:
Task 2: Use p5 to change LED brightness.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
et rVal = 0;
let alpha = 255;
let upArrow = 0;
let downArrow = 0;
functionsetup(){
createCanvas(640, 480);
textSize(18);
// Replaced Space bar with an actual Button for Serial Connection c
const connectButton = createButton('Connect to Serial');
connectButton.position(10, height + 30);
connectButton.mousePressed(setUpSerial); // Call setUpSerial when the button is pressed
}
functiondraw(){
background(map(rVal, 0, 1023, 0, 255), 255, 255);
fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));
if(serialActive){
text("Connected", 20, 30);
let message = upArrow + "," + downArrow + "\n";
writeSerial(message);
}else{
text("Press 'Connect to Serial' button", 20, 30);
}
text('rVal = ' + str(rVal), 20, 50);
text('alpha = ' + str(alpha), 20, 70);
}
// Decided on keyPressed as it is more straight forward
// Up Arrow Key turns the light on
functionkeyPressed(){
if(keyCode === UP_ARROW){
upArrow = 1;
}elseif(keyCode === DOWN_ARROW){
downArrow = 1;
}
}
// Down Key turns the light off
functionkeyReleased(){
if(keyCode === UP_ARROW){
upArrow = 0;
}elseif(keyCode === DOWN_ARROW){
downArrow = 0;
}
}
// This function will be called by the web-serial library
// with each new *line* of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
functionreadSerial(data){
////////////////////////////////////
//READ FROM ARDUINO HERE
////////////////////////////////////
if(data != null){
// make sure there is actually a message
// split the message
let fromArduino = split(trim(data), ",");
// if the right length, then proceed
if(fromArduino.length == 2){
// only store values here
// do everything with those values in the main draw loop
// We take the string we get from Arduino and explicitly
// convert it to a number by using int()
// e.g. "103" becomes 103
rVal = int(fromArduino[0]);
alpha = int(fromArduino[1]);
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
let sendToArduino = left + "," + right + "\n";
writeSerial(sendToArduino);
}
}
et rVal = 0;
let alpha = 255;
let upArrow = 0;
let downArrow = 0;
function setup() {
createCanvas(640, 480);
textSize(18);
// Replaced Space bar with an actual Button for Serial Connection c
const connectButton = createButton('Connect to Serial');
connectButton.position(10, height + 30);
connectButton.mousePressed(setUpSerial); // Call setUpSerial when the button is pressed
}
function draw() {
background(map(rVal, 0, 1023, 0, 255), 255, 255);
fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));
if (serialActive) {
text("Connected", 20, 30);
let message = upArrow + "," + downArrow + "\n";
writeSerial(message);
} else {
text("Press 'Connect to Serial' button", 20, 30);
}
text('rVal = ' + str(rVal), 20, 50);
text('alpha = ' + str(alpha), 20, 70);
}
// Decided on keyPressed as it is more straight forward
// Up Arrow Key turns the light on
function keyPressed() {
if (keyCode === UP_ARROW) {
upArrow = 1;
} else if (keyCode === DOWN_ARROW) {
downArrow = 1;
}
}
// Down Key turns the light off
function keyReleased() {
if (keyCode === UP_ARROW) {
upArrow = 0;
} else if (keyCode === DOWN_ARROW) {
downArrow = 0;
}
}
// This function will be called by the web-serial library
// with each new *line* of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
function readSerial(data) {
////////////////////////////////////
//READ FROM ARDUINO HERE
////////////////////////////////////
if (data != null) {
// make sure there is actually a message
// split the message
let fromArduino = split(trim(data), ",");
// if the right length, then proceed
if (fromArduino.length == 2) {
// only store values here
// do everything with those values in the main draw loop
// We take the string we get from Arduino and explicitly
// convert it to a number by using int()
// e.g. "103" becomes 103
rVal = int(fromArduino[0]);
alpha = int(fromArduino[1]);
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
let sendToArduino = left + "," + right + "\n";
writeSerial(sendToArduino);
}
}
et rVal = 0;
let alpha = 255;
let upArrow = 0;
let downArrow = 0;
function setup() {
createCanvas(640, 480);
textSize(18);
// Replaced Space bar with an actual Button for Serial Connection c
const connectButton = createButton('Connect to Serial');
connectButton.position(10, height + 30);
connectButton.mousePressed(setUpSerial); // Call setUpSerial when the button is pressed
}
function draw() {
background(map(rVal, 0, 1023, 0, 255), 255, 255);
fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));
if (serialActive) {
text("Connected", 20, 30);
let message = upArrow + "," + downArrow + "\n";
writeSerial(message);
} else {
text("Press 'Connect to Serial' button", 20, 30);
}
text('rVal = ' + str(rVal), 20, 50);
text('alpha = ' + str(alpha), 20, 70);
}
// Decided on keyPressed as it is more straight forward
// Up Arrow Key turns the light on
function keyPressed() {
if (keyCode === UP_ARROW) {
upArrow = 1;
} else if (keyCode === DOWN_ARROW) {
downArrow = 1;
}
}
// Down Key turns the light off
function keyReleased() {
if (keyCode === UP_ARROW) {
upArrow = 0;
} else if (keyCode === DOWN_ARROW) {
downArrow = 0;
}
}
// This function will be called by the web-serial library
// with each new *line* of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
function readSerial(data) {
////////////////////////////////////
//READ FROM ARDUINO HERE
////////////////////////////////////
if (data != null) {
// make sure there is actually a message
// split the message
let fromArduino = split(trim(data), ",");
// if the right length, then proceed
if (fromArduino.length == 2) {
// only store values here
// do everything with those values in the main draw loop
// We take the string we get from Arduino and explicitly
// convert it to a number by using int()
// e.g. "103" becomes 103
rVal = int(fromArduino[0]);
alpha = int(fromArduino[1]);
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
let sendToArduino = left + "," + right + "\n";
writeSerial(sendToArduino);
}
}
Demo:
Task 3:
Code Snippet:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
if(!bounced){
bounced = true; // Update bounce state
}else{
bounced = false; // Reset bounce state
}
}else{
ledState = 0;
}
if (!bounced) {
bounced = true; // Update bounce state
} else {
bounced = false; // Reset bounce state
}
} else {
ledState = 0;
}
if (!bounced) {
bounced = true; // Update bounce state
} else {
bounced = false; // Reset bounce state
}
} else {
ledState = 0;
}