Assignment 8: Three Exercises

Exercise 1

This one was a simple matter of adding an ellipse() function (to the Arduino-p5.js connection example) in which the parameter for the x-coordinate is affected by the incoming serial data:

//In the draw function:
ellipse((inData/255 * 400), 200, 30, 30);

This line of code allows the horizontal location of the ellipse to be controlled by the potentiometer.

The link to the full code: https://editor.p5js.org/Ian0730/sketches/Nzxs9rlCa

Exercise 2

For this exercise, I modified Professor Sherwood’s example of bilateral connection so that the value of a variable defined in p5.js named brightness is sent to Arduino and used to control the brightness of an LED. This is the code in p5.js:

//p5.js Code
function draw() {
 ...
  // Click on place on canvas to adjust brightness
  if (mouseIsPressed) {
    brightness = round(map(mouseX, 0, 640, 0, 255));
    print(brightness);
  }
 ...
}
...
//Value of brightness is sent to Arduino
function readSerial(data) {
  if (data != null) {
    //SEND TO ARDUINO HERE
    let sendToArduino = brightness + "\n";
    writeSerial(sendToArduino);
  }
}

As seen in the code, the value of brightness is determined by the x-position of the mouse on the screen. It is then sent to Arduino, which runs the following code:

//Arduino Code
//Initialize Variables
int brightness;
int led1 = 5;
...
void loop() {
  // Wait for data from p5 before doing something
  if (Serial.available()) {
    brightness = Serial.parseInt();  //Arduino brightness = p5 brightness
    Serial.println(brightness);
    delay(30);
    analogWrite(led1, brightness); // Updates brightness of LED
  }
}

A variable also named brightness is constantly updated to match its counterpart in p5.js. It is then used as a parameter for determining the strength of the LED light in the line analogWrite(led1, brightness;. Thus, the LED light gets brighter the closer to the right side of the canvas the mouse cursor is pressed at (and vice versa).

The link to the full code: https://editor.p5js.org/Ian0730/sketches/_jqfjfe8V

Exercise 3

This was the most challenging exercise yet! I first took much of the code from the gravity wind example and implemented it within the aforementioned example of bilateral connection. I then initialized a key variable named bounce for tracking each bounce of the ball, which is then called for this chunk of code in p5.js:

//p5.js Code
function draw() {
  . . .
  ellipse(position.x,position.y,mass,mass);
  if (position.y > height-mass/2) {
      velocity.y *= -0.9;  // A little dampening when hitting the bottom
      position.y = height-mass/2;
      bounce = 1; //Bounce is 1 when ball touches ground
  } else{
    bounce = 0; //Bounce is 0 when ball is midair
  }
  . . .
}
. . .
function readSerial(data) {
  if (data != null) {
    . . .
    //SEND TO ARDUINO HERE
    let sendToArduino = bounce + "\n";
    writeSerial(sendToArduino); //Value of bounce is sent to Arduino
  }
}

According to this code, bounce is 1 when the ball makes/is making contact with the ground, and 0 otherwise; this value is then sent to Arduino and called for the following code:

//Arduino Code
//Initialize Variables
. . .
int led = 5;
int bounce = 0;

void setup() {
  Serial.begin(9600);
  pinMode(5, OUTPUT); //Set pin
  digitalWrite(led, LOW); //Start with LED off
  . . .
  }
}

void loop() {
  // Wait for data from p5 before doing something
  while (Serial.available()) {
    bounce = Serial.parseInt(); //Arduino bounce = p5 bounce
    if (Serial.read() == '\n') {
      digitalWrite(led, bounce); //1 = on, 0 = off
      delay(1);
      . . .
    }
  }
}

Similarly to Exercise 2, a variable also named bounce is constantly updated to match its counterpart in p5.js. It is then used as a parameter for determining whether the LED is on and off in the line digitalWrite(led, bounce;. Thus, the LED light is on when the ball makes contact with the ground and off when it is in midair.

The other portion of the exercise was to use an analog sensor to control the direction of the wind—I decided to use a potentiometer for the task. This is the code used to implement this:

//p5.js Code
function readSerial(data) {
  //READ FROM ARDUINO HERE
  if (data != null) {
    // Collect data from Arduino
    let fromArduino = split(trim(data), ",");
    // If the right length, then proceed
    if (fromArduino.length == 1) {
      // Use value from potentiometer to affect direction of wind
      wind.x = fromArduino[0];
    }
    . . .
  }
}

//Arduino Code
//Initialize Variables
int potentio = A2;
. . .
void loop() {
  while (Serial.available()) {
    . . .
    if (Serial.read() == '\n') { 
      . . .
      //Store potentiometer value
      int potValue = analogRead(potentio);
      delay(1);
      //Split potentiometer into two zones, send value accordingly
      if (potValue < 512){
        Serial.println(-1);
      } else {
        Serial.println(1);
      }
    }
  }
}

As shown in the code above, the possible values of the potentiometer are split into two halves, with each half sending a value of either -1 or  1 to p5.js; values under 512 send -1, and values equal to and above 512  send 1. These values are then used in p5.js to determine the direction of the wind through wind.x = fromArduino[0];; a value of -1 sends the wind blowing to the left, while 1 sends it to the right.

The link to the full code: https://editor.p5js.org/Ian0730/sketches/CMvWY901S

Video

Leave a Reply