CODEWITHSUNDEEP
renderingprocessingp5.jstintpgraphics
defenestrated
defenestrated

Reputation: 139

tint() on createGraphics() buffer in p5

I'm trying to change the opacity of an offscreen graphics buffer in p5, and can't figure it out.

consider:

var pg = createGraphics(...)
var image = loadImage(...)

tint(255, 50)
image(image, 0, 0) <----- this works
image(pg, 0, 0)    <----- but this doesn't

working example here

tint(255, x) should leave the coloring unchanged and set the opacity to x, but seems to have no effect. works fine on images, though... what am I missing?

Upvotes: 3

Views: 1111

Answers (1)

defenestrated
defenestrated

Reputation: 139

Update: It seems as though in P5 (though not in Processing), tint() does in fact work only on p5.Image objects. So, a workaround is to create a p5.Image from the offscreen graphics buffer using get() to grab pixels from the buffer (which returns an image). Confusingly, the reference article for get() also uses images, making it hard to understand what's actually happening.

An updated (working) example is here.

To reiterate, the reason this is worth doing at all is to render complex shapes (like text) only once to a buffer, then draw / manipulate that buffer as needed. This drastically reduces CPU load and speeds up the sketch.

(credit for figuring this out goes to Ian)

Upvotes: 2

Related Questions