3

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?

Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
defenestrated
  • 129
  • 7
  • This is a great question. I'd expect `tint()` to work on graphics as well. It works exactly how we're expecting in regular Processing. I did find [this related bug](https://github.com/processing/p5.js/issues/1181) that's talking about the canvas. You might consider filing a bug of your own. (If you're not familiar with GitHub, I can do that for you if you want. Just let me know.) – Kevin Workman May 17 '17 at 21:13
  • @KevinWorkman That's an interesting bug, but still dealing with images rather than rendering contexts themselves... I can definitely file a new bug, but I want to be sure that it's _actually_ a bug, and not instead a problem of documentation – I found a workaround that I'll add below, which might help clarify things – defenestrated May 18 '17 at 15:00
  • Honestly I would still file a bug. Worst case scenario we get confirmation from a developer that this is the intended behavior. – Kevin Workman May 18 '17 at 17:09

1 Answers1

2

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)

defenestrated
  • 129
  • 7
  • @KevinWorkman see what I mean about the bug? It's not... _broken_, per se, just confusing, because the way you render a graphics buffer is with `image()`, implying that the same methods that work on `Image` objects should also work on `p5.Renderer` objects... what do you think? – defenestrated May 18 '17 at 15:12