P5.js and Tone.js Can't Connect to Arduino - serialization

Question

I'm having trouble displaying an image and playing audio using p5 when my arduino red led goes off. My arduino works, I just can't figure out how to get an image to pop up and audio to play when the red led goes off. My project is basically a motion sensor using an ultrasonic sensor, if that helps.
Thank you for your time.
Here's my sketch.js code:
var serial; // variable to hold an instance of the serialport library
var portName = '/dev/cu.usbmodem1421'; // fill in your serial port name here
var synth;
function preload() {
alert = loadImage('alert.jpeg');
}
function setup() {
createCanvas(1920,1080);
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
var synth = new Tone.Synth().toMaster();
synth.triggerAttackRelease(440, 2);
var player = new Tone.Player("IntruderAlert.mp4").toMaster();
//play as soon as the buffer is loaded
player.autostart = true;
player.playbackRate = 0.8;
}
function serverConnected() {
println('connected to server.');
}
function portOpen() {
println('the serial port opened.')
}
function serialEvent() {
}
function serialError(err) {
println('Something went wrong with the serial port. ' + err);
}
function portClose() {
println('The serial port closed.');
}
Here's my .ino code:
#define trigPin 6<br>#define echoPin 7
#define GreenLED 11
#define YellowLED 10
#define RedLED 9
#define buzzer 3
int sound = 500;
void setup() {
Serial.begin (9600);
pinMode(trigPin, OUTPUT);
pinMode(echoPin, INPUT);
pinMode(GreenLED, OUTPUT);
pinMode(YellowLED, OUTPUT);
pinMode(RedLED, OUTPUT);
pinMode(buzzer, OUTPUT);
}
void loop() {
long duration, distance;
digitalWrite(trigPin, LOW);
delayMicroseconds(2);
digitalWrite(trigPin, HIGH);
delayMicroseconds(10);
digitalWrite(trigPin, LOW);
duration = pulseIn(echoPin, HIGH);
distance = (duration/5) / 29.1;
if (distance < 50) {
digitalWrite(GreenLED, HIGH);
}
else {
digitalWrite(GreenLED, LOW);
}
if (distance < 20) {
digitalWrite(YellowLED, HIGH);
}
else {
digitalWrite(YellowLED,LOW);
}
if (distance < 5) {
digitalWrite(RedLED, HIGH);
sound = 1000;
}
else {
digitalWrite(RedLED,LOW);
}
if (distance > 5 || distance <= 0){
Serial.println("Out of range");
noTone(buzzer);
}
else {
Serial.print(distance);
Serial.println(" cm");
tone(buzzer, sound);
}
delay(300);
}

Answer 1

You're going to have to break your problem down into smaller steps and then approach those steps one at a time.
Can you create a sketch that just shows an image? Forget about the Arduino for a second, and just display an image. Now can you display an image when the user clicks on the screen?
Separately from that, can you write Arduino code that simply sends a message to a sketch when the red light goes off?
When you get those working independently, then it'll be much easier to think about combining them into a single application that combines both ideas.
If you get stuck, please post a MCVE of the specific step that you're stuck on, and we'll go from there. Good luck.