Exercise 1
let rVal = 0; let potentiometerInput = 0; let circleX; function setup() { createCanvas(640, 480); textSize(18); circleX = width/2; } function draw() { // one value from Arduino controls the background's red color background(255); // the other value controls the text's transparency value if (!serialActive) { text("Press Space Bar to select Serial Port", 20, 30); } else { text("Connected", 20, 30); // Print the current values text('potentiometerInput = ' + str(potentiometerInput), 20, 70); } //Draws the circle circle(circleX,height/2,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 == 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 potentiometerInput = int(fromArduino[0]); //Maps the potentiometer input value to the width of the canvas. circleX = map(potentiometerInput,0,1023,0,width); } let sendToArduino = "\n"; writeSerial(sendToArduino); } }
P5 ⬆️
void setup() { Serial.begin(9600); // start the handshake while (Serial.available() <= 0) { digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data Serial.println("0,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 delay(5); if (Serial.read() == '\n') { int potentiometer = analogRead(A1); delay(5); Serial.println(potentiometer); Serial.print(','); Serial.println(potentiometer); } } digitalWrite(LED_BUILTIN, LOW); }
Arduino ⬆️
Exercise 2
while (Serial.available()) { Serial.println("0,0"); digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data int value = Serial.parseInt(); int value2 = Serial.parseInt(); if (Serial.read() == '\n') { analogWrite(ledPin, value); analogWrite(ledPin2, value2); } }
Arduino ⬆️
function readSerial(data) { if (data != null) { ////////////////////////////////// //SEND TO ARDUINO HERE (handshake) ////////////////////////////////// value = int(map(mouseY,0, height, 0, 255)); value2 = int(map(mouseX,0, width, 0, 255)); let led1 = value + "\n"; let led2 = value2 + "\n"; writeSerial(led1); writeSerial(led22); print(value); print(value2) }
p5 ⬆️
void loop() { // wait for data from p5 before doing something while (Serial.available()) { // led on while receiving data digitalWrite(LED_BUILTIN, HIGH); // gets value from p5 int value = Serial.parseInt(); // led switch from p5 value input if (Serial.read() == '\n') { if (value == 1) { digitalWrite(ledPin, HIGH); } else { digitalWrite(ledPin, LOW); } // gets sensor value int sensor = analogRead(A0); delay(5); // sends sensor value to p5 Serial.println(sensor); } } digitalWrite(LED_BUILTIN, LOW); }
Arduino ⬆️