Add Tint support in WebGL

[vedhant]

Fixes #2530.

[stalgiag]

Good first pass! A few requested changes inline.

[stalgiag]

One simple problem that I explained inline. Other than that I'd just like to see 1 or 2 unit tests. I think that you should probably go the route of my first suggestion in the inline comment (initialize _tint with a default value in RendererGL), then you can add a unit test that checks to make sure that RendererGL._tint is not null after construction. Ping me if you need help figuring out how to make the unit test. Simplest todo here would be to make a new suite in the RendererGL unit tests after the renderer has been made and assert that myp5._renderer._tint is not null.

Also I would make a new manual test as well.

[stalgiag]

This causes this example sketch to break:

let img;
function preload() {
  img = loadImage('../webgl/assets/UV_Grid_Sm.jpg');
}
function setup() {
  createCanvas(400, 200, WEBGL);
  image(img, 0, 0, 100, 100);
  tint(0, 153, 204); // Tint blue
  image(img, 100, 0, 100, 100);
}

The uTint uniform in the shader will have a value of vec4(0, 0, 0, 0) when drawing the first image. There are a number of different solutions that will work. You can initialize _tint with a value in RendererGL or add an else to this conditional that send a default value when _tint is null.

[Spongman]

i would recommend using a default value instead of a conditional.

[vedhant]

I have added default value for tint and a couple of unit tests. I wanted to add a unit test for testing whether _tint is reset after draw() loop. How can do that?

[stalgiag]

I think you need to use a Promise that tests _tint on the second pass through draw before calling resolve or reject. There may be better examples elsewhere but one place to look is the structure.js tests.

[stalgiag]

Thanks @vedhant!

[ffmaer]

Thanks for the efforts. So is this feature available in p5.js 1.0.0 now? If not, when will it become available? Thanks.
Edit: I found out more about this issue: #4515

[micuat]

I just noticed that using tint inside a 2D canvas with webgl p5.Graphics cause error
https://editor.p5js.org/micuat/sketches/9hh8x1HjF

TypeError: canvas.getContext(...) is null (sketch: line 14)

[stalgiag]

Thanks @micuat ! Will you open an issue for that? I think it could be related to something else but it will be easier to track in a new thread.

[micuat]

@stalgiag done!