part 2:
P5.JS ⟷ Arduino Serial Communication
1) I created a simple circuit, connecting 5v and ground from the Arduino to the breadboard. I then connected the joystick to 5v, ground, analog pin 2, and digital pin 5. Analog pin 2 was connected to the "VRx" port, controlling movement in the x-direction, and digital pin 5 was connected to "SW", detecting the push-button on the joystick.
2) I wrote some code in the Arduino app and created the variable "sensorVal1" and set it equal to the value of (A2) with analogRead(). I then checked to see if the joystick was providing data in the serial monitor using serial.println() to get numerical values instead of random characters. The serial monitor showed that the program was running correctly, providing a maximum of 1022 when the joystick was pushed forward, a minimum of zero when pushed down, and a value of 524 when untouched.
3) I uploaded the code to the Arduino and closed the Arduino app to ensure that its serial monitor was closed. Next, I opened the p5.serialcontrol app and kept my Arduino plugged in. I opened my Arduino's respective port (COM5 in my case) in the app, and selected "console enabled" and "read in ASCII."
4) With the serial control app open, I opened Daniel's p5.js starter file in the online editor. I then replaced the placeholder port name with my port name, 'COM5'.
5) To test if the program was receiving the serial data, I drew a circle on the canvas, and substituted its x-position with the variable for the incoming serial data, "sensorData." This allowed me to move my circle from left to right with the x-direction of the joystick. I then mapped the incoming data to the size of the canvas to make sure the circle would stay within the bounds of the canvas.
6) I began making my game "Chicken Crossing" by adding a background image of a street and replacing the circle with an uploaded image of a chicken. Both images were uploaded via the preload() function.
7) Like the circle, I replaced the x-position of the chicken with the variable from my serial data to control it with the joystick, and mapped it to the canvas. I did this by setting the variable "xPos" equal to the mapped value of "sensorData" -- scaling the values form 0 to 1022 to 0 to 600 (my desired bounds within the canvas). Next, I added two color overlays over the background image (one red and one green) and mapped these to the position of the chicken so that the screen appears green once the chicken has crossed the road, and red when its in the middle of the road. I hoped that these colors would indicate that the user is meant to help the chicken safely cross the road
8) I added the second serial control for the joystick button into my preexisting Arduino code. Using the variable "button1," I programmed the button to be an input with the "pinMode" function, and used digitalWrite() to set it to HIGH. Using the serial monitor, I confirmed that the button would output a 1 when it wasn't being pressed, and a 0 when it was pressed.
9) I differentiated between the two outputs of my serial controls by adding a break ('\n') between them and printing their names in the Arduino code.
10) I parsed the data from my serial controllers in the p5.js editor by splitting the values in the data at the breaks in the string. This allowed me to put the two outputs into an array, and to provide each element in the array with its own variable ("push_button" for index 0 and "xPos" for index 1 in the "sensorData[]" array).
11) I used the button on the joystick as an audio controller to play the sound of a chicken bawking when pushed. I did this with the createAudio() function, an if-statement that instructs the program to start the noise when the serial value is equal to 0 (i.e. being pressed), and the play() function. Using the stop() function, I ensured that the noise would stop after the button is released.
