Add screenToWorld function mirroring worldToScreen

Co-authored-by: Garima <[email protected]>

Author: bojidar-bg

src/core/environment.js

@@ -1406,6 +1406,102 @@ function environment(p5, fn){
           return new Vector(screenX, screenY, screenZ);
     }
   };
+  /**
+   * Converts 2D screen coordinates to 3D world coordinates.
+   *
+   * This function takes a vector and converts its coordinates
+   * from the world space to screen space. This can be useful for determining
+   * the mouse position relative to a 2D or 3D object.
+   *
+   * The Z component of the screen coordinates is treated as "depth", or
+   * distance from the camera, when converting to 3D world space.
+   *
+   * @method screenToWorld
+   * @param {p5.Vector} screenPosition The coordinates in screen space.
+   * @return {p5.Vector} A vector containing the 3D world space coordinates.
+   * @example
+   * <div>
+   * <code>
+   *
+   * function setup() {
+   *   createCanvas(100, 100);
+   *   describe('A rotating square with a line passing through the mouse drawn across it.');
+   * }
+   *
+   * function draw() {
+   *   background(220);
+   *
+   *   // Move to center and rotate
+   *   translate(width/2, height/2);
+   *   rotate(millis() / 1000);
+   *   rect(-30, -30, 60);
+   *
+   *   // Compute the location of the mouse in the coordinates of the square
+   *   let localMouse = screenToWorld(createVector(mouseX, mouseY));
+   *
+   *   // Draw a line parallel to the local Y axis, passing through the mouse
+   *   line(localMouse.x, -30, localMouse.x, 30);
+   * }
+   *
+   * </code>
+   * </div>
+   * @example
+   * <div>
+   * <code>
+   *
+   * function setup() {
+   *   createCanvas(100, 100, WEBGL);
+   *   describe('A rotating square with a line passing through the mouse drawn across it.');
+   * }
+   *
+   * function draw() {
+   *   background(220);
+   *
+   *   // Animate rotation
+   *   rotateZ(millis() / 1000);
+   *   rect(-30, -30, 60);
+   *
+   *   // Transform the 0, 0 point to get the depth of the square
+   *   let center = worldToScreen(createVector(0, 0))
+   *
+   *   // Compute the location of the mouse in the coordinates of the square,
+   *   // using the depth calculated earlier
+   *   let localMouse = screenToWorld(createVector(mouseX, mouseY, center.z));
+   *
+   *   // Draw a line parallel to the local Y axis, passing through the mouse
+   *   line(localMouse.x, -30, localMouse.x, 30);
+   * }
+   *
+   * </code>
+   * </div>
+   *
+   */
+  fn.screenToWorld = function(screenPosition) {
+    const renderer = this._renderer;
+    if (renderer.drawingContext instanceof CanvasRenderingContext2D) {
+      // Handle 2D context
+      const inverseTransformMatrix = new DOMMatrix()
+        .multiply(renderer.drawingContext.getTransform().inverse())
+        .scale(renderer._pInst.pixelDensity());
+      const screenCoordinates = inverseTransformMatrix.transformPoint(
+        new DOMPoint(screenPosition.x, screenPosition.y)
+      );
+      return new p5.Vector(screenCoordinates.x, screenCoordinates.y);
+    } else {
+      const normalizedDeviceCoordinates = new p5.Vector(
+        screenPosition.x / this.width * 2 - 1,
+        screenPosition.y / this.height * -2 + 1,
+        screenPosition.z * 2 - 1,
+      );
+      let uPMatrixInverse = renderer.states.uPMatrix.copy()
+      uPMatrixInverse = uPMatrixInverse.invert(uPMatrixInverse);
+      let modelViewMatrixInverse = renderer.calculateCombinedMatrix();
+      modelViewMatrixInverse = modelViewMatrixInverse.invert(modelViewMatrixInverse);
+      const cameraCoordinates = uPMatrixInverse.multiplyAndNormalizePoint(normalizedDeviceCoordinates);
+      const worldPosition = modelViewMatrixInverse.multiplyPoint(cameraCoordinates);
+      return worldPosition;
+    }
+  };
 }
 
 export default environment;

