I struggled in the beginning with this lab as I had an “undefined” error for a while. It turned out that the error was because I was using Safari and it worked only once I used Chrome.
Below is the Arduino code I used in this lab. I used two potentiometers (one a slider and one not) to communicate with P5. I created a white flower on a yellow background and I made it so that one of the potentiometers adjusts the X coordinate of the flower and the other adjusts the Y coordinate. It reads the values it receives from the two potentiometers and the P5 code parses this and reads the values which it then uses as the coordinates for the flower. Then the Arduino code takes an incoming value from the P5 code (the mouse clicked or not). Once the mouse is clicked it prints which LED it will light up. Every other click corresponds to one LED and they switch off between clicks.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| int slide = A0; | |
| int pot = A1; | |
| int LED1 = 2; | |
| int LED2 = 3; | |
| int incomingVal = 0; | |
| void setup() { | |
| Serial.begin(9600); | |
| pinMode(LED1, OUTPUT); | |
| pinMode(LED2, OUTPUT); | |
| pinMode(pot, INPUT); | |
| pinMode(slide, INPUT); | |
| } | |
| void loop() { | |
| int slideVal = analogRead(slide); | |
| int potVal = analogRead(pot); | |
| int mappedSlideVal = map(slideVal, 0, 1023, 0, 400); | |
| int mappedPotVal = map(potVal, 0, 1023, 0, 300); | |
| Serial.print(mappedSlideVal); | |
| Serial.print(","); | |
| Serial.println(mappedPotVal); | |
| if (Serial.available()) { | |
| int incomingVal = Serial.read(); | |
| if (incomingVal == 15) { | |
| digitalWrite(LED1, HIGH); | |
| delay(500); | |
| digitalWrite(LED1, LOW); | |
| } | |
| if (incomingVal == 20) { | |
| digitalWrite(LED2, HIGH); | |
| delay(500); | |
| digitalWrite(LED2, LOW); | |
| } | |
| } | |
| } |
Below is a link to my P5 sketch:
https://editor.p5js.org/abrinerson/sketches/JWiJUYLsR
Below is the schematic of the potentiometer circuit that I use to communicate with the Arduino to P5.

Below is potentiometer circuit completed.

Here is a video of the potentiometer circuit in action, controlling the position of the flower in P5.
Below is the schematic of the LED circuit that I use to communicate with P5 to the Arduino.

Below is LED circuit completed.

Here is a video of the LED circuit in action, controlling the which LEDs light up depending on the mouse click.