I'm trying to take user input and use it to generate some things. It works when I hardcode the inputs for the generator like this:
function setup() {
createCanvas(1280, 512);
generator = new Room_map(5, 10, 15);
generator.draw();
}
However, when I try to take user input and generate when the user clicks the 'generate' button, the error in the title shows up.
I followed the guide on p5.js reference (https://p5js.org/examples/dom-input-and-button.html) and this is my code for taking user input:
function setup() {
createCanvas(1280, 512);
generator = new Room_map(5, 10, 15);
input_no_of_rooms = createInput();
input_no_of_rooms.position(1100, 50);
input_min_size = createInput();
input_min_size.position(1100, 90);
input_max_size = createInput();
input_max_size.position(1100, 130);
if (input_no_of_rooms > 0 &&
input_min_size > 0 &&
input_max_size > 0)
{
generator = new Room_map(
input_no_of_rooms.value(),
input_min_size.value(),
input_max_size.value())
}
button = createButton('Generate');
button.position(1100, 155);
button.mousePressed(generator.draw());
background(200);
push();
fill(0);
text("Number of rooms: ", 1095, 40);
text("Min room size: ", 1095, 80);
text("Max room size: ", 1095, 120);
pop();
}
I have no draw function in my code.
This line of code is the issue:
button.mousePressed(generator.draw());
This will invoke generator.draw() once and register whatever it returns as the mousePressed handler. Since you did not include the code for Room_map I can only speculate what draw() does, but I'm guessing it does not return a function object, and probably returns undefined. As a result whenever the mouse is pressed there will be an error because you cannot invoke undefined as a function. What you probably meant to do is use an anonymous function:
button.mousePressed(() => generator.draw());