Let's Dance

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)

Editor: https://editor.p5js.org/izzy_rieken/sketches/R5yKBMvrZ

 

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.

Arduino Sensor