Concept

I came up with two potential concepts so far:

1. A flappy bird-like game where a character goes up and down according to either:

• Value of photoresistor (how dark the area around it is determines whether the character goes up or down)
• Value of potentiometer (how the number you get from turning the dial determines whether the character goes up or down)
• Volume of voice
• Force Sensing Resistor

to avoid the protruding obstacles.

2. A radio that changes FM and AM values according to what number you turn the potentiometer dial to (I will input song files that play according to their designated potentiometer value).

• Each value will take you to a different era of music

Components

 Flappy Bird:

• p5, Arduino UNO, and breadboard
• Photoresistor OR potentiometer OR Force Sensing Resistor
• Wires
• LED?

Radio:

• p5, Arduino UNO, and breadboard
• Potentiometer(s) – possibly one for AM and one for FM?
• Wires

The circuits for both are relatively simple, I will use the serial monitor values to input into p5.

p5 Design Elements

Flappy Bird:

• Character
• Protruding obstacles
• Background
• Play and Game Over screens?

Radio:

• Vintage radio screen
• Dials design (AM/ FM dials on the screen move according to which potentiometer you move?)
• Serial monitor value displayed (with digital clock font) that change accordingly

Last week’s class exercise

Potentiometer and p5 Video

Daniel, Aayat, and I made it so that whenever you turn the potentiometer dial, the circle would either go up or down according to the serial value.

We did this by replacing the y coordinate of the ellipse to inData in p5 (which displays the serial value in numerical terms).

ref. to function draw () {}

p5 Code

// variable to hold an instance of the p5.webserial library:
const serial = new p5.WebSerial();
 
// HTML button object:
let portButton;
let inData;
// for incoming serial data
let outByte = 0;              // for outgoing data
 
function setup() {
  createCanvas(400, 300);          // make the canvas
  // check to see if serial is available:
  if (!navigator.serial) {
    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");
  }
  // if serial is available, add connect/disconnect listeners:
  navigator.serial.addEventListener("connect", portConnect);
  navigator.serial.addEventListener("disconnect", portDisconnect);
  // check for any ports that are available:
  serial.getPorts();
  // if there's no port chosen, choose one:
  serial.on("noport", makePortButton);
  // open whatever port is available:
  serial.on("portavailable", openPort);
  // handle serial errors:
  serial.on("requesterror", portError);
  // handle any incoming serial data:
  serial.on("data", serialEvent);
  serial.on("close", makePortButton);
}
 
function draw() {
  
   background(0);
   fill(255);
   text("sensor value: " + inData, 30, 50);
  ellipse (200, inData, 50, 50)
  
}

// if there's no port selected, 
// make a port select button appear:
function makePortButton() {
  // create and position a port chooser button:
  portButton = createButton("choose port");
  portButton.position(10, 10);
  // give the port button a mousepressed handler:
  portButton.mousePressed(choosePort);
}
 
// make the port selector window appear:
function choosePort() {
  if (portButton) portButton.show();
  serial.requestPort();
}
 
// open the selected port, and make the port 
// button invisible:
function openPort() {
  // wait for the serial.open promise to return,
  // then call the initiateSerial function
  serial.open().then(initiateSerial);
 
  // once the port opens, let the user know:
  function initiateSerial() {
    console.log("port open");
  }
  // hide the port button once a port is chosen:
  if (portButton) portButton.hide();
}
 
// pop up an alert if there's a port error:
function portError(err) {
  alert("Serial port error: " + err);
}
// read any incoming data as a string
// (assumes a newline at the end of it):
function serialEvent() {
  inData = Number(serial.read());
  console.log();
  
}
 
// try to connect if a new serial port 
// gets added (i.e. plugged in via USB):
function portConnect() {
  console.log("port connected");
  serial.getPorts();
}
 
// if a port is disconnected:
function portDisconnect() {
  serial.close();
  console.log("port disconnected");
}
 
function closePort() {
  serial.close();
}

Arduino Code

void setup() {
  Serial.begin(9600); // initialize serial communications
}
 
void loop() {
  // read the input pin:
  int potentiometer = analogRead(A0);            
  // remap the pot value to fit in 1 byte:
  int mappedPot = map(potentiometer, 0, 1023, 0, 255); 
  // print it out the serial port:
  Serial.write(mappedPot); 

    // slight delay to stabilize the ADC:
  delay(1);                                                          
                                      
  
  // Delay so we only send 10 times per second and don't
  // flood the serial connection
  delay(100);
}