Assignment #8: Arduino and p5js examples – Introduction to Interactive Media

Here are three examples of linking Arduino and p5js! Despite my anxious worries, they turned out to be not too difficult compared to other assignments that we had to do in the past.

Example 1: controlling the ellipse on p5js to move horizontally by using a sensor on Arduino.

Here’s the full code that I used for p5js, which I got inspired by a YouTube tutorial that was filmed by Quarduino (link:https://www.youtube.com/watch?v=MtO1nDoM41Y). In this video I learned that I could download a third party application that was also created by p5 to access the serial port, which I downloaded from this site.

I’ve made some changes, such as playing around with whether I wanted the entire circle to be filled/just have the outer rim be filled, the size and position of the ellipse, etc. I also accidentally made the ellipse so that it shrinks/expands in size, but not actually moving, which was what the prompt was saying – so I quickly fixed my code for the ellipse to this so that I was controlling the x-axis position by the incoming data from the Arduino sensor:

ellipse(data,250,100,100);

Here are the photos + video of it running:

Example 2: make something that controls the LED brightness from p5

This one turned out to be the easiest one, and the most satisfying! I was suddenly inspired by the idea of “don’t press the red button” image, like the one below: Why We Always Want To Push The Big Red Button (PICTURE LINK) So I decided that I’ll create something similar in p5 so that when I press the “red button,” the red LED on the Arduino will turn on!

I again used the p5.serialcontrol system to connect the two, and soon I had the final result. It was a very simple circuit on the Arduino part, and the p5js coding wasn’t too difficult either, but it was really fun to create it.

Here’s the full code for p5js, and the full code for Arduino is listed here:

const int ledPin = 13;      // the pin that the LED is attached to

void setup() {
  // initialize the serial communication:
  Serial.begin(9600);
  // initialize the ledPin as an output:
  pinMode(ledPin, OUTPUT);
}

void loop() {
  int brightness;

  // check if data has been sent from the computer:
  if (Serial.available() > 0) {
    // read the most recent byte (which will be from 0 to 255):
    brightness = Serial.read();
    // set the brightness of the LED:
    analogWrite(ledPin, brightness);
  }
}

Here’s the picture and the video of it running:

Example 3: take the gravity wind example and make it so every time the ball bounces one led lights up and then turns off, and you can control the wind from one analog sensor.

This one really took me a long, long time, and I ended up not being able to complete it. I kept getting stuck with the error message saying “TypeError: p5.SerialPort is not a constructor,” and although I discovered the problem later thanks to Professor Shiloh’s help (he said that I don’t need to access the serial port library to complete this), I ran into other problems even after removing the following code line, which was what was causing these error messages:

serial = new p5.SerialPort();

Here is the full code that I have.

I hope to finish this and crack the mystery in the near future!

Leave a Reply Cancel reply