Как я могу запустить код параллельно с циклом рисования p5js? - PullRequest
Новая
       11

Как я могу запустить код параллельно с циклом рисования p5js?

1 голос
/ 23 октября 2019

Я пытаюсь запустить симуляцию флокирования, например , эту из состава кода.

Я думал, что смогу ускорить процесс, запустив свой код в отдельном коде. Асинхронный цикл параллельно р5 цикла рисования. Мой код симуляции мог обновить позиции boids, а код p5 мог нарисовать boids. Таким образом, цикл рисования не должен был бы замедляться кодом симуляции, а мой код не должен замедляться рисованием.

A) Как вы думаете, это на самом деле ускоритсимуляция или хотя бы позволить р5 рисовать с более высокой частотой кадров? и Б) Как бы вы запустили их параллельно?

Спасибо за вашу помощь!

1 Ответ

1 голос
/ 23 октября 2019

Как вы думаете, это на самом деле ускорит симуляцию?

Это зависит от того, если код симуляции очень дорог, вероятно, да.

Как бы вы запустили их параллельно?

Используйте асинхронную функцию с бесконечным циклом. Например: 

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>
...