test/unit/core/environment.js

@@ -259,6 +259,37 @@ suite('Environment', function() {
       assert.closeTo(screenPos.x, 50, 0.1);
       assert.closeTo(screenPos.y, 60, 0.1);
     });
+
+    test('screenToWorld for 2D context', function() {
+      let screenPos = myp5.createVector(50, 50);
+      let worldPos = myp5.screenToWorld(screenPos);
+      assert.closeTo(worldPos.x, 50, 0.1);
+      assert.closeTo(worldPos.y, 50, 0.1);
+    });
+
+    test('screenToWorld with rotation in 2D', function() {
+      myp5.push();
+      myp5.translate(50, 50);
+      myp5.rotate(myp5.PI / 2);
+      let screenPos = myp5.createVector(50, 60);
+      let worldPos = myp5.screenToWorld(screenPos);
+      myp5.pop();
+      assert.closeTo(worldPos.x, 10, 0.1);
+      assert.closeTo(worldPos.y, 0, 0.1);
+    });
+
+    test('screenToWorld is inverse of worldToScreen in 2D', function() {
+      myp5.push();
+      // Arbitrary rotation
+      myp5.translate(10, 10);
+      myp5.rotate(myp5.PI / 8);
+      let origWorldPos = myp5.createVector(20, 20);
+      let screenPos = myp5.worldToScreen(origWorldPos);
+      let worldPos = myp5.screenToWorld(screenPos);
+      myp5.pop();
+      assert.closeTo(worldPos.x, origWorldPos.x, 0.1);
+      assert.closeTo(worldPos.y, origWorldPos.y, 0.1);
+    });
   });
 
   suite('3D context test', function() {
@@ -292,5 +323,47 @@ suite('Environment', function() {
       assert.closeTo(screenPos.x, 50, 0.1);
       assert.closeTo(screenPos.y, 60, 0.1);
     });
+
+    test('screenToWorld for 3D context', function() {
+      let screenPos = myp5.createVector(50, 50);
+      let worldPos = myp5.screenToWorld(screenPos);
+      assert.closeTo(worldPos.x, 0, 0.1);
+      assert.closeTo(worldPos.y, 0, 0.1);
+    });
+
+    test('screenToWorld with rotation in 3D around Y-axis', function() {
+      myp5.push();
+      myp5.rotateY(myp5.PI / 2);
+      let screenPos = myp5.createVector(50, 50, 10/11);
+      let worldPos = myp5.screenToWorld(screenPos);
+      myp5.pop();
+      assert.closeTo(worldPos.y, 0, 0.1);
+    });
+
+    test('screenToWorld with rotation in 3D around Z-axis', function() {
+      myp5.push();
+      myp5.rotateZ(myp5.PI / 2);
+      let screenPos = myp5.createVector(50, 60, 10/11);
+      let worldPos = myp5.screenToWorld(screenPos);
+      myp5.pop();
+      assert.closeTo(worldPos.x, 10, 0.1);
+      assert.closeTo(worldPos.y, 0, 0.1);
+    });
+
+    test('screenToWorld is inverse of worldToScreen in 3D', function() {
+      myp5.push();
+      // Arbitrary rotation
+      myp5.translate(10, 10);
+      myp5.rotateX(myp5.PI / 3);
+      myp5.rotateY(myp5.PI / 4);
+      myp5.rotateZ(myp5.PI / 8);
+      let origWorldPos = myp5.createVector(20, 20, 0);
+      let screenPos = myp5.worldToScreen(origWorldPos);
+      let worldPos = myp5.screenToWorld(screenPos);
+      myp5.pop();
+      assert.closeTo(worldPos.x, origWorldPos.x, 0.1);
+      assert.closeTo(worldPos.y, origWorldPos.y, 0.1);
+      assert.closeTo(worldPos.z, origWorldPos.z, 0.1);
+    });
   });
 });