npm - p5.tree - Versions diffs - 0.0.1 → 0.0.3 - Mend

p5.tree 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -1,4 +1,5 @@
 # p5.tree
+[![npm version](https://img.shields.io/npm/v/p5.tree)](https://www.npmjs.com/package/p5.tree)
 Shader development, camera keyframes interpolation and space transformations for [WEBGL](https://p5js.org/reference/#/p5/WEBGL) / WebGPU-ready [p5.js v2](https://beta.p5js.org/).
@@ -188,8 +189,8 @@ This section covers matrix operations, matrix/frustum queries, and coordinate sp
 ## Coordinate space conversions
-1. `transformPosition(point = p5.Tree.ORIGIN, [{ [from = p5.Tree.EYE], [to = p5.Tree.WORLD], [pMatrix], [vMatrix], [eMatrix], [pvMatrix], [ipvMatrix] }])`
-2. `transformDirection(vector = p5.Tree._k, [{ [from = p5.Tree.EYE], [to = p5.Tree.WORLD], [vMatrix], [eMatrix], [pMatrix] }])`
+1. `mapLocation(point = p5.Tree.ORIGIN, [{ [from = p5.Tree.EYE], [to = p5.Tree.WORLD], [pMatrix], [vMatrix], [eMatrix], [pvMatrix], [ipvMatrix] }])`
+2. `mapDirection(vector = p5.Tree._k, [{ [from = p5.Tree.EYE], [to = p5.Tree.WORLD], [vMatrix], [eMatrix], [pMatrix] }])`
 Pass matrix parameters when you have **cached** those matrices (see [Matrix queries](#matrix-queries)) to speed up repeated conversions:
@@ -200,8 +201,8 @@ function draw() {
   cachedPVI = ipvMatrix() // compute once per frame
   // many fast conversions using the cached matrix
-  const a = transformPosition([0, 0, 0], { from: p5.Tree.WORLD, to: p5.Tree.SCREEN, ipvMatrix: cachedPVI })
-  const b = transformPosition([100, 0, 0], { from: p5.Tree.WORLD, to: p5.Tree.SCREEN, ipvMatrix: cachedPVI })
+  const a = mapLocation([0, 0, 0], { from: p5.Tree.WORLD, to: p5.Tree.SCREEN, ipvMatrix: cachedPVI })
+  const b = mapLocation([100, 0, 0], { from: p5.Tree.WORLD, to: p5.Tree.SCREEN, ipvMatrix: cachedPVI })
   // ...
 }
 ```
@@ -222,7 +223,7 @@ function draw() {
   pop()
   // screen projection of the model origin
-  const s = transformPosition(p5.Tree.ORIGIN, { from: model, to: p5.Tree.SCREEN })
+  const s = mapLocation(p5.Tree.ORIGIN, { from: model, to: p5.Tree.SCREEN })
   beginHUD()
   bullsEye({ x: s.x, y: s.y, size: 30 })
   endHUD()
@@ -234,8 +235,8 @@ function draw() {
 1. Returned vectors are `p5.Vector` instances.
 2. `from` and `to` may be matrices or any of: `p5.Tree.WORLD`, `p5.Tree.EYE`, `p5.Tree.SCREEN`, `p5.Tree.NDC`, `p5.Tree.MODEL`.
 3. When no matrix params are passed, current renderer values are used.
-4. The default `transformPosition()` call (i.e. eye → world at origin) returns the camera world position.
-5. The default `transformDirection()` call returns the normalized camera viewing direction.
+4. The default `mapLocation()` call (i.e. eye → world at origin) returns the camera world position.
+5. The default `mapDirection()` call returns the normalized camera viewing direction.
 6. Useful vector constants: `p5.Tree.ORIGIN`, `p5.Tree._k`, `p5.Tree.i`, `p5.Tree.j`, `p5.Tree.k`, `p5.Tree._i`, `p5.Tree._j`.
 ## Heads Up Display
@@ -265,43 +266,97 @@ A small collection of helpers commonly needed in interactive 3D sketches:
 Debug / teaching primitives for visualizing common 3D concepts:
 1. `axes({ size, colors, bits })`
-2. `grid({ size, subdivisions, style })`
+2. `grid({ size, subdivisions })`
 3. `cross({ mMatrix, x, y, size, ... })`
 4. `bullsEye({ mMatrix, x, y, size, shape, ... })`
 5. `viewFrustum({ pg, bits, viewer, eMatrix, pMatrix, vMatrix })`
 ---
-# Installation
+# Releases
-Link `p5.tree.js` after you have linked in `p5.js`. For example:
+- **Latest (v0.0.3):**
+  These links always point to the latest published version on npm.
+  - [p5.tree.js (unminified, IIFE)](https://cdn.jsdelivr.net/npm/p5.tree/dist/p5.tree.js)
+  - [p5.tree.min.js (minified, IIFE)](https://cdn.jsdelivr.net/npm/p5.tree/dist/p5.tree.min.js)
+  - [p5.tree.esm.js (ES module)](https://cdn.jsdelivr.net/npm/p5.tree/dist/p5.tree.esm.js)
+  - [npm package](https://www.npmjs.com/package/p5.tree)
-```html
-<!doctype html>
-<html>
-<head>
-  <script src="p5.js"></script>
-  <script src="p5.sound.js"></script>
-  <script src=https://cdn.jsdelivr.net/gh/VisualComputing/p5.tree/p5.tree.js></script>
-  <script src="sketch.js"></script>
-</head>
-<body>
-</body>
-</html>
-```
+- **Current tagged version (v0.0.3):**
+  Use these if you want to lock to a specific version.
+  - [p5.tree@0.0.3.js (unminified, IIFE)](https://cdn.jsdelivr.net/npm/p5.tree@0.0.3/dist/p5.tree.js)
+  - [p5.tree@0.0.3.min.js (minified, IIFE)](https://cdn.jsdelivr.net/npm/p5.tree@0.0.3/dist/p5.tree.min.js)
+  - [p5.tree@0.0.3.esm.js (ES module)](https://cdn.jsdelivr.net/npm/p5.tree@0.0.3/dist/p5.tree.esm.js)
+  - [npm package (v0.0.3)](https://www.npmjs.com/package/p5.tree/v/0.0.3)
+---
+# Usage
+The library works in two setups:
+- **[CDN](#cdn)**: Use the [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) (Immediately Invoked Function Expression) format with `<script>` tags directly in the browser, along with [p5.js](https://beta.p5js.org/).
+- **[npm](#npm-esm)**: Use the [ES module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) version in modern projects with [Vite](https://vitejs.dev/) or another bundler.
+## CDN
-To include the minified build (when available):
+Include both libraries using `<script>` tags, which run in both [global](https://github.com/processing/p5.js/wiki/Global-and-instance-mode) and [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode).
 ```html
-<script src=https://cdn.jsdelivr.net/gh/VisualComputing/p5.tree/p5.tree.min.js></script>
+<!-- index.html -->
+<!-- Load p5.js first (required by p5.tree) -->
+<script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js"></script>
+<!-- Load p5.tree (latest stable version) -->
+<script src="https://cdn.jsdelivr.net/npm/p5.tree/dist/p5.tree.js"></script>
+<script>
+  function setup() {
+    createCanvas(600, 400, WEBGL)
+    // Example: draw world axes
+    axes(100)
+  }
+  function draw() {
+    background(0.15)
+    orbitControl()
+  }
+</script>
+````
+You can run the example, which uses global mode, by opening the `index.html` file in a browser, or by using [VSCodium](https://vscodium.com/) (recommended) or [Visual Studio Code](https://code.visualstudio.com/) with the [Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
+## npm (ESM)
+Install both [`p5`](https://www.npmjs.com/package/p5) and [`p5.tree`](https://www.npmjs.com/package/p5.tree) as dependencies:
+```bash
+npm i p5 p5.tree
 ```
-# [vs-code](https://code.visualstudio.com/) & [vs-codium](https://vscodium.com/) & [gitpod](https://www.gitpod.io/) hacking instructions
+Then import them in your project’s entry file (e.g. `main.js`) using a modern bundler like [Vite](https://vitejs.dev/), which runs in [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode) only:
-Clone the repo (`git clone https://github.com/VisualComputing/p5.tree`) and open it with your favorite editor.
+```js
+// main.js
+import p5 from 'p5'
+import 'p5.tree'
+const sketch = p => {
+  p.setup = () => {
+    p.createCanvas(600, 400, p.WEBGL)
+    // Example: draw world axes
+    p.axes(100)
+  }
+  p.draw = () => {
+    p.background(0.15)
+    p.orbitControl()
+  }
+}
-If you are developing against p5 v2, keep an eye on:
+new p5(sketch)
+```
-1. [Creating libraries](https://beta.p5js.org/contribute/creating_libraries/)
-2. [p5.js source architecture](https://github.com/processing/p5.js/blob/main/src/core/README.md)
-3. [WEBGL mode architecture](https://github.com/processing/p5.js/blob/main/contributor_docs/webgl_mode_architecture.md)
+This approach provides full modularity, clean instance isolation, and compatibility with modern JavaScript tooling.

package/dist/p5.tree.esm.js CHANGED Viewed

@@ -2,7 +2,7 @@ import p5 from 'p5';
 /**
  * @file Adds Tree rendering functions to the p5 prototype.
- * @version 0.0.1
+ * @version 0.0.3
  * @author JP Charalambos
  * @license GPL-3.0-only
  *
@@ -38,7 +38,7 @@ p5.registerAddon((p5, fn, lifecycles) => {
   const CONST = value => ({ value, writable: false, enumerable: true, configurable: false });
   Object.defineProperties(p5.Tree, {
-    VERSION: CONST('0.0.1'),
+    VERSION: CONST('0.0.3'),
     NONE: CONST(0),
@@ -48,6 +48,7 @@ p5.registerAddon((p5, fn, lifecycles) => {
     NDC: CONST('NDC'),
     SCREEN: CONST('SCREEN'),
     MODEL: CONST('MODEL'),
+    OBJECT: CONST('MODEL'), // alias of MODEL (shader terminology)
     // Points and vectors
     ORIGIN: CONST(Object.freeze([0, 0, 0])),
@@ -68,9 +69,6 @@ p5.registerAddon((p5, fn, lifecycles) => {
     Z: CONST(1 << 4),
     _Z: CONST(1 << 5),
     LABELS: CONST(1 << 6),
-    DOTS: CONST(0),
-    SOLID: CONST(1),
     // bullsEye
     CIRCLE: CONST(0),
@@ -815,7 +813,7 @@ p5.registerAddon((p5, fn, lifecycles) => {
   /**
    * Interpolate camera pose at normalized global t in [0..1] along the whole path.
-   * Also updates internal seg/f so playPath resumes from that location.
+   * Also updates internal seg/f so playPath resumes from that position.
    */
   const seekGlobal = function (cam, t) {
     const path = ensurePath(cam);
@@ -1441,7 +1439,7 @@ p5.registerAddon((p5, fn, lifecycles) => {
   };
   // ---------------------------------------------------------------------------
-  // Space transforms: transformPosition / transformDirection
+  // Space transforms: mapLocation / mapDirection
   // ---------------------------------------------------------------------------
   p5.RendererGL.prototype._parseTransformArgs = function (defaultMainArg, ...args) {
@@ -1461,8 +1459,8 @@ p5.registerAddon((p5, fn, lifecycles) => {
   // Points (positions)
   // ---------------------------------------------------------------------------
-  fn.transformPosition = function (...args) {
-    return _rendererGL(this)?.transformPosition(...args);
+  fn.mapLocation = function (...args) {
+    return _rendererGL(this)?.mapLocation(...args);
   };
   /**
@@ -1479,12 +1477,12 @@ p5.registerAddon((p5, fn, lifecycles) => {
    * @param {p5.Matrix} [opts.ipvMatrix]
    * @returns {p5.Vector}
    */
-  p5.RendererGL.prototype.transformPosition = function (...args) {
+  p5.RendererGL.prototype.mapLocation = function (...args) {
     const { mainArg, options } = this._parseTransformArgs(p5.Tree.ORIGIN, ...args);
-    return this._position(mainArg, options);
+    return this._location(mainArg, options);
   };
-  p5.RendererGL.prototype._position = function (
+  p5.RendererGL.prototype._location = function (
     point = p5.Tree.ORIGIN,
     {
       from = p5.Tree.EYE,
@@ -1506,25 +1504,25 @@ p5.registerAddon((p5, fn, lifecycles) => {
       to = this.mMatrix({ eMatrix });
     }
     if ((from == p5.Tree.WORLD) && (to == p5.Tree.SCREEN)) {
-      return this._worldToScreenPosition({ point, pMatrix, vMatrix, pvMatrix });
+      return this._worldToScreenLocation({ point, pMatrix, vMatrix, pvMatrix });
     }
     if ((from == p5.Tree.SCREEN) && (to == p5.Tree.WORLD)) {
-      return this._screenToWorldPosition({ point, pMatrix, vMatrix, pvMatrix, ipvMatrix });
+      return this._screenToWorldLocation({ point, pMatrix, vMatrix, pvMatrix, ipvMatrix });
     }
     if (from == p5.Tree.SCREEN && to == p5.Tree.NDC) {
-      return this._screenToNDCPosition(point);
+      return this._screenToNDCLocation(point);
     }
     if (from == p5.Tree.NDC && to == p5.Tree.SCREEN) {
-      return this._ndcToScreenPosition(point);
+      return this._ndcToScreenLocation(point);
     }
     if (from == p5.Tree.WORLD && to == p5.Tree.NDC) {
-      return this._screenToNDCPosition(
-        this._worldToScreenPosition({ point, pMatrix, vMatrix, pvMatrix })
+      return this._screenToNDCLocation(
+        this._worldToScreenLocation({ point, pMatrix, vMatrix, pvMatrix })
       );
     }
     if (from == p5.Tree.NDC && to == p5.Tree.WORLD) {
-      return this._screenToWorldPosition({
-        point: this._ndcToScreenPosition(point),
+      return this._screenToWorldLocation({
+        point: this._ndcToScreenLocation(point),
         pMatrix,
         vMatrix,
         pvMatrix,
@@ -1536,8 +1534,8 @@ p5.registerAddon((p5, fn, lifecycles) => {
         ? (vMatrix ?? this.vMatrix())
         : to.copy().invert(to)
       ).mult4(
-        this._screenToWorldPosition({
-          point: this._ndcToScreenPosition(point),
+        this._screenToWorldLocation({
+          point: this._ndcToScreenLocation(point),
           pMatrix,
           vMatrix,
           pvMatrix,
@@ -1546,8 +1544,8 @@ p5.registerAddon((p5, fn, lifecycles) => {
       );
     }
     if ((from instanceof p5.Matrix || from == p5.Tree.EYE) && to == p5.Tree.NDC) {
-      return this._screenToNDCPosition(
-        this._worldToScreenPosition({
+      return this._screenToNDCLocation(
+        this._worldToScreenLocation({
           point: (from == p5.Tree.EYE
             ? (eMatrix ?? this.eMatrix())
             : from
@@ -1578,11 +1576,11 @@ p5.registerAddon((p5, fn, lifecycles) => {
         ? (vMatrix ?? this.vMatrix())
         : to.copy().invert(to)
       ).mult4(
-        this._screenToWorldPosition({ point, pMatrix, vMatrix, pvMatrix, ipvMatrix })
+        this._screenToWorldLocation({ point, pMatrix, vMatrix, pvMatrix, ipvMatrix })
       );
     }
     if ((from instanceof p5.Matrix || from == p5.Tree.EYE) && to == p5.Tree.SCREEN) {
-      return this._worldToScreenPosition({
+      return this._worldToScreenLocation({
         point: (from == p5.Tree.EYE
           ? (eMatrix ?? this.eMatrix())
           : from
@@ -1598,11 +1596,11 @@ p5.registerAddon((p5, fn, lifecycles) => {
     if (from == p5.Tree.EYE && to instanceof p5.Matrix) {
       return to.copy().invert(to).mult4((eMatrix ?? this.eMatrix()).mult4(point));
     }
-    console.error('couldn\'t parse your transformPosition query!');
+    console.error('couldn\'t parse your mapLocation query!');
     return point;
   };
-  p5.RendererGL.prototype._ndcToScreenPosition = function (point) {
+  p5.RendererGL.prototype._ndcToScreenLocation = function (point) {
     return new p5.Vector(
       p5.prototype.map(point.x, -1, 1, 0, this.width),
       p5.prototype.map(point.y, -1, 1, 0, this.height),
@@ -1610,7 +1608,7 @@ p5.registerAddon((p5, fn, lifecycles) => {
     );
   };
-  p5.RendererGL.prototype._screenToNDCPosition = function (point) {
+  p5.RendererGL.prototype._screenToNDCLocation = function (point) {
     return new p5.Vector(
       p5.prototype.map(point.x, 0, this.width, -1, 1),
       p5.prototype.map(point.y, 0, this.height, -1, 1),
@@ -1618,7 +1616,7 @@ p5.registerAddon((p5, fn, lifecycles) => {
     );
   };
-  p5.RendererGL.prototype._worldToScreenPosition = function ({
+  p5.RendererGL.prototype._worldToScreenLocation = function ({
     point = new p5.Vector(0, 0, 0.5),
     pMatrix,
     vMatrix,
@@ -1641,7 +1639,7 @@ p5.registerAddon((p5, fn, lifecycles) => {
     return new p5.Vector(target[0], target[1], target[2]);
   };
-  p5.RendererGL.prototype._screenToWorldPosition = function ({
+  p5.RendererGL.prototype._screenToWorldLocation = function ({
     point = new p5.Vector(this.width / 2, this.height / 2, 0.5),
     pMatrix,
     vMatrix,
@@ -1670,8 +1668,8 @@ p5.registerAddon((p5, fn, lifecycles) => {
   // Directions (vector displacements)
   // ---------------------------------------------------------------------------
-  fn.transformDirection = function (...args) {
-    return _rendererGL(this)?.transformDirection(...args);
+  fn.mapDirection = function (...args) {
+    return _rendererGL(this)?.mapDirection(...args);
   };
   /**
@@ -1686,7 +1684,7 @@ p5.registerAddon((p5, fn, lifecycles) => {
    * @param {p5.Matrix} [opts.pMatrix]
    * @returns {p5.Vector}
    */
-  p5.RendererGL.prototype.transformDirection = function (...args) {
+  p5.RendererGL.prototype.mapDirection = function (...args) {
     const { mainArg, options } = this._parseTransformArgs(p5.Tree._k, ...args);
     return this._direction(mainArg, options);
   };
@@ -1781,7 +1779,7 @@ p5.registerAddon((p5, fn, lifecycles) => {
         this._screenToWorldDirection(this._ndcToScreenDirection(vector), pMatrix)
       );
     }
-    console.error('[p5.tree] transformDirection: could not parse query.');
+    console.error('[p5.tree] mapDirection: could not parse query.');
     return vector;
   };
@@ -1792,7 +1790,7 @@ p5.registerAddon((p5, fn, lifecycles) => {
     let dy = eyeVector.y;
     const perspective = pMatrix.mat4[15] === 0;
     if (perspective) {
-      const zEye = this._position(p5.Tree.ORIGIN, { from: p5.Tree.WORLD, to: p5.Tree.EYE }).z;
+      const zEye = this._location(p5.Tree.ORIGIN, { from: p5.Tree.WORLD, to: p5.Tree.EYE }).z;
       const k = Math.abs(zEye * Math.tan(pMatrix.fov() / 2));
       dx /= 2 * k / this.height;
       dy /= 2 * k / this.height;
@@ -1814,7 +1812,7 @@ p5.registerAddon((p5, fn, lifecycles) => {
     const perspective = pMatrix.mat4[15] === 0;
     if (perspective) {
-      const zEye = this._position(p5.Tree.ORIGIN, { from: p5.Tree.WORLD, to: p5.Tree.EYE }).z;
+      const zEye = this._location(p5.Tree.ORIGIN, { from: p5.Tree.WORLD, to: p5.Tree.EYE }).z;
       const k = Math.abs(zEye * Math.tan(pMatrix.fov() / 2));
       dx *= 2 * k / this.height;
       dy *= 2 * k / this.height;
@@ -1869,7 +1867,7 @@ p5.registerAddon((p5, fn, lifecycles) => {
     return this.isOrtho()
       ? Math.abs(this.tPlane() - this.bPlane()) / this.height
       : 2 * Math.abs(
-        this.transformPosition(point, { from: p5.Tree.WORLD, to: p5.Tree.EYE }).z
+        this.mapLocation(point, { from: p5.Tree.WORLD, to: p5.Tree.EYE }).z
       ) * Math.tan(this.fov() / 2) / this.height;
   };
@@ -1965,6 +1963,49 @@ p5.registerAddon((p5, fn, lifecycles) => {
     return this;
   };
+  /**
+   * Draws 3D reference axes (X, Y, Z) centered at the origin in model space.
+   *
+   * Each axis can be enabled independently using bitwise flags, and optional
+   * axis labels (X, Y, Z) can be rendered near the positive ends.
+   *
+   * This is a WEBGL-only utility intended for debugging, teaching, and spatial
+   * orientation. Axes are drawn on the current Z=0 plane using the current
+   * stroke settings.
+   *
+   * @method axes
+   * @for p5.RendererGL
+   * @param {Object} [opts] Axes options.
+   * @param {Number} [opts.size=100] Length of each axis in world units.
+   * @param {Array<String>} [opts.colors=['Red','Lime','DodgerBlue']]
+   *        Stroke colors for X, Y, and Z axes respectively.
+   * @param {Number} [opts.bits=p5.Tree.LABELS | p5.Tree.X | p5.Tree.Y | p5.Tree.Z]
+   *        Bitmask controlling which axes and labels are drawn.
+   *
+   * @example
+   * function draw() {
+   *   background(30);
+   *   orbitControl();
+   *   axes({ size: 300 });
+   * }
+   *
+   * @example
+   * // Draw only X and Z axes, no labels
+   * axes({
+   *   size: 200,
+   *   bits: p5.Tree.X | p5.Tree.Z
+   * });
+   *
+   * @example
+   * // Draw full axes in both positive and negative directions
+   * axes({
+   *   size: 150,
+   *   bits: p5.Tree.X | p5.Tree._X |
+   *         p5.Tree.Y | p5.Tree._Y |
+   *         p5.Tree.Z | p5.Tree._Z |
+   *         p5.Tree.LABELS
+   * });
+   */
   p5.RendererGL.prototype.axes = function ({
     size = 100,
     colors = ['Red', 'Lime', 'DodgerBlue'],
@@ -2014,47 +2055,38 @@ p5.registerAddon((p5, fn, lifecycles) => {
     return this;
   };
+  /**
+   * Draws a simple X/Y reference grid on the Z=0 plane in the current model space.
+   *
+   * The grid is centered at the origin and spans from `-size` to `+size` on both X and Y.
+   * It draws `subdivisions + 1` lines in each direction (including the borders).
+   *
+   * This is a WEBGL-only utility intended for debugging and spatial reference.
+   *
+   * @method grid
+   * @for p5.RendererGL
+   * @param {Object} [opts] Grid options.
+   * @param {Number} [opts.size=100] Half-extent of the grid in world units.
+   * @param {Number} [opts.subdivisions=10] Number of subdivisions per side (must be >= 1).
+   * @example
+   * function draw() {
+   *   background(30);
+   *   orbitControl();
+   *   grid({ size: 300, subdivisions: 20 });
+   * }
+   */
   p5.RendererGL.prototype.grid = function ({
     size = 100,
-    subdivisions = 10,
-    style = p5.Tree.SOLID,
-    weight = 1,
-    minorSubdivisions = 5
+    subdivisions = 10
   } = {}) {
     const p = this._pInst;
-    if (!p) return;
+    if (!p) return;
+    subdivisions = Math.max(1, subdivisions);
     p.push();
-    if (style === p5.Tree.DOTS) {
-      let posi = 0;
-      let posj = 0;
-      p.strokeWeight(weight * 2);
-      p.beginShape(p.POINTS);
-      for (let i = 0; i <= subdivisions; ++i) {
-        posi = size * (2.0 * i / subdivisions - 1.0);
-        for (let j = 0; j <= subdivisions; ++j) {
-          posj = size * (2.0 * j / subdivisions - 1.0);
-          p.vertex(posi, posj, 0);
-        }
-      }
-      p.endShape();
-      const internalSub = Math.max(1, minorSubdivisions | 0);
-      const subSubdivisions = subdivisions * internalSub;
-      p.strokeWeight(weight);
-      p.beginShape(p.POINTS);
-      for (let i = 0; i <= subSubdivisions; ++i) {
-        posi = size * (2.0 * i / subSubdivisions - 1.0);
-        for (let j = 0; j <= subSubdivisions; ++j) {
-          posj = size * (2.0 * j / subSubdivisions - 1.0);
-          ((i % internalSub) !== 0 || (j % internalSub) !== 0) && p.vertex(posi, posj, 0);
-        }
-      }
-      p.endShape();
-    } else {
-      for (let i = 0; i <= subdivisions; ++i) {
-        const pos = size * (2.0 * i / subdivisions - 1.0);
-        p.line(pos, -size, 0, pos, +size, 0);
-        p.line(-size, pos, 0, size, pos, 0);
-      }
+    for (let i = 0; i <= subdivisions; ++i) {
+      const pos = size * (2.0 * i / subdivisions - 1.0);
+      p.line(pos, -size, 0, pos, +size, 0);
+      p.line(-size, pos, 0, +size, pos, 0);
     }
     p.pop();
   };
@@ -2158,10 +2190,10 @@ p5.registerAddon((p5, fn, lifecycles) => {
     // If target screen position not provided, derive it from mMatrix.
     // In that case, treat `size` as world units and convert to pixels locally.
     if (x == null || y == null) {
-      const screen = this.transformPosition({ from: mMatrix, to: p5.Tree.SCREEN, pMatrix, vMatrix, pvMatrix });
+      const screen = this.mapLocation({ from: mMatrix, to: p5.Tree.SCREEN, pMatrix, vMatrix, pvMatrix });
       x = screen.x;
       y = screen.y;
-      const world = this.transformPosition({ from: mMatrix, to: p5.Tree.WORLD, eMatrix });
+      const world = this.mapLocation({ from: mMatrix, to: p5.Tree.WORLD, eMatrix });
       size = size / this.pixelRatio(world);
     }
     const r = size / 2.0;
@@ -2262,10 +2294,10 @@ p5.registerAddon((p5, fn, lifecycles) => {
     if (!p) return;
     if (x == null || y == null) {
-      const screen = this.transformPosition({ from: mMatrix, to: p5.Tree.SCREEN, pMatrix, vMatrix, pvMatrix });
+      const screen = this.mapLocation({ from: mMatrix, to: p5.Tree.SCREEN, pMatrix, vMatrix, pvMatrix });
       x = screen.x;
       y = screen.y;
-      const world = this.transformPosition({ from: mMatrix, to: p5.Tree.WORLD, eMatrix });
+      const world = this.mapLocation({ from: mMatrix, to: p5.Tree.WORLD, eMatrix });
       size = size / this.pixelRatio(world);
     }
     const half = size / 2.0;
@@ -2315,10 +2347,10 @@ p5.registerAddon((p5, fn, lifecycles) => {
     const p = this._pInst;
     if (!p) return;
     if (x == null || y == null) {
-      const screen = this.transformPosition({ from: mMatrix, to: p5.Tree.SCREEN, pMatrix, vMatrix, pvMatrix });
+      const screen = this.mapLocation({ from: mMatrix, to: p5.Tree.SCREEN, pMatrix, vMatrix, pvMatrix });
       x = screen.x;
       y = screen.y;
-      const world = this.transformPosition({ from: mMatrix, to: p5.Tree.WORLD, eMatrix });
+      const world = this.mapLocation({ from: mMatrix, to: p5.Tree.WORLD, eMatrix });
       size = size / this.pixelRatio(world);
     }
     const half = size / 2.0;
@@ -2666,7 +2698,7 @@ p5.registerAddon((p5, fn, lifecycles) => {
     const normals = Array(6);
     const distances = Array(6);
     // Camera position and basis in world space.
-    const pos = this._position([0, 0, 0], { from: p5.Tree.EYE, to: p5.Tree.WORLD, eMatrix });
+    const pos = this._location([0, 0, 0], { from: p5.Tree.EYE, to: p5.Tree.WORLD, eMatrix });
     const viewDir = this._direction([0, 0, -1], { from: p5.Tree.EYE, to: p5.Tree.WORLD, vMatrix });
     const up = this._direction([0, 1, 0], { from: p5.Tree.EYE, to: p5.Tree.WORLD, vMatrix });
     const right = this._direction([1, 0, 0], { from: p5.Tree.EYE, to: p5.Tree.WORLD, vMatrix });