title: How to zoom into mouse position with correct translation
body: <p>I'm trying to zoom a grid in Processing and I am having trouble with applying the correct translation such that zooming is centered around the mouse position. I have searched the web for a while but nothing I try seems to work.</p>
  
  <p>The screen size is <code>width</code> and <code>height</code> and the mouse position is <code>mouseX</code> and <code>mouseY</code>. </p>
  
  <p>The code I have at the moment is below, but it zooms the grid (controlled by <code>player.zoom</code>) from the top left corner which is not what I want. To update the translation of the grid, <code>player</code> has the 2d vector <code>player.translate</code>.</p>
  
  <pre><code>void mouseWheel(MouseEvent event) {
    float zoomFactor = 200.0f;
  
    float scroll = event.getCount();
    player.zoom -= scroll * player.zoom / zoomFactor;
  
    // player.translate.x += something;
    // player.translate.y += something;
  }
  </code></pre>
  
  <p>If you need more details to answer I can link the repo with the source code.</p>