Video
P5.js code
let velocity; let gravity; let position; let acceleration; let wind; let drag = 0.99; let mass = 50; let didTouch = 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); 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) { didTouch = 1; velocity.y *= -0.9; // A little dampening when hitting the bottom position.y = height-mass/2; } else { didTouch = 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==LEFT_ARROW){ wind.x=-1; } if (keyCode==RIGHT_ARROW){ wind.x=1; } if (key==' '){ mass=random(15,80); position.y=-mass; position.x = width / 2 velocity.mult(0); } if (key == 's') { 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 == 1) { // 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 windValue = int(fromArduino[0]); wind = createVector(map(windValue, 0, 1023, -2, 2), 0) } ////////////////////////////////// //SEND TO ARDUINO HERE (handshake) ////////////////////////////////// let sendToArduino = didTouch + "\n"; print(sendToArduino) writeSerial(sendToArduino); } }
Arduino code
// Week 11.2 Example of bidirectional serial communication // Inputs: // - A0 - sensor connected as voltage divider (e.g. potentiometer or light sensor) // - A1 - sensor connected as voltage divider // // Outputs: // - 2 - LED // - 5 - LED int ledPin = 5; int potPin = A2; void setup() { // Start serial communication so we can send data // over the USB connection to our p5js sketch Serial.begin(9600); // We'll use the builtin LED as a status output. // We can't use the serial monitor since the serial connection is // used to communicate to p5js and only one application on the computer // can use a serial port at once. pinMode(LED_BUILTIN, OUTPUT); // 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) { digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data Serial.println("0"); // send a starting message delay(300); // wait 1/3 second digitalWrite(LED_BUILTIN, LOW); delay(50); } } void loop() { // wait for data from p5 before doing something while (Serial.available()) { digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data int ledLight = Serial.parseInt(); if (Serial.read() == '\n') { digitalWrite(ledPin, ledLight); int sensor = analogRead(potPin); delay(5); Serial.println(sensor); } } digitalWrite(LED_BUILTIN, LOW); }