Custom button class that can call given function

p5.js Coding Questions
1

Im trying to make a custom buttons for fun. i want to be able to give him functions and run the functions when I click it. I already completed the clicking detection part. how can I somehow pass the function information and make it call the function?

there is smth like Button.mousePressed(functionA); for actual button objects.
how can I achieve something like this on my own?

1 Like
2

It would be easier to give you advice if you shared your code. However here is some basic information about functions in javascript.

A function in javascript, whether it is declared with a function statement or with an arrow expression, is just an Object of type Function. As such you can pass a function to another function, store it in a variable, add it to an array, or anything else you can do with a value in JavaScript. Regardless of how the function object is stored, you can invoke it using the normal syntax (i.e. follow a reference to the value by parentheses), or you can invoke it using the call or apply functions on the Function instance. Here are some examples:

var foo = () => "foo";
function bar() {
  return "bar";
}

function logCallback(fn) {
  console.log(fn());
}

logCallback(foo); // prints "foo" to the console
logCallback(bar); // prints "bar" to the console

// Here's a more complex example with a class:
class LogAllCallbacks {
  callbacks = [];
  addCallback(cb) {
    this.callbacks.push(cb);
  }
  logAll() {
    for (const cb of this.callbacks) {
      console.log(cb());
    }
  }
}

let test = new LogAllCallbacks();
test.addCallback(foo);
test.addCallback(bar);
test.logAll() // prints "foo" and "bar" to the console.

One thing to be aware of is that with functions declared with a function statement, the meaning of the this keyword inside that function changes depending on how you invoke it. By default this is bound to whatever object is to the left of the . when the function is stored on an object and invoked with the .fn() syntax. For example:

function logCallback(fn) {
  let example = { callback: fn };
  // when fn() is executed, "this" will be bound to the example object
  console.log(example.fn());
}

So if you use this in your function body, and then you pass that function as a callback, you should call bind(this) when you do so to prevent changes in the meaning of this:

logCallback(this.myFunction.bind(this));
3 Likes
3

this is definitely working. but I have a small problem about passing arguments along with function.
this is my current project link. very messy but idk

i have a small function

function doThis(situation){
  print(situation);
}

but when I try to save this to a veriable/container like this doThis("hello")… i think it executes the function right there. so i get an “not a function” error afterwards.
(I dont want to return the output. i want to be able to do anything with that function. not just return value then pass it to another specific function)

how can I save the function with arguments so I can execute it when I press the button?

1 Like
4

There are two ways to make a function that already has arguments specified.

  1. Use Bind: doThis.bind(null, "hello")
    • The first argument to bind specified what this should be bound to
    • The remaining arguments are passed to the function when it is called.
    • If the caller passes more arguments to the function returned from bind() then those arguments will be passed as additional arguments after the ones from bind(). In functional programming this is called “partial application.”
  2. Use an arrow function expression: () => doThis("hello")
    • This basically creates a new function that takes a different set of arguments and invokes the original function.
    • This is especially useful if you need to actually take some parameters and control the order they are passed to your actual function.
3 Likes