Arduino + P5
I'm a paragraph. Click here to add your own text and edit me. It's easy.
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.
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
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.