Include a dynamic button on p5_loading screen

justinpeake

I'm using a preload screen to wait for my assets to load in my sketch and....

I'd like to have a button element on the id="p5_loading" screen that is greyed out and becomes avail for clicking once everything is loaded.

I want the user to click that button in order to "enter site" aka run setup.

Is that possible?

blindfish

Possibly not - in the literal sense. If you're using preload() I see no callback function that gets run when loading of assets completes; so you've got nothing to hook into there. It looks like it goes straight through to setup() and then into draw... So you've got no way to literally pause execution.

Of course there's nothing to stop you giving the user the impression they're setting everything off; and in fact waiting for user input before anything actually happens in draw. I'm new to P5 (but not JavaScript); but you have the ability to inject the sketch into a named div; so you could:

• use CSS to hide that div
• code a button to be inactive by default
• add a variable and set it to false - e.g. isRunning = false;
• use a condition in draw checking the value of isRunning to stop anything happening
• when setup runs you set the button as active
• when the button is clicked change the class on the hidden div to reveal it and set isRunning to true

justinpeake

thanks!

lmccart

You can't pause execution of setup, but you could create another function that does what you would want to do in setup, and sets a boolean variable to put the sketch in a "running" state. Something like this:

var b;
var running;

function preload() {
  running = false;
  b = createButton();
  b.attribute('disabled', true);
  // load stuff
}

function setup() {
  b.attribute('disabled', false);
  b.mousePressed(start);
}

function start() {
  running = true;
  // other setup stuff
}

function draw() {
  if (running) {
    // normal draw stuff
  }
}

justinpeake

Nice, Lauren. Thanks!