mousePressed() callback function inside object

p5.js Coding Questions
#1

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

#2 
function ExampleObject() {
  this.button = createImg('test.png', "Test");

  this.internalCallback = function() {
    console.log("SUCCESS!");
  }

  this.button.mousePressed(this.internalCallback);
}
1 Like
#3

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.

#4

this.play_pause = () => {
Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

1 Like
#5

Thank you! That did the trick. I really appreciate your help.

Jason