The main issue at hand is related to the execution of multiple sketches in a p5.js instance. Each sketch, representing an in-browser video game, should ideally finish running before the next one begins. However, due to the behavior of the for-loop in defining and running sketches, all sketches end up running simultaneously.
To address this problem and ensure that each sketch completes before the next one starts, it might be necessary to pass specific variables to each sketch that control the execution flow using functions like noLoop() and Loop(). It's a potential solution to coordinate the timing of sketch removal and initiation effectively.
Below is a stripped-down example in HTML showcasing the challenge:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e7e3b4e3f203c">[email protected]</a>/lib/p5.js"></script>
</head>
<body></body>
<script>
/* Function to define sketch with parameter 'a' */
function defineSketch(a) {
let sketch = function(p) {
let x = 100;
let y = 100;
p.setup = function() {
p.createCanvas(700, 410);
};
p.draw = function() {
p.background(0);
p.fill(255);
p.rect(x, y, a*50, a*50);
};
/* Remove sketch on mouse press */
p.mousePressed = function() {
p.remove();
};
};
}
/* Initialize sketch variable */
let trialSketch;
/* Array of parameters */
let param_seq = [0, 1, 2];
/* For loop to sequentially run sketches with different parameters */
for(let i = 0; i < param_seq.length; i++ ) {
trialSketch = defineSketch(param_seq[i]);
new p5(trialSketch);
}
</script>
</html>