P5.js: convert p5.graphics to p5.Image?

[mikima]

Posting here since the processing forum is closed to newcomers.

If this breaks the repo rules, please remove this issue.

It's not clear to me which is the best way to convert a p5.graphics to a p5.Image.

At the moment i'm doing this:

var pg = createGraphics(400,400);
//do stuff inside pg
var img = createImage(pg.width,pg.height);
img.copy(pg, 0, 0, pg.width, pg.height, 0, 0, pg.width, pg.height);

I imagine there's a better way but i'm not able to figure it out.

[Spongman]

That's probably the best way to do it.

My question is this, though: why do you need to create a p5.Image ? Is there something you're trying to do where using the p5.Graphics object directly doesn't work?

[mikima]

So the point is that i want to create a custom-shaped mask that follows the mouse and apply it to a graphic element.

My solution was to draw two p5.Graphics, one for the mask and one for the contents.
The problem is that mask() is available only for p5.Images, therefore i have the need of converting it. Here is an example: https://alpha.editor.p5js.org/mikima/sketches/SkEXyPvpf

Probably this is not the simplest solution, in case would be great if you can point me in the right direction.

[kjhollen]

hi @mikima, thanks for reporting this! we recently moved to a new forum, here: https://discourse.processing.org/

it looks like you were able to find a solution, so I'm going to close this. hopefully the forum will be helpful in the future!

[mikima]

Thanks. It would be however useful to use mask() directly on p5.Graphics, or otherwise add a quick way to get a p5.Image from p5.Graphics objects.