This assignment asks us to create a webpage with p5.js that interacts with the arduino, which means we create a physical electronics that is able to interact with a webpage. JSON parsing, Serial, and p5.js are used in this project. The physical parts include 1 joystick as both x/y input devices and 4 white LEDs as output devices.
The way my project works is similar to a simple joystick interaction: When moving the joystick up, the LED located in the up side lights up, and the yellow square on the webpage moves up; when moving the joystick down, the lower side of the LED lights up, and the yellow square moves down. This works for four direction for both the yellow square and the LEDs.
The joystick is connected to the 5v power source. Four LEDs are put in their corresponding position according to left, right, up, and down as below.
The calculated resistance for each white LED is 85Ω, so I used 100Ω from the kit for all four LEDs.
The input x value changes from 503 to 0 when moving the joystick to the right and changes from 503 to 1023 when moving to the left, controlling left and right side of the LEDs.
For the y input, the value changes from 514 to 1023 when moving up and 514 to 0 when moving down the joystick, controlling the up and down side of the LEDs (See the image). The array value is around [503, 513] when not touching the joystick.
Therefore, in my Arduino code, I purposefully map the input value to the output lightness of the LEDs in its corresponding left, right, up, and down direction (See code snippet).
JSON and HTML file are from here.
