Exercises
Exercise 1:
For our first exercise, we used a light sensor as the analog input value for the movement of the ellipse on the p5js screen. The rVal from Arduino is used to plot the x coordinate of the ellipse.
p5js code:
//exercise 1 p5js
let rVal = 0;
let alpha = 255;
function setup() {
createCanvas(640, 480);
textSize(18);
}
function draw() {
if (key == " ")
{
// important to have in order to start the serial connection!!
setUpSerial();
}
// one value from Arduino controls the background's red color
background(map(rVal, 0, 1023, 0, 255), 255, 255);
// the other value controls the text's transparency value
fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));
if (!serialActive)
{
text("Press Space Bar to select Serial Port", 20, 30);
} else
{
ellipse(rVal/2,240,100,100);
}
}
function keyPressed() {
if (key == " ")
{
// important to have in order to start the serial connection!!
setUpSerial();
}
}
// 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]);
}
}
}
Arduino Code:
//exercise 1 arduino
void setup() {
Serial.begin(9600);
pinMode(LED_BUILTIN, OUTPUT);
// start the handshake
while (Serial.available() <= 0)
{
Serial.println("0,0"); // send a starting message
delay(300); // wait 1/3 second
}
}
void loop()
{
// wait for data from p5 before doing something
while (Serial.available())
{
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
// Read sensor value
int sensorValue = analogRead(A0);
Serial.print(sensorValue);
// Map sensor value to screen width
int screenValue = map(sensorValue, 0, 1023, 0, 800);
// Send mapped value to p5.js
Serial.println(screenValue);
delay(50); // for stability
}
digitalWrite(LED_BUILTIN, LOW);
}
Exercise 2:
In the second exercise, we implemented a slider to adjust the brightness of an LED using Arduino. The current position of the slider, accessed through slider.value(), was stored as the variable “brightness”, and subsequently transmitted to Arduino as the new brightness level for the LED.
p5js Code:
//exercise 2 p5js
let brightness;
function setup()
{
createCanvas(640, 480);
textSize(18);
slider = createSlider(0, 255, 0);
slider.position(85, 140);
}
function draw()
{
if (!serialActive)
{
text("Press Space Bar to select Serial Port", 20, 30);
}
else
{
text("connected", 20, 30);
brightness = slider.value();
}
brightness = slider.value();
//readSerial();
if(mouseIsPressed)
{
readSerial();
}
}
function mouseIsPressed()
{
readSerial();
}
function keyPressed() {
if (key == " ")
{
// important to have in order to start the serial connection!!
setUpSerial();
}
}
function readSerial(data)
{
console.log(brightness);
let sendToArduino = brightness+"\n";
writeSerial(sendToArduino);
}
Arduino Code:
//exercise 2 arduino
int ledpin = 5;
void setup() {
// Start serial communication so we can send data
// over the USB connection to our p5js sketch
Serial.begin(9600);
// Outputs on these pins
pinMode(ledpin, OUTPUT);
//Blink them so we can check the wiring
digitalWrite(ledpin, HIGH);
delay(200);
digitalWrite(ledpin, LOW);
// start the handshake
while (Serial.available() <= 0)
{
Serial.println("0");
delay(300);
}
}
void loop() {
// wait for data from p5 before doing something
while (Serial.available())
{
int brightness = Serial.parseInt();
if(Serial.read() == '\n')
{
//Serial.println(brightness);
analogWrite(ledpin, brightness);
}
analogWrite(ledpin, brightness);
}
}
Exercise 3:
For this last exercise, we used an ultrasonic sensor to sense the distance and use this variable to change the wind movement in the p5js movement of the ball. The data values of the sensor ranged from 0 to around 3000 and therefore for any value below 1000 the wind blew from left to right and if the value was above 1000 wind and the ball moved towards the left.
p5js Code:
//p5js exercise 3
//declare variables
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let value = 1401;
function setup()
{
createCanvas(640, 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 display()
{
text("Press Space Bar to Start Serial Port", width/2 - 109, height/2 - 5);
}
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;
}
}
else //if serial not active
{
fill(0);
display();
}
}
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==' ')
{
setUpSerial();
}
if (keyCode == UP_ARROW) //if up arrow is pressed
{
mass=random(15,80);
position.y=-mass;
velocity.mult(0);
}
}
function readSerial(data) //call back function
{
let sendToArduino = value + "\n"; //sends value to Arduino with \n added
writeSerial(sendToArduino); //write to Arduino
if (data != null) //if some information is received
{
console.log(data);
if (data < 1000) //if the distance is less than 1000
{
wind.x = 1; //the wind blows to the right
}
else if (data > 1000) //if the distance is more than 1000
{
wind.x = -1; //the wind blows to the left
}
}
}
Arduino Code:
//exercise 3 arduino code
int value = 0;
const int trigPin = 7; //trig pin of Sensor
const int echoPin = 13; //echo pin of Sensor
int distance = 0; //distance data from sensor
void setup()
{
Serial.begin(9600); // Start serial communication at 9600 baud
//set the sensor pins as output and input
pinMode(trigPin, OUTPUT);
pinMode(echoPin, INPUT);
while (Serial.available() <= 0)
{
Serial.println(1400);
}
}
void loop()
{
//wait for p5js
while (Serial.available())
{
sensorReading(); //reading data from sensor
value = Serial.parseInt(); //parsing from the serial written data from p5js
}
}
//to read the sensor and find distance
void sensorReading()
{
//Send a short low pulse
digitalWrite(trigPin, LOW);
delay(2); //delay to avoid complications
digitalWrite(trigPin, HIGH); //sends a high pulse for 10 microseconds
delay(10);
digitalWrite(trigPin, 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
}
Video:
Teammate: Khadija Khalid