Hi everyone,
I started learning p5.js a couple weeks ago and have been working on my first big project. I’m having a hard time troubleshooting an issue involving mousePressed()
used inside of an object. Here’s a simplified version of my code. This first version works fine. An image (which I’m using as a button) is created inside the ExampleObject
. When the image is clicked on, the testCallback()
function prints “Success” to the console. Great!
function setup() {
...
}
function draw() {
...
}
function testCallback() {
console.log("SUCCESS!");
}
function ExampleObject() {
this.button = createImg('test.png', "Play");
this.button.mousePressed(testCallback);
}
However, I want the callback function to be defined inside the object like this:
function setup() {
...
}
function draw() {
...
}
function ExampleObject() {
this.button = createImg('test.png', "Test");
this.button.mousePressed(this.internalCallback);
this.internalCallback = function() {
console.log("SUCCESS!");
}
}
This second version doesn’t work though. The console prints this error:
Uncaught TypeError: fxn is undefined
eventPrependedFxn http://127.0.0.1:5500/p5.js:52063
[p5.js:52063:15](http://127.0.0.1:5500/p5.js)
eventPrependedFxn http://127.0.0.1:5500/p5.js:52063
eventPrependedFxn self-hosted:844
Can someone please explain the mistake I’m making?
Thanks!
Jason
function ExampleObject() {
this.button = createImg('test.png', "Test");
this.internalCallback = function() {
console.log("SUCCESS!");
}
this.button.mousePressed(this.internalCallback);
}
1 Like
Thanks for the suggestion, GoToLoop. I tried moving the function definition above the mousePressed()
event as you suggested, but it still isn’t working. The console now prints this error:
Uncaught TypeError: this.play_button is undefined
play_pause http://127.0.0.1:5500/sketch.js:143
eventPrependedFxn http://127.0.0.1:5500/p5.js:52063
Here’s the actual code in case it helps:
function Track(track_number) {
this.width = 1200;
this.height = 200;
this.x_position = 210;
this.y_position = 10 + this.height * track_number;
this.sample = sample_list[track_number];
this.isPlaying = false;
this.play_button = createImg('play.png', "Play");
this.play_button.size(70, 70);
this.play_button.position(70, 60);
this.play_pause = function() {
if (this.isPlaying === false) {
csound.audioContext.resume();
this.isPlaying = true;
csound.readScore("i 1 0 -1");
this.play_button.attribute('src', 'pause.png');
} else {
this.isPlaying = false;
csound.readScore("i -1 0 1");
this.play_button.attribute('src', 'play.png');
}
}
this.play_button.mousePressed(this.play_pause);
...
}
Any other ideas? I’m wondering if mousePressed()
somehow separates the callback function from its context within the object so that p5.js doesn’t know what this
refers to.
this.play_pause = () => {
1 Like
Thank you! That did the trick. I really appreciate your help.
Jason