How to blend two images with blend() ?

01ivier

Hi,

I want to blend img1 and img2.

With Processing, I do :

img1.blend(img2, sx, sy, sw, sh, dx, dy, dw, dh, mode);

But with p5.js, its seems I can only blend with the canevas :

blend(img2, sx, sy, sw, sh, dx, dy, dw, dh, mode);

If I specify the destination, with the syntax

img1.blend()

I get TypeError: this._renderer is undefined

However, It works fine with copy(). I can do

img1.copy(img2, ...)

Any ideas ?

Thank you.

GoToLoop

You've just stumbled upon 1 of the most gross p5.js development buggy decisions! 3:-O

In this particular case the "secret" fact that they "masquerade" to us what exactly datatype createGraphics() actually instantiates & returns to us:
http://p5js.org/reference/#/p5/createGraphics

We may think that datatype is some of the subclasses of p5.Renderer, like createCanvas() returns:
http://p5js.org/reference/#/p5.Renderer

In a certain way yes, it is kinda p5.Renderer. But it's internally wrapped up by a p5.Graphics type:
http://p5js.org/reference/#/p5.Graphics

B/c of that 3rd useless extra wrapper type, some functions which would expect a p5.Renderer as their parameter won't directly recognize objects created outta createGraphics()! :O)

In order to workaround that bad p5.js project's decision, we need to access the underlying p5.Renderer internally stored by that imbecile ad-hoc p5.Graphics.

Let's say your img1 variable stores some object returned by createGraphics().
Then you need to access "hidden private" property _renderer, which is the actual p5.Renderer object:

img1._renderer.blend.call(img1, img2, sx, sy, sw, sh, dx, dy, dw, dh, mode);

Notice that my hack above needed to rely on call() in order to pass img1 as blend()'s internal this: :ar!
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

01ivier

Thank you for all those informations ^:)^

I don't have the level (yet :-w ) to understand precisely the issue, but I get the essential (I hope [-O< )...

However, your hack raises : TypeError: img1._renderer is undefined

Did I miss something ?

GoToLoop

There's no way to pinpoint what is exactly wrong if we dunno the datatype of both img1 & img2.
That is, what expression was assigned to those 2 variables?
Another very important detail: Which p5js version you're using?