Connecting Arduino to p5.js: in class exercises

EXERCISE 1

Extending the potentiometer example demoed in class, we created a smiley ball that bounces horizontally across the screen whose velocity was dependent on the value of the potentiometer. Inside our Arduino code, we write the value of the potentiometer as serial output to the p5.js sketch: 

void loop() {
  // put your main code here, to run repeatedly:
  int potentiomenter = analogRead(A0); 
  int mappedPot = map(potentiomenter, 0, 1023, 0, 255); 
  Serial.write(mappedPot); 
  delay(100); 

The corresponding breadboard is shown below: 

[image]

Inside our p5.js sketch, we created our smiley ball by making a simple Circle class with an x and y position and a move() method. The move method() doesn’t change the ball’s y position, as it remains constant along the horizontal axis height/2, but it does update the x position, which is calculated using the variable inData – the value of the potentiometer read from Arduino. A snipped of the code is shown below: 

class Circle {
  constructor(x, y, d) {
    this.x = x;
    this.y = y;
    this.d = d;
  }
  move() {
    if (this.x<=50) {x = 1;}
    else if (this.x>=550) {x =-1;}
    
    let y;
    
    if (inData==undefined) {
      y=0;
    } else {
      y = inData;
    }
     
    this.x+=(y/20)*x;
  }

Finally, a demo of the final product is shown below: 

 

EXCERCISE 2

We thought that the first exercise was rather bland in terms of visuals, so for this exercise we wanted our p5.js sketch to be more interesting. We made the connection of a sun rising and falling to the brightness of an LED, hence our sketch shows a sun against a mountain landscape that can “rise” and “fall” by pushing the up and down arrow keys. As the sun “rises”, the sky changes to a bright magenta color, and when the sun “falls”, the sky deepens to a dark blue color. We achieved this by having the sun’s y position (also built from the Circle class of Exercise 1) determine the rgb values of the background, as demonstrated in the following code:

function draw() {
  background(300-c.y, 100-c.y, 100+c.y); 
  c.display(); 
  c.move(); 
  
  var rightBrightness = map(c.y, height, 0, 0, 255);
  
  outData = rightBrightness;  // setup the serial output
  serial.write(outData); // write to serial for Arduino to pickup

This seamless gradient effect then corresponds to the brightness of an LED on our Arduino board. 

[image]

The sun’s y position is stored as outData, which is then sent to Arduino. Inside our Arduino code, we map the incoming value to a scale of 0 to 255 and use that value to analog write the LED brightness. A snippet of this code is shown below: 

void loop() {
    if (Serial.available() > 0) { // see if there's incoming serial data
      incomingByte = Serial.read(); // read it
      led2brightness = map(incomingByte, 0, 255, 0, 255); // map the input value to the brightness for second LED
    } else { }
    analogWrite(ledPin, led2brightness); // write the brightness to the led pin 2
    
}

 

Finally, a demo of the finished product is shown below:

 

EXERCISE 3 

For the final exercise we were required to incorporate bidirectional serial communication, basically using the arduino to control a p5js sketch, and using changes in the p5js sketch to produce changes to the arduino. On the arduino, we used a distance sensor to affect the change of wind in p5js to make the ball move. On the p5js sketch we programmed it in such a way that everytime the ball bounces an LED lights up depending on the velocity of the ball.