Какой более быстрый способ сохранения пикселей или состояния холста для последующего использования?

Поскольку рисование объектов с помощью p5js при каждом вызове draw () замедляет мой эскиз, я хотел сохранить копию моего холста без каких-либо движущихся объектов, а затем перерисовывать только часть фона, которая ранее была покрыта движущимся объектом всякий раз, когда он движется.

Я попытался создать массив цветов, используя функцию get (), и спустился по всему экрану в надежде, что тогда я смогу просто взять из него патч и заменить все, что нужно, на то, что было раньше. Это бы сработало, но создание копии всего холста, особенно когда мой холст занимает весь экран браузера, очень медленное.

Я пытаюсь сохранить свой холст, чтобы позже исправить участки экрана, но это занимает слишком много времени

var defaultScreenPixels;

function savePixels(){
  for(let i = 0; i < screenHeight; i++){
    defaultScreenPixels[i] = [];
    for(let j = 0; j < screenWidth; j++){
      defaultScreenPixels[i].push(get(j, i));
    }
    console.log("Saved " + i +" row(s) of the screen, " + (screenHeight - i) 
+" rows to go");
  }
}
0
задан Vadim Kim 26 June 2019 в 23:47
поделиться

1 ответ

p5js имеет встроенный API, называемый createGraphics (), который в соответствии с документацией создает и возвращает новый объект p5.Renderer. Используйте этот класс, если вам нужно рисовать в буфере за пределами экрана. Два параметра определяют ширину и высоту в пикселях. Что делает то, что вы пытаетесь сделать, и, скорее всего, будет гораздо быстрее, чем делать это по одному пикселю за раз.

См. P5js.org/reference/#/p5/createGraphics для получения дополнительной информации.

Здесь приведен пример, в котором вы используете image () для копирования внеэкранного графического буфера обратно на экран. http://p5js.org/examples/structure-create-graphics.html

1
ответ дан John 26 June 2019 в 23:47
поделиться
Другие вопросы по тегам:

Похожие вопросы: