Homework Exercises
Ellipse Moving:
Switch + LED:
Arduino code:
// Week 11.2 Example of bidirectional serial communication
int analog_pin = A2;
int led_pin = 9;
void setup() {
// Start serial communication so we can send data
// over the USB connection to our p5js sketch
Serial.begin(9600);
pinMode(analog_pin, INPUT);
pinMode(led_pin, OUTPUT);
// start the handshake
while (Serial.available() <= 0) {
Serial.println("-1"); // send a starting message
delay(300); // wait 1/3 second
}
}
void loop() {
// wait for data from p5 before doing something
while (Serial.available()) {
int led_brightness = Serial.parseInt();
digitalWrite(led_pin, led_brightness);
Serial.println(map(analogRead(analog_pin), 0, 1023, -1, 1));
}
}
P5.js code:
/* Week 11.2 bidi serial example
* Originally by Aaron Sherwood
* Modified by Mangtronix
*
* Add this library to Sketch files
* https://github.com/mangtronix/IntroductionToInteractiveMedia/blob/master/code/p5.web-serial.js files
*
* Arduino code:
* https://github.com/mangtronix/IntroductionToInteractiveMedia/blob/master/code/Week11Serial.ino
*/
let dir = 0;
let x = 40;
let r = 40;
let inc = 2;
function setup() {
createCanvas(640, 480);
}
function draw() {
// one value from Arduino controls the background's red color
background(0);
ellipse(x,height/2,r*2,r*2);
if (serialActive)
x = dir == 1 ? min(width - r, x + inc) : x = max(r, x - inc);
}
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), "\n");
// if the right length, then proceed
if (fromArduino.length == 1) {
// only store values here
// do everything with those values in the main draw loop
dir = fromArduino[0];
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
console.log("X: ", x);
let output = map(x, r, width - r, 0, 255);
console.log("Output: ", int(output));
writeSerial(int(output));
}
}
Gravity:
Arduino code:
// Week 11.2 Example of bidirectional serial communication
int analog_pin = A2;
int led_pin = 9;
void setup() {
// Start serial communication so we can send data
// over the USB connection to our p5js sketch
Serial.begin(9600);
pinMode(analog_pin, INPUT);
pinMode(led_pin, OUTPUT);
// start the handshake
while (Serial.available() <= 0) {
Serial.println("-1"); // send a starting message
delay(300); // wait 1/3 second
}
}
void loop() {
// wait for data from p5 before doing something
while (Serial.available()) {
int led_brightness = Serial.parseInt();
digitalWrite(led_pin, led_brightness);
Serial.println(map(analogRead(analog_pin), 0, 1023, -1, 1));
}
}
P5.js code:
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let led_on = 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);
}
function draw() {
background(255);
if (serialActive) {
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) {
led_on = 1;
velocity.y *= -0.9;
position.y = height-mass/2;
} else {
led_on = 0;
}
}
}
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==UP_ARROW){
mass=random(15,80);
position.y=-mass;
velocity.mult(0);
}
if (key == " ") {
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), "\n");
// if the right length, then proceed
if (fromArduino.length == 1) {
// only store values here
// do everything with those values in the main draw loop
wind.x = fromArduino[0];
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
console.log(led_on);
writeSerial(led_on);
}
}
Final Project
My plan for the Final Project is an interactive device for my room. It is going to have at least 2 buttons one for “Good Morning” and a second for “Good Night”. When pressed “Good Night”, Arduino will turn off the lights, and turn off the AC, while P5.js will wish me “Good Night”, and tell me what time my alarm is set for tomorrow and how much time is left, and something more(TBD). For the “Good Morning” button, Arduino will turn on the AC, while P5.js will greet me, tell me what’s on my calendar today, read me a motivational quote, and tell me how many emails and from whom I received while I was sleeping.
Most of this is very new for me and will be complicated but I believe that if APIs of external services will work properly on p5.js this project is very doable and I’m very optimistic about it. I will have to learn how to use Google Calendar API, Gmail API, and Text-to-Voice API.
The idea came from a “Jarvis” AI from the Iron Man movie. Just like Jarvis, my project will be able to control some aspects of my room and become my companion.
