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.
The code inside the draw() function runs continuously from top to bottom until the program is stopped. The code in setup() is run once when the program starts.
js library to run code locally. Visit the website https://p5js.org/download/ to download the file and set up a local server. Then run the local server within the download folder and go to the link http://localhost:{your-port-num}/empty-example.
There can only be one draw() function for each sketch, and draw() must exist if you want the code to run continuously, or to process events such as mousePressed(). Sometimes, you might have an empty call to draw() in your program, as shown in the above example.
The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had.
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.
If you want to not start your sketch until you click a button, you should do that separately from the setup()
function. You could 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);
noLoop();
}
function draw(){
if(started){
//your code here
}
}
function start(){
started = true;
loop();
}
Then in your html, you'd have:
<button id="somebutton" onclick="start()">CLICK ME!!!</button>
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() {
p.background(0);
p.fill(255);
p.rect(x,y,50,50);
};
};
var myp5 = new p5(sketch);
}
Then in your html, you'd have:
<button id="somebutton" onclick="startSketch()">CLICK ME!!!</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With