如何与p5js绘图循环并行运行代码？

Question

我正试图从编码列车上运行一个像这一个这样的群集模拟。

我在想，我可以通过在一个单独的异步循环中并行于p5绘图循环运行我的代码来加快速度。我的模拟代码可以更新机器人的位置，p5代码可以绘制机器人。这样，绘制循环就不必被模拟代码减慢，我的代码也不必被绘图减慢。

你认为这样会加快模拟速度，或者至少允许p5以更高的帧速率绘制？你将如何并行地运行这两者？

谢谢你的帮忙!

Answer 1

你认为这样会加快模拟速度吗？

这取决于，如果模拟代码非常昂贵，可能是的。

你将如何并行运行这两种方式？

使用具有无穷尽循环的异步功能。例如：

function setup() {
    // ...
    simulationLoop();
}

function draw() {
    // ...
}

async function simulationLoop() {

    while (true) {
        // calculate simulation

        await sleep(1); 
    }
}

function sleep(ms) {
    return new Promise(resolve => {setTimeout(() => { resolve(true); }, 1); });
}

请参见使用此技术可视化合并排序算法的如何在合并排序期间“暂停”以可视化JS p5js。

甚至可能通过使用setTimeout创建一个固定频率的循环。例如：

​

var count = 0;

function setup() {
    createCanvas(500, 200);
    simulationLoop();
}

function draw() {
    background(0);
    stroke(0);
    fill(255);
    textSize(50);
    text(str(count), 10, 60);
}

async function simulationLoop() {

    while (true) { 
        await new Promise(resolve => {
            setTimeout(() => {
                resolve(true);
                simulation();
            }, 1000); 
        });
    }
}

function simulation() {
    count ++;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

​

另一个简单的选择是使用requestAnimationFrame()

​

var count = 0;

function setup() {
    createCanvas(500, 250);
    requestAnimationFrame(simulation);
}

function draw() {
    background(0);
    stroke(0);
    fill(255);
    textSize(50);
    text(str(count), 10, 60);
}

function simulation(deltaTime) {
    
    count = Math.trunc(deltaTime / 1000);
    
    requestAnimationFrame(simulation);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

​