2. p.pushMatrix();
3. p.translate(visualizer.gridStart.x, visualizer.gridStart.y);
4. p.rotate(p.radians(31));
5. p.shearX(p.radians(-30));
6. p.scale(1, 0.89);
7. p.rect(0,0,50,50);
8.  console.log(p.screenX(0,0));
9. p.popMatrix();

now, in the above code, screenX works as expected. But if I push a new matrix and then transform, like this:

2. p.pushMatrix();
3. p.translate(visualizer.gridStart.x, visualizer.gridStart.y);
4. p.rotate(p.radians(31));
5. p.shearX(p.radians(-30));
6. p.scale(1, 0.89);
7. p.rect(0,0,50,50);
8.  console.log(p.screenX(0,0));
9.  p.pushMatrix();
10.  p.translate(100,100);
11.  p.rect(0,0,50,50);
12.  console.log(p.screenX(0,0));
13.  p.popMatrix();
14. p.popMatrix();

the two screenX's return results that differ wildly, when the rectangles are drawn at the same x position.

The strange thing is, I tried it in Processing and it actually returns the correct results. Is this a bug?

Here's a screenshot. You can see the (screen) X positions are rather close, but the returned results differ by about 100.

What I *really* need to do is figure out where the mouse is relative to shapes I draw under a series of matrix transforms: if there's a different way to do that, let me know. I can't reapply the transforms to the mouse points because Processing has no getMatrix() (or at least, processing.js doesn't) and I'm not good enough at Math to do it manually, especially because I have a shear. Also, I'm not using 3D, so modelXYZ won't work.