Merge branch 'dev-2.0' into 2.0-modules

Author: limzykenneth

src/app.js

@@ -29,8 +29,8 @@ import data from './data';
 data(p5);
 
 // DOM
-import dom from './dom/dom';
-dom(p5, p5.prototype);
+import dom from './dom';
+dom(p5);
 
 // events
 import events from './events';

src/core/environment.js

@@ -7,6 +7,7 @@
  */
 
 import * as C from './constants';
+import { Vector } from '../math/p5.Vector';
 
 function environment(p5, fn){
   const standardCursors = [C.ARROW, C.CROSS, C.HAND, C.MOVE, C.TEXT, C.WAIT];
@@ -1261,10 +1262,154 @@ function environment(p5, fn){
     }
     return v;
   };
+
+  /**
+   * 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 can be 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>
+   *
+   * function setup() {
+   *   createCanvas(150, 150);
+   *   let vertices = [
+   *     createVector(-20, -20),
+   *     createVector(20, -20),
+   *     createVector(20, 20),
+   *     createVector(-20, 20)
+   *   ];
+   *
+   *   push();
+   *   translate(75, 55);
+   *   rotate(PI / 4);
+   *
+   *   // Convert world coordinates to screen coordinates
+   *   let screenPos = vertices.map(v => worldToScreen(v));
+   *   pop();
+   *
+   *   background(200);
+   *
+   *   stroke(0);
+   *   fill(100, 150, 255, 100);
+   *   beginShape();
+   *   screenPos.forEach(pos => vertex(pos.x, pos.y));
+   *   endShape(CLOSE);
+   *
+   *   screenPos.forEach((pos, i) => {
+   *     fill(0);
+   *     textSize(10);
+   *     if (i === 0) {
+   *       text(i + 1, pos.x + 3, pos.y - 7);
+   *     } else if (i === 1) {
+   *       text(i + 1, pos.x + 7, pos.y + 2);
+   *     } else if (i === 2) {
+   *       text(i + 1, pos.x - 2, pos.y + 12);
+   *     } else if (i === 3) {
+   *       text(i + 1, pos.x - 12, pos.y - 2);
+   *     }
+   *   });
+   *
+   *   fill(0);
+   *   noStroke();
+   *   textSize(10);
+   *   let legendY = height - 35;
+   *   screenPos.forEach((pos, i) => {
+   *     text(`Vertex ${i + 1}: (${pos.x.toFixed(1)}, ${pos.y.toFixed(1)})`, 5, legendY + i * 10);
+   *   });
+   *
+   *   describe('A rotating square is transformed and drawn using screen coordinates.');
+   *
+   * }
+   * </code>
+   * </div>
+   *
+   * @example
+   * <div>
+   * <code>
+   * let vertices;
+   *
+   * function setup() {
+   *   createCanvas(100, 100, WEBGL);
+   *   vertices = [
+   *     createVector(-25, -25, -25),
+   *     createVector(25, -25, -25),
+   *     createVector(25, 25, -25),
+   *     createVector(-25, 25, -25),
+   *     createVector(-25, -25, 25),
+   *     createVector(25, -25, 25),
+   *     createVector(25, 25, 25),
+   *     createVector(-25, 25, 25)
+   *   ];
+   *
+   *   describe('A rotating cube with points mapped to 2D screen space and displayed as ellipses.');
+   *
+   * }
+   *
+   * function draw() {
+   *   background(200);
+   *
+   *   // Animate rotation
+   *   let rotationX = millis() / 1000;
+   *   let rotationY = millis() / 1200;
+   *
+   *   push();
+   *
+   *   rotateX(rotationX);
+   *   rotateY(rotationY);
+   *
+   *   // Convert world coordinates to screen coordinates
+   *   let screenPos = vertices.map(v => worldToScreen(v));
+   *
+   *   pop();
+   *
+   *   screenPos.forEach((pos, i) => {
+   *
+   *     let screenX = pos.x - width / 2;
+   *     let screenY = pos.y - height / 2;
+   *     fill(0);
+   *     noStroke();
+   *     ellipse(screenX, screenY, 3, 3);
+   *   });
+   * }
+   * </code>
+   * </div>
+   *
+   */
+  fn.worldToScreen = function(worldPosition) {
+    const renderer = this._renderer;
+    if (renderer.drawingContext instanceof CanvasRenderingContext2D) {
+      // Handle 2D context
+      const transformMatrix = new DOMMatrix()
+        .scale(1 / renderer._pInst.pixelDensity())
+        .multiply(renderer.drawingContext.getTransform());
+      const screenCoordinates = transformMatrix.transformPoint(
+        new DOMPoint(worldPosition.x, worldPosition.y)
+      );
+      return new p5.Vector(screenCoordinates.x, screenCoordinates.y);
+    } else {
+          // Handle WebGL context (3D)
+          const modelViewMatrix = renderer.calculateCombinedMatrix();
+          const cameraCoordinates = modelViewMatrix.multiplyPoint(worldPosition);
+          const normalizedDeviceCoordinates =
+            renderer.states.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 new Vector(screenX, screenY, screenZ);
+    }
+  };
 }
 
 export default environment;
 
 if(typeof p5 !== 'undefined'){
   environment(p5, p5.prototype);
-}
+}

src/core/p5.Renderer2D.js

@@ -4,7 +4,7 @@ import { Renderer } from './p5.Renderer';
 import { Element } from './p5.Element';
 import { Graphics } from './p5.Graphics';
 import { Image } from '../image/p5.Image';
-import { MediaElement } from '../dom/dom';
+import { MediaElement } from '../dom/media_element';
 
 const styleEmpty = 'rgba(0,0,0,0)';
 // const alphaThreshold = 0.00125; // minimum visible