clear python
I am working on a port of a tabletop game using P5.js. I have the basic functionality set up but I am pretty suck on how to add a UI to the canvas. I have a free moving camera so I need to come up with a way to keep the UI elements locked to the screen position even when the camera is moving and panning.
My current idea is to add some boxes that are locked to the cameras movement (they have the same translation and rotation as the camera). Using this I can get a box to stay in the same position relative to the camera as I move the camera, however I am having trouble figuring out the additional translations to get the box to appear in one of the bottom corners and setting up the rotations so the box is always pointed at the camera. Using the translate and rotate functions are a little confusing as they have to be applied in the correct order for this to work.
I have added some screen shots and some skuffed notes to help illustrate what it is I am trying to accomplish along with a few code snippets. I am hoping someone can help me figure this out or point me at a better solution.
One thing I have noticed is that even when using webgl the mouse position is still relative to the canvas and it does not use the webgl coordinates. Is there some way I can use the normal coordinate system even with webgl active? That would simplify this problem greatly. Thanks!
