HW 8: 3 in-class exercises

Exercise 1 – Code & Video

The Arduino Code and the P5.Js code were directly used as given in the lecture notes, except for the draw function of p5.js. We amended the code so that turning the potentiometer would change the horizontal location of the ellipse. On the other hand, the LDR input would amend the vertical location of the ellipse. We also omitted the background and fill functions in order to not have multiple responses from the p5js visually for the actions observed on the potentiometer and the LDR.

The new draw function used in the p5.js code is shown below:

function draw() {
  background(0);
  fill(255);
  
  ellipse(map(alpha, 0, 1023, 0, width),map(rVal, 0, 1023, 0, height),40,60);
 
  // one value from Arduino controls the background's red color
  //background(map(rVal, 0, 1023, 0, 255), 255, 255);

  // the other value controls the text's transparency value
  //fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));

  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
    // Print the current values
    text('rVal = ' + str(rVal), 20, 50);
    text('alpha = ' + str(alpha), 20, 70);
  }
}

Exercise 2 – Code & Video

For this exercise we amended the Arduino code a little as well as the p5.js code. In order to control the LED brightness, we used the keyboard, Up and Down arrows, as the input for the p5.js code that was running and then send this changing value to the LED that was connected in PMW pin 5. We analog wrote to this pin, by the incrementing/decrementing value of the LED, which resets 0 if it passes 255, and vice versa.

The new draw function and the keyPressed() function is as follows:

function draw() {
  background(255, 255, upVal,upVal);

  if(upVal==255) upVal =0;
  if(upVal==0) upVal=255;

  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
  }
}


function keyPressed() {
  if (keyCode == UP_ARROW) {
    upVal += 10;
  }
  if (keyCode == DOWN_ARROW) {
    upVal -= 10;
  }
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
}

The following change is made to the p5.js code in the definition of the values that are sent to the Arduino, as the information for the LED at pin 5 is not digital but analog now, while the pin 2 LED is set to 0 indefinitely.

//////////////////////////////////
      //SEND TO ARDUINO HERE (handshake)
      //////////////////////////////////
      let sendToArduino = upVal + "," + 0 + "\n";
      writeSerial(sendToArduino);

Amendments to the Arduino code are as follows, in the section where the LED values are set:

// inside loop function of arduino
void loop{
.....
    int right = Serial.parseInt();
    int left = Serial.parseInt();
    if (Serial.read() == '\n') {
      digitalWrite(leftLedPin, left);
      analogWrite(rightLedPin, right);
...}

Exercise 3 – Code & Video

Only the p5.js code from the lecture notes is amended for the exercise after being combined with the gravity wind example given while the original Arduino code from the lecture notes is used. The range of the potentiometer is divided into 3 intervals, which accordingly sets the wind vector as -1, 0, and 1, as these are the acceptable values for the wind according to its direction. A flag for checking a collision has happened is put in place, in which ever case it is true the LED on pin 2 is turned on, and everytime it is “not collided” the LED is turned down.

The final version of the p5.js code used is as follows:

let bFlag = true;
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;

let rVal = 0;
let upVal = 0;
let alpha = 255;
let left = 0;
let right = 0;

function setup() {
  createCanvas(640, 360);
  noFill();
  position = createVector(width / 2, 0);
  velocity = createVector(0, 0);
  acceleration = createVector(0, 0);
  gravity = createVector(0, 0.5 * mass);
  wind = createVector(0, 0);
}

function draw() {
  background(255);
  applyForce(wind);
  applyForce(gravity);
  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity);
  acceleration.mult(0);
  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;
    if(bFlag){
      print("collided");
      bFlag=false;
      left = 1;
    }
    else
      left=0;
  }
  else{
    bFlag=true;
    left=0;
  }

  // one value from Arduino controls the background's red color
  //background(map(rVal, 0, 1023, 0, 255), 255, 255);

  // the other value controls the text's transparency value
  //fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));

  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);

    // Print the current values
    //text("rVal = " + str(rVal), 20, 50);
    //text("alpha = " + str(alpha), 20, 70);
  }
//wind.x = map(alpha, 0, 1023, 0, 255);
  if(alpha>670)
    wind.x=1;
  else if(alpha>320)
    wind.x=0;
  else
    wind.x=-1;
  print(wind.x);
 
  // click on one side of the screen, one LED will light up
  // click on the other side, the other LED will light up
}
function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
  if(keyCode==UP_ARROW){
    position = createVector(width / 2, 0);
  }
  if (key == " ") {
    mass = random(15, 80);
    position.y = -mass;
    velocity.mult(0);
  }
}

// This function will be called by the web-serial library
// with each new *line* of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////

  if (data != null) {
    // make sure there is actually a message
    // split the message
    let fromArduino = split(trim(data), ",");
    // if the right length, then proceed
    if (fromArduino.length == 2) {
      // only store values here
      // do everything with those values in the main draw loop
      rVal = fromArduino[0];
      alpha = fromArduino[1];
    }

    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    let sendToArduino = left + "," + right + "\n";
    writeSerial(sendToArduino);
  }
}

function applyForce(force) {
  // Newton's 2nd law: F = M * A
  // or A = F / M
  let f = p5.Vector.div(force, mass);
  acceleration.add(f);
}

Reflections

These exercises were very enjoyable and definitely interesting to try as they allowed us to grasp the communication between the p5.js and Arduino way better. We were able to get exercises in for this complex relationship before devising our plan for the final project.