Solves issue #4214

src/webgl/p5.Camera.js

@@ -193,6 +193,78 @@ p5.prototype.perspective = function (...args) {
   return this;
 };
 
+
+/**
+ *
+ * Enable or disable perspective for lines in the WebGL renderer.
+ * The behavior of `linePerspective()`  is associated with the type of camera projection being used.
+ *
+ * - When using `perspective()`, which simulates realistic perspective, linePerspective
+ *    is set to `true` by default. This means that lines will be affected by the current
+ *    camera's perspective, resulting in a more natural appearance.
+ * - When using `ortho()` or `frustum()`, which do not simulate realistic perspective,
+ *    linePerspective is set to `false` by default. In this case, lines will have a uniform
+ *    scale regardless of the camera's perspective, providing a more predictable and
+ *    consistent appearance.
+ * - You can override the default behavior by explicitly calling `linePerspective()` after
+ *    using `perspective()`, `ortho()`, or `frustum()`. This allows you to customize the line
+ *    perspective based on your specific requirements.
+ *
+ * @method linePerspective
+ * @memberof p5.prototype
+ * @param {boolean} enable - Set to `true` to enable line perspective, `false` to disable.
+ * @return {boolean} The boolean value representing the current state of linePerspective().
+ *<br>
+ * @example
+ * <div>
+ * <code>
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   strokeWeight(3);
+ *   describe(
+ *     'rotated 3D boxes have their stroke weights affected after mouse is clicked.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(220);
+ *   rotateY(PI/8);
+ *   rotateZ(PI/8);
+ *   translate(0, 0, 350);
+ *   for (let i = 0; i < 12; i++) {
+ *     translate(0, 0, -70);
+ *     box(30);
+ *   }
+ * }
+ *
+ * function mousePressed() {
+ *   perspective(PI/12, width/height, 1, 10000);
+ *   linePerspective(false);
+ * }
+ * </code>
+ * </div>
+ *
+ * @alt
+ * Demonstrates the dynamic control of line perspective in a 3D environment with rotating boxes.
+ */
+
+p5.prototype.linePerspective = function (enable) {
+  p5._validateParameters('linePerspective', arguments);
+
+  if (!this._renderer._curCamera) {
+    this._renderer._curCamera = new p5.Camera(this._renderer);
+  }
+
+  if (enable !== undefined) {
+    // Set the line perspective if enable is provided
+    this._renderer._curCamera.useLinePerspective = enable;
+  } else {
+    // If no argument is provided, return the current value
+    return this._renderer._curCamera.useLinePerspective;
+  }
+};
+
+
 /**
  * Sets an orthographic projection for the current camera in a 3D sketch
  * and defines a box-shaped viewing frustum within which objects are seen.
@@ -487,7 +559,7 @@ p5.Camera = class Camera {
     this._renderer = renderer;
 
     this.cameraType = 'default';
-
+    this.useLinePerspective = true;
     this.cameraMatrix = new p5.Matrix();
     this.projMatrix = new p5.Matrix();
     this.yScale = 1;

src/webgl/p5.RendererGL.js

@@ -23,6 +23,7 @@ const defineStrokeJoinEnum = function (key, val) {
   STROKE_JOIN_ENUM[constants[key]] = val;
 };
 
+
 // Define constants in line shaders for each type of cap/join, and also record
 // the values in JS objects
 defineStrokeCapEnum('ROUND', 0);

src/webgl/p5.Shader.js

@@ -329,7 +329,7 @@ p5.Shader = class {
         this.setUniform('uPerspective', 1);
       } else {
         // strokes have uniform scale regardless of distance from camera
-        this.setUniform('uPerspective', 0);
+        this.setUniform('uPerspective', this._renderer._curCamera.useLinePerspective ? 1 : 0);
       }
     }
     this.setUniform('uViewMatrix', viewMatrix.mat4);