Exercise 1
Was to make the ellipse in p5.js move on the horizontal axis, in the middle of the screen, and nothing on Arduino was controlled by p5.js.
P5.js Code
let serial; // variable to hold an instance of the serialport library
let portName = "/dev/cu.usbmodem101"; // fill in your serial port name here
let xPos=0;
let yPos=0;
let onOff=0;
function setup() {
createCanvas(640, 480);
serial = new p5.SerialPort(); // make a new instance of the serialport library
serial.on("list", printList); // set a callback function for the serialport list event
serial.on("connected", serverConnected); // callback for connecting to the server
serial.on("open", portOpen); // callback for the port opening
serial.on("data", serialEvent); // callback for when new data arrives
serial.on("error", serialError); // callback for errors
serial.on("close", portClose); // callback for the port closing
serial.list(); // list the serial ports
serial.open(portName); // open a serial port
}
function draw() {
background(255);
ellipse(xPos, height/2, 50, 50); // draw the circle
}
// get the list of ports:
function printList(portList) {
// portList is an array of serial port names
for (let i = 0; i < portList.length; i++) {
// Display the list the console:
print(i + " " + portList[i]);
}
}
function serverConnected() {
print("connected to server.");
}
function portOpen() {
print("the serial port opened.");
}
function serialEvent() {
// read a string from the serial port
// until you get carriage return and newline:
let inString = serial.readLine();
//check to see that there's actually a string there:
if (inString.length > 0) {
xPos = map(inString, 0, 1023, 0, width);
}
serial.write(onOff);
}
function serialError(err) {
print("Something went wrong with the serial port. " + err);
}
function portClose() {
print("The serial port closed.");
}
Arduino Code
void setup() {
Serial.begin(9600);
pinMode(5, OUTPUT);
while (Serial.available() <= 0) {
Serial.println("0,0"); // send a starting message
delay(300); // wait 1/3 second
}
}
void loop() {
while (Serial.available() > 0) {
// read the incoming byte:
int inByte = Serial.read();
analogWrite(5, inByte);
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.println();
}
}
Exercise 2
In this exercise, we had to make something that controls the LED brightness from p5.js
P5.js Code
let serial; // variable to hold an instance of the serialport library
let portName = "/dev/cu.usbmodem101"; // fill in your serial port name here
let xPos=0;
let yPos=0;
let onOff=0;
let brness = 50;
let circlePos;
let counter = 0;
function setup() {
createCanvas(640, 480);
serial = new p5.SerialPort(); // make a new instance of the serialport library
serial.on("list", printList); // set a callback function for the serialport list event
serial.on("connected", serverConnected); // callback for connecting to the server
serial.on("open", portOpen); // callback for the port opening
serial.on("data", serialEvent); // callback for when new data arrives
serial.on("error", serialError); // callback for errors
serial.on("close", portClose); // callback for the port closing
serial.list(); // list the serial ports
serial.open(portName); // open a serial port
circlePos = width/6;
}
function draw() {
background(255);
fill(brness*counter, brness*counter, brness*counter);
ellipse(circlePos*(counter+1) - 50, height/2, 50, 50);
}
function keyPressed() {
if (keyCode === LEFT_ARROW) {
if (counter > 0) {
counter--;
}
else{
counter = 0;
}
} else if (keyCode === RIGHT_ARROW) {
if (counter < 5) {
counter++;
}
else{
counter = 5;
}
}
serial.write(counter);
}
// get the list of ports:
function printList(portList) {
// portList is an array of serial port names
for (let i = 0; i < portList.length; i++) {
// Display the list the console:
print(i + " " + portList[i]);
}
}
function serverConnected() {
print("connected to server.");
}
function portOpen() {
print("the serial port opened.");
}
function serialEvent() {
// read a string from the serial port
// until you get carriage return and newline:
let inString = serial.readLine();
//check to see that there's actually a string there:
if (inString.length > 0) {
xPos = map(inString, 0, 1023, 0, width);
}
serial.write(onOff);
}
function serialError(err) {
print("Something went wrong with the serial port. " + err);
}
function portClose() {
print("The serial port closed.");
}
Arduino Code
void setup() {
Serial.begin(9600);
pinMode(5, OUTPUT);
while (Serial.available() <= 0) {
Serial.println("0,0"); // send a starting message
delay(300); // wait 1/3 second
}
}
void loop() {
while (Serial.available() > 0) {
// read the incoming byte:
int inByte = Serial.read();
int brightness = inByte * 50;
analogWrite(5, brightness);
}
}
Demo
Exercise 3
For this last exercise, we had to use the gravity wind example and make it so every time the ball bounces one led lights up and then turns off, and we can control the wind from one of the analog sensors.
P5.js Code
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let hDampening;
let serial; // variable to hold an instance of the serialport library
let portName = "/dev/cu.usbmodem101"; // fill in your serial port name here
let xPos=0;
let yPos=0;
let onOff=0;
function setup() {
createCanvas(640, 360);
serial = new p5.SerialPort(); // make a new instance of the serialport library
serial.on("list", printList); // set a callback function for the serialport list event
serial.on("connected", serverConnected); // callback for connecting to the server
serial.on("open", portOpen); // callback for the port opening
serial.on("data", serialEvent); // callback for when new data arrives
serial.on("error", serialError); // callback for errors
serial.on("close", portClose); // callback for the port closing
serial.list(); // list the serial ports
serial.open(portName); // open a serial port
//initial setup
noFill();
position = createVector(width/2, 0);
velocity = createVector(0,0);
acceleration = createVector(0,0);
gravity = createVector(0, 0.5*mass);
wind = createVector(0,0);
hDampening=map(mass,15,80,.98,.96);
}
function draw() {
background(0);
if (!keyPressed){
//wind.x= 0;
console.log(xPos);
velocity.x*=hDampening;
}
wind.x = map(xPos, 0, width, -1, 1);
// if (xPos < width/2) {
// wind.x = -1;
// }
// else {
// wind.x = 1;
// }
applyForce(wind);
applyForce(gravity);
velocity.add(acceleration);
velocity.mult(drag);
position.add(velocity);
acceleration.mult(0);
fill(255);
ellipse(position.x,position.y,mass,mass);
// if (position.y > height-mass*(2/3)) {
// }
if (position.y > height-mass/2 - 40) {
if (velocity.y > 1) {
serial.write(255);
}
if (position.y > height-mass/2) {
velocity.y *= -0.9; // A little dampening when hitting the bottom
position.y = height-mass/2;
}
}
}
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 (keyCode==LEFT_ARROW){
wind.x=-1;
}
if (keyCode==RIGHT_ARROW){
wind.x=1;
}
if (key==' '){
mass=random(15,80);
position.y=-mass;
velocity.mult(0);
}
}
// get the list of ports:
function printList(portList) {
// portList is an array of serial port names
for (let i = 0; i < portList.length; i++) {
// Display the list the console:
print(i + " " + portList[i]);
}
}
function serverConnected() {
print("connected to server.");
}
function portOpen() {
print("the serial port opened.");
}
function serialEvent() {
// read a string from the serial port
// until you get carriage return and newline:
let inString = serial.readLine();
//xPos = map(inString, 0, 1023, 0, width);
//check to see that there's actually a string there:
if (inString.length > 0) {
xPos = map(inString, 0, 1023, 0, width);
}
serial.write(onOff);
}
function serialError(err) {
print("Something went wrong with the serial port. " + err);
}
function portClose() {
print("The serial port closed.");
}
Arduino Code
void setup() {
Serial.begin(9600);
pinMode(5, OUTPUT);
while (Serial.available() <= 0) {
Serial.println("0,0"); // send a starting message
delay(300); // wait 1/3 second
}
}
void loop() {
while (Serial.available() > 0) {
// read the incoming byte:
int inByte = Serial.read();
analogWrite(5, inByte);
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.println();
}
}
Demo