animation responsive to ultrasonic distance sensor + word recognition

Goal: Draw an animation at the center of an object → changes based on distance sensor + specific words recognized

Steps:

0. Fix my VS Code. Set up p5.js

— —

1. Wire up an ultrasonic distance sensor.
2. Connect the serial inputs of the distance sensor to a p5.js sketch. This sketch will be circular.
3. [1] Change scale of sketch based on distance input.

— —

1. Figure out speech recognition module on p5.js. https://www.youtube.com/watch?v=q_bXBcmfTJM&ab_channel=TheCodingTrain
2. Set trigger words; figure out how to make something happen if trigger words said.
3. [2] If trigger words are said, change (visual) details of the sketch.

— —

1. Add object detection module.
2. Set an object for now. Maybe an apple.
3. Make the sketch show up at the center of the object.

Getting to Work

One. I programmed an HC-SR04 ultrasonic distance sensor to an Arduino Uno. Using this code: https://create.arduino.cc/projecthub/abdularbi17/ultrasonic-sensor-hc-sr04-with-arduino-tutorial-327ff6

Two. Connecting the serial input to a p5.js sketch. I’m following this tutorial: https://itp.nyu.edu/physcomp/labs/labs-serial-communication/lab-serial-input-to-the-p5-js-ide/ (main)

and this one https://www.youtube.com/watch?v=feL_-clJQMs&ab_channel=ScottFitzgerald

I downloaded p5.serialcontroller from here: https://github.com/p5-serial/p5.serialcontrol/releases

let serial; // variable to hold an instance of the serialport library
let portName = '/dev/tty.usbmodem141101';
let inData;
function setup() {
  createCanvas(displayWidth, displayHeight);
  serial = new p5.SerialPort();       // make a new instance of the serialport library
  serial.on('list', printList);  // set a callback function for the serialport list event
  serial.on('connected', serverConnected); // callback for connecting to the server
  serial.on('open', portOpen);        // callback for the port opening
  serial.on('data', serialEvent);     // callback for when new data arrives
  serial.on('error', serialError);    // callback for errors
  serial.on('close', portClose);      // callback for the port closing
 
  serial.list();                      // list the serial ports
  serial.open(portName);              // open a serial port
}
function serverConnected() {
  console.log('connected to server.');
}
 
function portOpen() {
  console.log('the serial port opened.')
}
 
function serialEvent() {
 // inData = Number(serial.read());
   inData = serial.read();
}
 
function serialError(err) {
  console.log('Something went wrong with the serial port. ' + err);
}
 
function portClose() {
  console.log('The serial port closed.');
}
 
// get the list of ports:
function printList(portList) {
  // portList is an array of serial port names
  for (var i = 0; i < portList.length; i++) {
    // Display the list the console:
    console.log(i + portList[i]);
  }
}
function draw() {
   background(0);
   fill(255);
  textSize(30);
   text("sensor value: " + inData, 30, 50);
  if (inData < 20) {
    circle(displayWidth/2, displayHeight/2, 60);
  } else {
    circle(displayWidth/2, displayHeight/2, 30);
  }
   
}

The final code is slightly different from the gif uploaded as I altered it so the radius of the circle is not proportionate to the distance value. Rather, I set a threshold so that the circle is either only in a “original” or “growth” state, as my final animation will not be just a circle but some sort of animated particle system.

With a particle system, an “on” state could be conveyed with much more complex details than just scale, such as speed and velocity.

Three. The foundational sketch

Followed this tutorial: https://www.youtube.com/watch?v=yAyiQKNVtY8&ab_channel=ColorfulCoding