Getting the Mouse Coordinates Right

• Demo
• We have a basic problem
  • The mouse coordinates are in "canvas" or even "browser" coordinates.
  • We need them in WebGL "projection" space.
  • Or later, we might need them in "modeling" space.
• Consider the following set up
  • We start off with
  • 
    The upper right hand corner of the canvas at (Ax, Ay) or (0,0)
    • The lower left hand corner of the canvas at (Bx, By) or (width, height)
    • The projection space box (-1, -1) to (1,1) represented as (Lx, Ly) to (Ux, Uy).
    • I am going to use this notation to keep it generic.
  • To make things easy, we need to flip the y coordinate of the input.
    • Consider:
      • 
      • Subtract y from By will "flip" it,
        But we will be off by Ay, so add it back in.
        • Do the mapping for 1,2,3,4,5
      • y' = By-y+Ay
      • x' = x
      • 
    • The next step is to map (Ax, Bx) to (0,0)
      • This is just a matter of subtracting (Ax,Ay) from all points.
      • x' = x-Ax
      • y' = (By-y+Ay)-Ay = By-y
      • 
    • The next step is to "shrink" the entire canvas to the space (0,0) to (1,1)
      • This is accomplished by dividing by (Bx-Ax, By-Ay)
      • x' = (x-Ax)/(Bx-Ax)
      • y' = (By-y)/(By-Ay)
      • 
    • Next scale it to the proper width and height
      • x' = (x-Ax) * (Ux-Lx)/(Bx-Ax)
      • y' = (By-y) * (Uy-Ly)/(By-Ay)
      • 
    • Finally, translate the (0,0) to (Lx, Ly)
      • x' = Lx+ (x-Ax) * (Ux-Lx)/(Bx-Ax)
      • y' = Ly+ (By-y) * (Uy-Ly)/(By-Ay)
    • The actual code is

    •     ClickFunc: function (me, evnt) {
            // the actual location of the click
            var x = evnt.clientX;
            var y = evnt.clientY;
            console.log("(x,y)", x,y);
      
            var Ax = me.x;
            var Ay = me.y;
            var Bx = this.canvas.width+me.x;
            var By = this.canvas.height+me.y;
            console.log("Canvas", Ax, Ay, Bx, By);
      
            var Lx = -1;
            var Ly = -1;
            var Ux = 1;
            var Uy = 1;
      
            var xp, yp;
      
            // do the transformation we discussed.
            xp = Lx + (x-Ax)*(Ux-Lx)/(Bx-Ax);
            yp = Ly + (By-y)*(Uy-Ly)/(By-Ay);
      
            this.gl.uniform1f(this.xoff, xp);
            this.gl.uniform1f(this.yoff, yp);
      
            this.Redisplay();
          }
      

    • I would probably simplify where possible
      • everything but x and y are constants.
      • so, for example, (Ux-Lx)/(Bx-Ax) could be precomputed.