p5.js 从外部绘制重绘

Question

我正在研究不同的迷宫生成算法，我使用 p5.js 在屏幕上呈现生成的不同步骤。我已经完成了一个项目，我从 draw 方法开始做所有事情，这很有趣。现在，我想要单独的文件，每个文件都包含一个算法。如何显示所选算法的步骤，知道它在不同的文件中。到目前为止，我已经尝试了 noLoop() 和 redraw() 方法但没有任何成功。下面是我的 sketch.js 和我的 grid.js 文件

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);
        }
    }
}

我希望该函数按顺序更新，以便一次显示一行。这将使我能够在未来添加更多功能（例如为单元格着色以显示算法在哪个单元格上）。

谢谢。

Answer 1

我做了一些研究，我已经激活了“实例模式”。

见 https://p5js.org/reference/#/p5/p5

这是我解决问题的方法：

index.html -> 创建 div 个，每个包含一个单独的草图。

<body>
    <div>
        <div class="binaryMaze"></div>
    </div>
    <div>
        <div class="sindeWinderMaze"></div>
    </div>
</body>

sketch.js ->（主文件）我们实例化一个新的 p5 实例，并为其提供包含 p5.js 草图的对象函数。第二个参数是我希望草图所在的 html 节点（这里是我的 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
    }
}

p5.js 从外部绘制重绘

p5.js redraw from outside draw

javascript

p5.js