Preview: https://editor.p5js.org/izzy_rieken/present/R5yKBMvrZ (requires input)
The Basics: The input (numbers) from the Arduino sensor will control something within p5.js.
Process:
I created the simple image in p5. The y variables for each shape/line were exact numbers and not yet variables.
Adding serialport() library
initially I had only added the serialport() function within my code and I received the error "serialport() is not a construct). I realized that I needed to download the serialport() library for this function to work...After facing many roadblocks and a two hour long phone call with my dad, I finally realized that adding a new library was as simple as clicking "add folder" under the library menu in p5. But even after this I was receiving the same error message. The simple solution was that my library was misnamed to serialport-1(), confusing the p5 program.
Inserting Variables into my drawing
Once the library was imported and I inserted the code that allowed for the Arduino and p5 to communicate, the image still did not respond to the p5 serial monitor. So the next step was to replace the y variables (only is certain parts of my drawing) with the "data" variable. Therefore, it was using the data input from the Aruidno to change to location of the drawing.
However, I first had defined the variable in the draw function, while my eggman was drawn in a separate function named eggman(). Therefore, p5 claimed that my "data" variable within my eggman function was not defined. The solution was to define that variable in the eggman function rather than in the draw function.
The sensor
Initially I was using the light sensor, which was very unsteady, so I switched to the potentiometer. The potentiometer allowed for a more stable image. I then changed the number parameters according to the serial monitor.
Working out the final kinks
At this point, the image responded to the arduino and the eggman's body moved up and down. However, the image was continuous the eggman was being draw over and over without being "erased" in between.
I realized that I needed to put my background function within the eggman function, so that for each transformation it continuously painted over the body of the eggman. After making this change, the body moved just how I had originally planned.