I'm working on different maze generation algorithms and I use p5.js to render the different steps of the generation on the screen. I already have completed a project where I do everything from the draw method and it was fun. Now, I would like to have separate files, each one containing an algorithm. How do I display the steps from a selected algorithm, knowing that it is in a different file. I have tried the noLoop() and redraw() methods without any success so far. Below is my sketch.js and my grid.js file
sketch.js
let grid;
function setup() {
createCanvas(800, 800)
grid = new Grid(50, 50);
let sidewinderMaze = new Sindewinder(grid);
// I tried noLoop() here
// I tried to put grid.toCanvas(width) here instead an redraw in the toCanvas method
}
function draw() {
background(51)
grid.toCanvas(width); // <- that will show the completed maze, not all the steps.
}
grid.js
Grid.prototype.toCanvas = function (canvasWidth) {
//I have tried to put loop() and redraw on different lines
let cellSize = (canvasWidth / this.rows);
for (let row = 0; row < this.rows; row++) {
for (let col = 0; col < this.columns; col++) {
let cell = this.cells[row][col];
let x1 = cell.pos.x * cellSize;
let y1 = cell.pos.y * cellSize;
let x2 = (cell.pos.x + 1) * cellSize;
let y2 = (cell.pos.y + 1) * cellSize;
stroke(255);
strokeWeight(2)
if (!cell.north)
line(x1, y1, x2, y1);
if (!cell.west)
line(x1, y1, x1, y2);
if (cell.east && !cell.isLinked(cell.east))
line(x2, y1, x2, y2)
if (cell.south && !cell.isLinked(cell.south))
line(x1, y2, x2, y2);
}
}
}
I would like that function to update sequentially so the lines appear one at a time. That would allow me to add more features in the future (like coloring the cell to show on which cell the algorithm is).
Thank you.
I have made some research and I had activate the "instance mode".
see https://p5js.org/reference/#/p5/p5
Here is how I solved my issue:
index.html -> creating divs that will each contain a separate sketch.
<body>
<div>
<div class="binaryMaze"></div>
</div>
<div>
<div class="sindeWinderMaze"></div>
</div>
</body>
sketch.js -> (main file) We instantiate a new p5 instance and we give it the object function containing the p5.js sketch. The 2nd argument is the html node where I want that sketch to be (here my div)
var sideWinderMaze = new p5(sideWinder, "sindeWinderMaze");
sidewinder.js
var sideWinder = function (sw) {
//sw could be name any name you want but make sure you
//prefix all your variables with it afterwards.
sw.canvasSize = sw.windowWidth/ 2;
sw.propertyX;
sw.propertyZ;
sw.setup = function () {
sw.createCanvas(sw.canvasSize, sw.canvasSize);
sw.propertyX = 2
...
// code you want in the setup function
};
sw.draw = function () {
sw.background(51);
//code you want in the draw function
}
}