Big Ben GamerGuyKSPMC Big Ben GamerGuyKSPMC - 7 months ago 67
HTML Question

p5.js manually call setup and draw

I am making an online game with p5.js and I would like to manually call setup, and once setup is called I want draw() to run.

For example, if I click a button:

<button id="somebutton" onclick="setup()">CLICK ME!!!</button>

Then the canvas will be created and all of the stuff in setup will be run and draw() will run.


Why do you want to do this?

Processing needs to do a bunch of things related to calling the setup() function, so there's almost never a good reason for you to call it manually.

Using a Variable

If you want to not start your sketch until you click a button, you should do that separately from the setup() function. You could just keep track of a boolean that tells Processing whether to start the sketch, then set that boolean when you click the button. Something like this:

var started = false;

function setup(){
   createCanvas(windowWidth, windowHeight);

function draw(){
      //your code here

function start(){
   started = true;

Then in your html, you'd have:

<button id="somebutton" onclick="start()">CLICK ME!!!</button>

Using Instance Mode

You could also use instance mode to delay the creation of your sketch. Something like this:

function startSketch(){
   var sketch = function( p ) {

     var x = 100; 
     var y = 100;

     p.setup = function() {
       p.createCanvas(700, 410);

     p.draw = function() {

   var myp5 = new p5(sketch);

Then in your html, you'd have:

<button id="somebutton" onclick="startSketch()">CLICK ME!!!</button>