Storing PGraphics to List of Images?

p5.js Coding Questions
1

Hi all,

I want to “pre-render” some PGraphics to a list of images, what is the function to copy the PImage as an image (similar to how image() treats PGraphics as parameter as an image).

Here is what I want to do in code:

let pg;
let flipbook = [];

function setup() {
  // ...
  bg = createGraphics(300, 300);
  makeFlipbook();
}

function makeFlipbook() {
  for (let i = 0; i < 200; i++) {
    // ... draw stuff in 'pg'
    
    flipbook.push(pg.copy()); // ???
  }
}

function draw() {
  let frame = frameCount % flipbook.length;
  image(flipbook[frame], 0, 0);
}

Note that I attempted to use .copy() because that’s how to copy the PImage from the graphic in Processing. But that doesn’t seem to work here. Please help.

Thanks in advance.

1 Like
2

https://p5js.org/reference/#/p5.Image/copy

should it be more like

new.copy(pg)
3

I did not test it this, but your call should be like this:

 flipbook.push(pg.get());

The intended behavior of get() should be the same in both P5.js and Processing Java.

Kf