p5.js redraw from outside draw

user_11287984 0
Viewed 127

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.

p5.js javascript
1 Answers

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
    }
}
user_112879840
Related