let serial; // variable to hold an instance of the serialport library
let portName = "/dev/cu.usbmodem14101"; // 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
if (mouseIsPressed){
if(mouseX<=width/2)
onOff=1;
else
onOff=2;
}else{
onOff=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();
//check to see that there's actually a string there:
if (inString.length > 0) {
let sensors = split(inString, ","); // split the string on the commas
if (sensors.length == 2) {
// if there are three elements
xPos = map(sensors[0], 0, 1023, 0, width); // element 0 is the locH
yPos = map(sensors[1], 550, 250, 0, height); // element 1 is the locV
}
}
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(2, OUTPUT);
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();
switch (inByte) {
case 0:
digitalWrite(2, LOW);
digitalWrite(5, LOW);
break;
case 1:
digitalWrite(2, HIGH);
break;
case 2:
digitalWrite(5, HIGH);
break;
}
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.print(",");
sensorValue = analogRead(A1);
Serial.print(sensorValue);
Serial.println();
}
}
*/
Arduino:
void setup() {
Serial.begin(9600);
pinMode(2, OUTPUT);
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();
switch (inByte) {
case 0:
digitalWrite(2, LOW);
digitalWrite(5, LOW);
break;
case 1:
digitalWrite(2, HIGH);
break;
case 2:
digitalWrite(5, HIGH);
break;
}
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.print(",");
sensorValue = analogRead(A1);
Serial.print(sensorValue);
Serial.println();
}
}
Exercise 2:
P5.js:
let serial; // variable to hold an instance of the serialport library
let portName = "/dev/cu.usbmodem14101"; // 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);
xPos = mouseX;
mappedxPos = map(xPos, 0, 640, 0, 255);
print(mappedxPos);
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) {
let sensors = split(inString, ","); // split the string on the commas
/* if (sensors.length == 1) {
// if there are three elements
xPos = map(sensors[0], 0, 1023, 0, width); // element 0 is the locH
// element 1 is the locV
} */
}
serial.write(mappedxPos);
}
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(2, OUTPUT);
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();
switch (inByte) {
case 0:
digitalWrite(2, LOW);
digitalWrite(5, LOW);
break;
case 1:
digitalWrite(2, HIGH);
break;
case 2:
digitalWrite(5, HIGH);
break;
}
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.print(",");
sensorValue = analogRead(A1);
Serial.print(sensorValue);
Serial.println();
}
}
*/
Arduino:
void setup() {
Serial.begin(9600);
pinMode(3, OUTPUT);
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);
analogWrite(3, inByte);
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.println();
}
}
Exercise 3:
void setup() {
Serial.begin(9600);
pinMode(3, OUTPUT);
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();
switch (inByte) {
case 0:
digitalWrite(3, HIGH);
digitalWrite(5, HIGH);
break;
case 1:
digitalWrite(3, LOW);
digitalWrite(5, LOW);
break;
}
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.println();
}}
This exercise was similar to what we did in class, except instead of controlling the height of the ball with a sensor, it was static, and set for the ball to be in the middle of the screen.
p5js
Arduino
void setup() {
Serial.begin(9600);
pinMode(2, OUTPUT);
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();
switch (inByte) {
case 0:
digitalWrite(2, LOW);
digitalWrite(5, LOW);
break;
case 1:
digitalWrite(2, HIGH);
break;
case 2:
digitalWrite(5, HIGH);
break;
}
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.print(",");
sensorValue = analogRead(A1);
Serial.print(sensorValue);
Serial.println();
}
}
exercise 2
In the second exercise, we controlled the brightness of the LED with the x position of the mouse, by moving the mouse to the right the light got brighter, and moving it toward the left the light gets dimmer until it turns off. For this, we mapped the x position values into 255 to control the brightness of the LED.
p5js
Arduino
[code]
void setup() {
Serial.begin(9600);
pinMode(2, OUTPUT);
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();
switch (inByte) {
case 0:
digitalWrite(2, LOW);
digitalWrite(5, LOW);
break;
case 1:
digitalWrite(2, HIGH);
break;
case 2:
digitalWrite(5, HIGH);
break;
}
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.print(",");
sensorValue = analogRead(A1);
Serial.print(sensorValue);
Serial.println();
}
}
[/code]
exercise 3
This final exercise was a bit more complicated, we had to not only control the light with the ball bouncing, but the velocity of the ball using the potentiometer instead of the left and right keys. I think for me it was important to understand that the potentiometer was not controlling the wind, but was the wind. At first, when trying to find a solution I wanted to map the values within the value of the wind when really it needed to be mapped within the x position values so that the sensor would control the X position of the ball.
p5js
Arduino
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) {
int inByte = Serial.read(); // takes data from p5JS about ball position
int windValue = analogRead(A0);//Wind value from potentiometer
analogWrite(5, inByte);//swtiches on LED when ball bounces
Serial.print(windValue);
Serial.println();
}
}
I controlled the horizontal movement of the circle using the potentiometer
p5JS
let serial; // variable to hold an instance of the serialport library
let portName = "COM3"; // 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, yPos, 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) {
let sensors = split(inString, ","); // split the string on the commas
if (sensors.length == 2) {
// if there are three elements
xPos = map(sensors[0], 0, 1023, 0, width); // element 0 is the locH
yPos = width/2;
}
}
serial.write(onOff);
}
function serialError(err) {
print("Something went wrong with the serial port. " + err);
}
function portClose() {
print("The serial port closed.");
}
Arduino
void setup() {
Serial.begin(9600);
pinMode(2, OUTPUT);
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();
switch (inByte) {
case 0:
digitalWrite(2, LOW);
digitalWrite(5, LOW);
break;
case 1:
digitalWrite(2, HIGH);
break;
case 2:
digitalWrite(5, HIGH);
break;
}
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.print(",");
sensorValue = analogRead(A1);
Serial.print(sensorValue);
Serial.println();
}
}
Exercise 2
I controlled the brightness of the LED using the mouseX value on p5JS
p5JS
let serial; // variable to hold an instance of the serialport library
let portName = "COM3"; // 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, yPos, 50, 50); // draw the circle
if (mouseIsPressed){
if(mouseX<=width/2)
onOff=1;
else
onOff=2;
}else{
onOff=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();
//check to see that there's actually a string there:
if (inString.length > 0) {
let sensors = split(inString, ","); // split the string on the commas
if (sensors.length == 2) {
// if there are three elements
xPos = map(sensors[0], 0, 1023, 0, width); // element 0 is the locH
yPos = map(sensors[1], 550, 250, 0, height); // element 1 is the locV
// yPos = height/2;
}
}
lightValue = map(mouseX, 0, width, 0, 255);
// serial.write(onOff);
serial.write(lightValue);
}
function serialError(err) {
print("Something went wrong with the serial port. " + err);
}
function portClose() {
print("The serial port closed.");
}
Arduino
int lightValue = 0;
void setup() {
Serial.begin(9600);
pinMode(2, OUTPUT);
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();
// switch (inByte) {
// case 0:
// digitalWrite(2, LOW);
// digitalWrite(5, LOW);
// break;
// case 1:
// digitalWrite(2, HIGH);
// break;
// case 2:
// digitalWrite(5, HIGH);
// break;
// }
while (Serial.available() > 0) {
// read the incoming byte:
int lightValue = Serial.read();
analogWrite(5, lightValue);
}
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.print(",");
sensorValue = analogRead(A1);
Serial.print(sensorValue);
Serial.println();
}
Exercise 3
The LED turns on when the circle bounces and the wind is controlled by the potentiometer.
p5JS
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 = "COM3"; // 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,0,100,-1,1);
}
function draw() {
background(255);
wind.x = map(xPos, 0, width, -1, 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 - 100) {
if (velocity.y > 1) {
serial.write(255);
}
if (position.y > height-mass/2 ) {
velocity.y *= -0.9;
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);
}
// 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
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) {
int inByte = Serial.read(); // takes data from p5JS about ball position
int windValue = analogRead(A0);//Wind value from potentiometer
analogWrite(5, inByte);//swtiches on LED when ball bounces
Serial.print(windValue);
Serial.println();
}
}
let serial; // variable to hold an instance of the serialport library
let portName = "/dev/cu.usbmodem14501"; // 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, yPos, 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) {
let sensors = split(inString, ","); // split the string on the commas
if (sensors.length== 2) {
// if there are three elements
xPos = map(sensors[1], 0, 1023, 0, width); // element 0 is the locH
yPos = height/2;
// yPos = map(sensors[1], 550, 250, 0, height); // element 1 is the locV
}
}
serial.write(onOff);
}
function serialError(err) {
print("Something went wrong with the serial port. " + err);
}
function portClose() {
print("The serial port closed.");
}
Arduino:
void setup() {
Serial.begin(9600);
while (Serial.available() <= 0) {
Serial.println("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 sensorValue = analogRead(A0);
Serial.println(sensorValue);
}
}
Exercise Two:
Processing:
let serial; // variable to hold an instance of the serialport library
let portName = "/dev/cu.usbmodem14501"; // fill in your serial port name here
let xPos = 0;
let yPos = 0;
let onOff = 0;
let brightness = 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);
}
// 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();
brightness = mouseX;
let mapped = map (brightness, 0, 640, 0, 255);
serial.write(mapped);
}
function serialError(err) {
print("Something went wrong with the serial port. " + err);
}
function portClose() {
print("The serial port closed.");
}
Arduino:
int ledPin = 5;
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(ledPin, inByte);
Serial.println("0");
}
}
Exercise Three:
Processing:
let serial;
let portName = "/dev/cu.usbmodem14401";
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let bounce;
let xPos=0;
let yPos=0;
let onOff=0;
// for port connection and handshake
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
// 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.");
}
// code for the actual bouncing, wind, etc.
noFill();
position = createVector(width/2, 0);
velocity = createVector(0,0);
acceleration = createVector(0,0);
gravity = createVector(0, 0.5*mass);
wind = createVector(0,0);
bounce=map (mass,15,80,.80,.80);
}
function draw() {
background(255);
if (!keyPressed){
console.log(xPos);
velocity.x*=bounce;
}
wind.x = map(xPos, 0, width, -1, 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 - 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);
}
}
Arduino:
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();
}
}
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();
}
}
let serial; // variable to hold an instance of the serialport library
let portName = "/dev/tty.usbmodem101"; // fill in your serial port name here
let yPos;
let onOff=0;
let xPos = 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
yPos=height/2;
}
function draw() {
background(255);
ellipse(xPos, yPos, 50, 50); // draw the circle
if (mouseIsPressed){
if(mouseX<=width/2)
onOff=1;
else
onOff=2;
}else{
onOff=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();
//check to see that there's actually a string there:
if (inString.length > 0) {
let inVal = parseInt(inString)
xPos = map(inVal, 1023, 0, 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(2, OUTPUT);
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();
switch (inByte) {
case 0:
digitalWrite(2, LOW);
digitalWrite(5, LOW);
break;
case 1:
digitalWrite(2, HIGH);
break;
case 2:
digitalWrite(5, HIGH);
break;
}
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.print(",");
sensorValue = analogRead(A1);
Serial.print(sensorValue);
Serial.println();
}
}
*/
Arduino
void setup() {
Serial.begin(9600);
while (Serial.available() <= 0) {
Serial.println("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 sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.println();
}
}
Exercise 2:
p5js
let serial; // variable to hold an instance of the serialport library
let portName = "/dev/tty.usbmodem101"; // fill in your serial port name here
let yPos;
let onOff=0;
let xPos = 0;
let outVal = 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
yPos=height/2;
}
function keyReleased() {
if (keyCode === LEFT_ARROW) {
outVal = max(outVal - 10, 0) ;
} else if(keyCode === RIGHT_ARROW) {
outVal = min(outVal+10, 255);
}
return false;
}
function draw() {
background(255);
ellipse(xPos, yPos, 50, 50); // draw the circle
if (mouseIsPressed){
if(mouseX<=width/2)
onOff=1;
else
onOff=2;
}else{
onOff=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();
serial.write(outVal);
}
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(2, OUTPUT);
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();
switch (inByte) {
case 0:
digitalWrite(2, LOW);
digitalWrite(5, LOW);
break;
case 1:
digitalWrite(2, HIGH);
break;
case 2:
digitalWrite(5, HIGH);
break;
}
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.print(",");
sensorValue = analogRead(A1);
Serial.print(sensorValue);
Serial.println();
}
}
*/
Arduino
void setup() {
Serial.begin(9600);
while (Serial.available() <= 0) {
Serial.println("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(3, inByte);
Serial.print("ye");
Serial.println();
}
}
Exercise 3:
p5js
let serial; // variable to hold an instance of the serialport library
let portName = "/dev/tty.usbmodem14201"; // fill in your serial port name here
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let hDampening;
let inVal = 0;
let outVal = 0;
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);
hDampening=map(mass,15,80,.98,.96);
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);
if (!keyPressed){
wind.x=0;
velocity.x*=hDampening;
}
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) {
velocity.y *= -0.9; // A little dampening when hitting the bottom
position.y = height-mass/2;
}
outVal = position.y >= height-mass/2-5 ? 255 : 0;
wind.x = map(inVal, 0, 1023, -5, 5)*hDampening;
}
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==' '){
mass=random(15,80);
position.y=-mass;
velocity.mult(0);
}
}
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();
inVal = parseInt(inString);
serial.write(outVal);
}
function serialError(err) {
print("Something went wrong with the serial port. " + err);
}
function portClose() {
print("The serial port closed.");
}
Arduino
void setup() {
Serial.begin(9600);
while (Serial.available() <= 0) {
Serial.println("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(3, inByte);
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.println();
}
}
By using a potentiometer, we were able to move the ball across the screen.
Arduino Code
void setup() {
Serial.begin(9600);
while (Serial.available() <= 0) {
Serial.println("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 sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.println();
}
}
P5JS code
let serial; // variable to hold an instance of the serialport library
let portName = "/dev/tty.usbmodem14201"; // fill in your serial port name here
let yPos;
let onOff=0;
let xval = 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
yPos=height/2;
}
function draw() {
background(255);
}
// 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) {
let inVal = parseInt(inString)
xval = map(inVal, 1023, 0, 0, width)
}
serial.write(onOff);
}
function serialError(err) {
print("Something went wrong with the serial port. " + err);
}
function portClose() {
print("The serial port closed.");
}
Exercise 2
Now in the opposite direction, we used arrow keys on the computer to modify the brightness of an LED in Arduino
Arduino Code
void setup() {
Serial.begin(9600);
while (Serial.available() <= 0) {
Serial.println("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(3, inByte);
Serial.print("ye");
Serial.println();
}
}
P5JS Code
let serial; // variable to hold an instance of the serialport library
let portName = "/dev/tty.usbmodem14201"; // fill in your serial port name here
let yPos;
let onOff=0;
let xval = 0;
let outVal = 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
yPos=height/2;
}
function keyReleased() {
if (keyCode === LEFT_ARROW) {
outVal = max(outVal - 10, 0) ;
} else if(keyCode === RIGHT_ARROW) {
outVal = min(outVal+10, 255);
}
return false;
}
function draw() {
background(255);
}
// 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();
serial.write(outVal);
}
function serialError(err) {
print("Something went wrong with the serial port. " + err);
}
function portClose() {
print("The serial port closed.");
}
Exercise 3
Combining the ball p5js example with a potentiometer, we were able to create an interactive arduino-p5js experience.
Arduino Code
void setup() {
Serial.begin(9600);
while (Serial.available() <= 0) {
Serial.println("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(3, inByte);
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
Serial.println();
}
}
P5JS Code
let serial; // variable to hold an instance of the serialport library
let portName = "/dev/tty.usbmodem14201"; // fill in your serial port name here
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let hDampening;
let inVal = 0;
let outVal = 0;
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);
hDampening=map(mass,15,80,.98,.96);
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);
if (!keyPressed){
wind.x=0;
velocity.x*=hDampening;
}
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) {
velocity.y *= -0.9; // A little dampening when hitting the bottom
position.y = height-mass/2;
}
outVal = position.y >= height-mass/2-5 ? 255 : 0;
wind.x = map(inVal, 0, 1023, -5, 5)*hDampening;
}
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==' '){
mass=random(15,80);
position.y=-mass;
velocity.mult(0);
}
}
