Understanding paint depth & opacity in p5js & webgl


In this example, I am confused that the green plane is over the red plane when on the right side of the sketch. If I change the opacity of the planes to 100%, then I get the expected paint order.

Is this a bug in my code, the library, or somewhere deeper? Where do I look for help in addressing this problem?

Thank you!


Not sure, but could it be related to depth testing?