Tint image with alpha transparency in WEBGL

p5.js Libraries
1

Hi all!

Background

I’m trying to figure out how to set the alpha channel on an image using tint when the sketch is in WEBGL mode.

I’m building a React app that integrates p5.js. My code uses a physics library to create bodies in the sketch and the physics library controls the drawing of p5 images (the physics library is responsible for updating the positions/orientation of the images).

When users press a button press in the interface, the alpha value stored on a Collection of physics objects is updated. I modified the physics library to read this alpha value into the external library when drawing the images (all SVGs). Toggling the button changes alpha from being fully opaque (255) to semi-transparent (50). My code works as expected in normal draw mode, but when I turn on WEBGL there is no change in the transparency of the image.

If this helps, my project uses:

Code

To get to work with React, I pass in a reference to the sketch instance when the physics world is created, what I call ctx.

I modified the draw function of the library to apply a tint to the image, but this isn’t working in WEBGL. Note: I’ve removed the code that isn’t directly relevant to drawing p5.Images.

draw() {
      // ...
      // Code to establish the position of the object from the physics library before drawing

      // Drawing logic
        if (this.fixtures[i].image != null) {
          if (Array.isArray(xy))
            ctx.image(this.fixtures[i].image, 0, 0);
          else {
           // MY MODIFIED CODE
            ctx.push();
              ctx.tint(255, this.parentClass.getParentCollection().getOpacity());
              ctx.image(this.fixtures[i].image, 0, 0, xy.x, xy.y);
            ctx.pop();
          }

        }
        else {
          // ....
          // if no image is provided, the code just draws primitive p5 shapes
      }
      return false;
    }

Question

Is it possible to update my draw statement to set the same tint behavior in WEBGL that works in regular draw mode?

2

Bumping this back up the queue. Anyone have success getting Tint/transparency to work on PImages when rendering with WebGL?

EDIT

I created a JSFiddle that demonstrates the issue: https://jsfiddle.net/kgt6rjof/

You will need to enable CORS on your browser to get the image to load properly

3

Temporary fix for this problem:

For anyone else who has this problem, I believe I’ve fixed the issue for now:

My project’s package.json specified v. ^1.0.0 of p5 and not 0.10.2. I downgraded the package back to the previous version and tint is now working.