Estoy trabajando en diferentes algoritmos de generación de laberintos y uso p5.js para representar los diferentes pasos de la generación en la pantalla. Ya completé un proyecto en el que hago todo, desde el método de dibujo, y fue divertido. Ahora, me gustaría tener archivos separados, cada uno conteniendo un algoritmo. ¿Cómo visualizo los pasos de un algoritmo seleccionado, sabiendo que está en un archivo diferente? He probado los métodos noLoop() y redraw( ) sin éxito hasta ahora. A continuación se muestra mi sketch.js y mi archivo grid.js
boceto.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. }grilla.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); } } }Me gustaría que esa función se actualice secuencialmente para que las líneas aparezcan una a la vez. Eso me permitiría agregar más funciones en el futuro (como colorear la celda para mostrar en qué celda se encuentra el algoritmo).
Gracias.
Investigué un poco y activé el "modo de instancia".
ver https://p5js.org/reference/#/p5/p5
Así es como resolví mi problema:
index.html -> creando divs que contendrán cada uno un boceto separado.
<body> <div> <div class="binaryMaze"></div> </div> <div> <div class="sindeWinderMaze"></div> </div> </body>sketch.js -> (archivo principal) Instanciamos una nueva instancia de p5 y le asignamos la función de objeto que contiene el boceto de p5.js. El segundo argumento es el nodo html donde quiero que esté ese boceto (aquí mi 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 } }