Solves issue #7059

src/core/environment.js

@@ -1137,6 +1137,47 @@ function exitFullscreen() {
   }
 }
 
+
+/**
+ * Converts 3D world coordinates to 2D screen coordinates.
+ *
+ * This function takes a 3D vector and converts its coordinates
+ * from the world space to screen space. This is useful for placing
+ * 2D elements in a 3D scene or for determining the screen position
+ * of 3D objects.
+ *
+ * @method worldToScreen
+ * @param {p5.Vector} worldPosition The 3D coordinates in the world space.
+ * @return {p5.Vector} A vector containing the 2D screen coordinates.
+ * @example
+ * <div>
+ * <code>
+ * </code>
+ * </div>
+ */
+p5.prototype.worldToScreen = function(worldPosition) {
+  const renderer = this._renderer;
+  if (renderer.drawingContext instanceof CanvasRenderingContext2D) {
+    // Handle 2D context
+    const transformMatrix = new DOMMatrix()
+      .scale(1 / pixelDensity())
+      .multiply(renderer.drawingContext.getTransform());
+    const screenCoordinates = transformMatrix.transformPoint(
+      new DOMPoint(worldPosition.x, worldPosition.y));
+    return createVector(screenCoordinates.x, screenCoordinates.y);
+  } else{
+    // Handle WebGL context
+    const cameraCoordinates = renderer.uMVMatrix.multiplyPoint(worldPosition);
+    const normalizedDeviceCoordinates =
+    renderer.uPMatrix.multiplyAndNormalizePoint(cameraCoordinates);
+    const screenX = (0.5 + 0.5 * normalizedDeviceCoordinates.x) * this.width;
+    const screenY = (0.5 - 0.5 * normalizedDeviceCoordinates.y) * this.height;
+    const screenZ = (0.5 + 0.5 * normalizedDeviceCoordinates.z);
+    return createVector(screenX, screenY, screenZ);
+  }
+};
+
+
 /**
  * Returns the sketch's current
  * <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL" target="_blank">URL</a>

test/unit/core/environment.js

@@ -236,4 +236,91 @@ suite('Environment', function() {
       assert.isNumber(myp5.displayDensity(), pd);
     });
   });
+
+  suite('2D context test', function() {
+    beforeEach(function() {
+      myp5.createCanvas(100, 100);
+    });
+
+    test('worldToScreen for 2D context', function() {
+      let worldPos = myp5.createVector(50, 50);
+      let screenPos = myp5.worldToScreen(worldPos);
+      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);
+      myp5.rotate(myp5.PI / 2);
+      let worldPos = myp5.createVector(10, 0);
+      let screenPos = myp5.worldToScreen(worldPos);
+      myp5.pop();
+      assert.closeTo(screenPos.x, 50, 0.1);
+      assert.closeTo(screenPos.y, 60, 0.1);
+    });
+
+    test('worldToScreen for a rotating square in 2D', function() {
+      myp5.push();
+      myp5.translate(50, 50);
+      myp5.rotate(myp5.PI / 4);
+      let vertices = [
+        myp5.createVector(-10, -10),
+        myp5.createVector(10, -10),
+        myp5.createVector(10, 10),
+        myp5.createVector(-10, 10)
+      ];
+      let screenPos = vertices.map(v => myp5.worldToScreen(v));
+      myp5.pop();
+      screenPos.forEach((pos, i) => {
+        myp5.text(`(${pos.x.toFixed(1)}, ${pos.y.toFixed(1)})`, pos.x, pos.y);
+      });
+    });
+
+  });
+
+  suite('3D context test', function() {
+    beforeEach(function() {
+      myp5.createCanvas(100, 100, myp5.WEBGL);
+    });
+
+    test('worldToScreen for 3D context', function() {
+      let worldPos = myp5.createVector(0, 0, 0);
+      let screenPos = myp5.worldToScreen(worldPos);
+      assert.closeTo(screenPos.x, 50, 0.1);
+      assert.closeTo(screenPos.y, 50, 0.1);
+    });
+
+    test('worldToScreen with rotation in 3D', function() {
+      myp5.push();
+      myp5.rotateY(myp5.PI / 2);
+      let worldPos = myp5.createVector(50, 0, 0);
+      let screenPos = myp5.worldToScreen(worldPos);
+      myp5.pop();
+      assert.closeTo(screenPos.x, 50, 0.1);
+      assert.closeTo(screenPos.y, 50, 0.1);
+    });
+
+    test('worldToScreen for a rotating cube in 3D', function() {
+      myp5.push();
+      myp5.translate(0, 0, 0);
+      myp5.rotateX(myp5.PI / 4);
+      myp5.rotateY(myp5.PI / 4);
+      let vertices = [
+        myp5.createVector(-50, -50, -50),
+        myp5.createVector(50, -50, -50),
+        myp5.createVector(50, 50, -50),
+        myp5.createVector(-50, 50, -50),
+        myp5.createVector(-50, -50, 50),
+        myp5.createVector(50, -50, 50),
+        myp5.createVector(50, 50, 50),
+        myp5.createVector(-50, 50, 50)
+      ];
+      let screenPos = vertices.map(v => myp5.worldToScreen(v));
+      myp5.pop();
+      screenPos.forEach((pos, i) => {
+        myp5.text(`(${pos.x.toFixed(1)}, ${pos.y.toFixed(1)})`, pos.x, pos.y);
+      });
+    });
+  });
 });