Make worldToScreen/screenToWorld accept x,y,[z] coordinates

Author: bojidar-bg

src/core/environment.js

@@ -1272,7 +1272,9 @@ function environment(p5, fn){
    * of 3D objects.
    *
    * @method worldToScreen
-   * @param {p5.Vector} worldPosition The 3D coordinates in the world space.
+   * @param {Number|p5.Vector} x The x coordinate in world space. (Or a vector for all three coordinates.)
+   * @param {Number} y The y coordinate in world space.
+   * @param {Number} [z] The z coordinate in world space.
    * @return {p5.Vector} A vector containing the 2D screen coordinates.
    * @example
    * <div>
@@ -1384,22 +1386,29 @@ function environment(p5, fn){
    *
    */
   fn.worldToScreen = function(worldPosition) {
+    if (typeof worldPosition === "number") {
+      // We got passed numbers, convert to vector
+      worldPosition = this.createVector(...arguments);
+    }
+
     const matrix = this._renderer.getWorldToScreenMatrix();
     const screenPosition = matrix.multiplyAndNormalizePoint(worldPosition);
     return screenPosition;
   };
   /**
    * 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.
+   * This function takes a vector and converts its coordinates from coordinates
+   * on the screen to coordinates in the currently drawn object. 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.
+   * If given, the Z component of the input coordinates is treated as "depth",
+   * or distance from the camera.
    *
    * @method screenToWorld
-   * @param {p5.Vector} screenPosition The coordinates in screen space.
+   * @param {Number|p5.Vector} x The x coordinate in screen space. (Or a vector for all three coordinates.)
+   * @param {Number} y The y coordinate in screen space.
+   * @param {Number} [z] The z coordinate in screen space.
    * @return {p5.Vector} A vector containing the 3D world space coordinates.
    * @example
    * <div>
@@ -1427,40 +1436,24 @@ function environment(p5, fn){
    *
    * </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) {
-    let matrixInverse = this._renderer.getWorldToScreenMatrix();
-    matrixInverse = matrixInverse.invert(matrixInverse);
+    if (typeof screenPosition === "number") {
+      // We got passed numbers, convert to vector
+      screenPosition = this.createVector(...arguments);
+    }
+
+    const matrix = this._renderer.getWorldToScreenMatrix();
+
+    if (screenPosition.dimensions == 2) {
+      // Calculate a sensible Z value for the current camera projection that
+      // will result in 0 once converted to world coordinates
+      let z = matrix.mat4[14] / matrix.mat4[15];
+      screenPosition = this.createVector(screenPosition.x, screenPosition.y, z);
+    }
+
+    const matrixInverse = matrix.invert(matrix);
 
     const worldPosition = matrixInverse.multiplyAndNormalizePoint(screenPosition);
     return worldPosition;

src/math/p5.Vector.js

@@ -34,14 +34,14 @@ class Vector {
   // This is how it comes in with createVector()
   // This check if the first argument is a function
   constructor(...args) {
-    let dimensions = args.length; // TODO: make default 3 if no arguments
     let values = args.map((arg) => arg || 0);
     if (typeof args[0] === "function") {
       this.isPInst = true;
       this._fromRadians = args[0];
       this._toRadians = args[1];
       values = args.slice(2).map((arg) => arg || 0);
     }
+    let dimensions = values.length; // TODO: make default 3 if no arguments
     if (dimensions === 0) {
       this.dimensions = 2;
       this._values = [0, 0, 0];

test/unit/core/environment.js

@@ -249,6 +249,15 @@ suite('Environment', function() {
       assert.closeTo(screenPos.y, 50, 0.1);
     });
 
+    test('worldToScreen accepts numbers with translation in 2D', function() {
+      myp5.push();
+      myp5.translate(50, 50);
+      let screenPos = myp5.worldToScreen(0, 0);
+      myp5.pop();
+      assert.closeTo(screenPos.x, 50, 0.1);
+      assert.closeTo(screenPos.y, 50, 0.1);
+    });
+
     test('worldToScreen with rotation in 2D', function() {
       myp5.push();
       myp5.translate(50, 50);
@@ -267,6 +276,15 @@ suite('Environment', function() {
       assert.closeTo(worldPos.y, 50, 0.1);
     });
 
+    test('screenToWorld accepts numbers with translation in 2D', function() {
+      myp5.push();
+      myp5.translate(50, 50);
+      let worldPos = myp5.screenToWorld(50, 50);
+      myp5.pop();
+      assert.closeTo(worldPos.x, 0, 0.1);
+      assert.closeTo(worldPos.y, 0, 0.1);
+    });
+
     test('screenToWorld with rotation in 2D', function() {
       myp5.push();
       myp5.translate(50, 50);
@@ -304,6 +322,15 @@ suite('Environment', function() {
       assert.closeTo(screenPos.y, 50, 0.1);
     });
 
+    test('worldToScreen accepts numbers with translation in 3D', function() {
+      myp5.push();
+      myp5.translate(50, 50, 0);
+      let screenPos = myp5.worldToScreen(0, 0, 0);
+      myp5.pop();
+      assert.closeTo(screenPos.x, 100, 0.1);
+      assert.closeTo(screenPos.y, 100, 0.1);
+    });
+
     test('worldToScreen with rotation in 3D around Y-axis', function() {
       myp5.push();
       myp5.rotateY(myp5.PI / 2);
@@ -329,12 +356,22 @@ suite('Environment', function() {
       let worldPos = myp5.screenToWorld(screenPos);
       assert.closeTo(worldPos.x, 0, 0.1);
       assert.closeTo(worldPos.y, 0, 0.1);
+      assert.closeTo(worldPos.z, 0, 0.1);
+    });
+
+    test('screenToWorld accepts numbers with translation in 3D', function() {
+      myp5.push();
+      myp5.translate(50, 50);
+      let worldPos = myp5.screenToWorld(100, 100);
+      myp5.pop();
+      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 screenPos = myp5.createVector(50, 50);
       let worldPos = myp5.screenToWorld(screenPos);
       myp5.pop();
       assert.closeTo(worldPos.y, 0, 0.1);
@@ -343,7 +380,7 @@ suite('Environment', function() {
     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 screenPos = myp5.createVector(50, 60);
       let worldPos = myp5.screenToWorld(screenPos);
       myp5.pop();
       assert.closeTo(worldPos.x, 10, 0.1);

test/unit/math/p5.Vector.js

@@ -52,6 +52,10 @@ suite("p5.Vector", function () {
       assert.equal(v.y, 0);
       assert.equal(v.z, 0);
     });
+
+    test("should have dimensions initialized to 2", function () {
+      assert.equal(v.dimensions, 2);
+    });
   });
 
   suite.todo("p5.prototype.createVector(1, 2, 3)", function () {
@@ -64,6 +68,10 @@ suite("p5.Vector", function () {
       assert.equal(v.y, 2);
       assert.equal(v.z, 3);
     });
+
+    test("should have dimensions initialized to 3", function () {
+      assert.equal(v.dimensions, 3);
+    });
   });
 
   suite("new p5.Vector()", function () {