Coding Assignment – Week #11

Exercise 1:

To move the ellipse in the middle of the screen, I used the example from class with small changes. Here is the sketch:

The ellipse moving part:

let x = map(alpha, 0, 1023, 0, width);
  ellipse(x, height/2, 40, 40)

Exercise 2:

I wanted the brightness level of an LED to be matched with the falling of the ellipse on P5.js. The LED is the brightest when the ellipse is at the bottom of the canvas, thus making the LED brighter as the ellipse falls. Here is the sketch:

P5 code:

let y = 0;

function setup() {
  createCanvas(640, 240);
  textSize(18);
}

function draw() {
  
  background(0);

  // the other value controls the text's transparency value
  fill(255);
  ellipse(width/2, y, 40, 40);
  y+=1;
  
  if (y>height){
    y=0
  }

  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);

  }
  
  print(y)
  

}

function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
}

// 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
      
      // We take the string we get from Arduino and explicitly
      // convert it to a number by using int()
      // e.g. "103" becomes 103
      //rVal = int(fromArduino[0]);
      alpha = int(fromArduino[1]);
    }

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

Arduino code:

int ledPin = 11;  // LED connected to pin 11

void setup() {
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT);

  // Blink the LED to indicate setup
  digitalWrite(ledPin, HIGH);
  delay(200);
  digitalWrite(ledPin, LOW);

  // Start the handshake
  while (!Serial.available()) {
    Serial.println("0");  // Send a starting message
    delay(300);
  }
}

void loop() {
  // Wait for data from p5.js before doing something
  while (Serial.available()) {
    int y = Serial.parseInt();
    if (Serial.read() == '\n') {
      // Map the y value to the LED brightness (0-255)
      int brightness = map(y, 0, 240, 0, 255);
      analogWrite(ledPin, brightness);

      // Print the received y value for debugging
      Serial.println(y);
    }
  }
}

Exercise 3:

I made the gravity weaker so that the LED blinking is more clearly visible.

P5 code:

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let alpha = 0; // Initialize alpha

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

function draw() {
  background(255);

  // Update wind based on alpha
  wind.x = alpha;

  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;
  }

  print(int(position.y), alpha);
}

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

function readSerial(data) {
  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
      alpha = int(fromArduino[1]);
    }

    //////////////////////////////////
    // SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    let sendToArduino = int(position.y) + "\n";
    writeSerial(sendToArduino);
  }
}

function keyPressed(){
  
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  
}
}

Arduino code:

const int potPin = A0;  
const int ledPin = 13;  

int potValue;  
int ballPosition;  
bool isBouncing = false;  

void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(9600);  
}

void loop() {
  // Read the value from the potentiometer
  potValue = analogRead(potPin);

  // Map the potentiometer value to the range of wind force
  int mappedWind = map(potValue, 0, 1023, -1, 1);

  // Send the mapped wind force value to the computer through serial
  Serial.print("0,");
  Serial.println(mappedWind);

  // Read the ball's position from p5.js
  if (Serial.available() > 0) {
    ballPosition = Serial.parseInt();
  }

  // Check if the ball bounces
  if (ballBouncesCondition()) {
    if (!isBouncing) {
      // Turn on the LED when the ball starts bouncing
      digitalWrite(ledPin, HIGH);
      isBouncing = true;
    }
  } else {
    // Turn off the LED if the ball is not bouncing
    digitalWrite(ledPin, LOW);
    isBouncing = false;
  }

  
}

bool ballBouncesCondition() {
  return ballPosition >= 320;
}