Merge pull request #6734 from Garima3110/stroke-weight

 Solves issue #4214

src/webgl/p5.Camera.js

@@ -193,6 +193,116 @@ 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
+ * @for p5
+ * @param {boolean} enable - Set to `true` to enable line perspective, `false` to disable.
+ *
+ * @example
+ * <div>
+ * <code>
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   setAttributes({ antialias: true });
+ *   strokeWeight(3);
+ *   describe(
+ *     'rotated 3D boxes have their stroke weights affected if toggled back and forth with mouse clicks.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   background(220);
+ *   rotateY(PI/24);
+ *   rotateZ(PI/8);
+ *   translate(0, 0, 350);
+ *   for (let i = 0; i < 12; i++) {
+ *     translate(0, 0, -70);
+ *     box(30);
+ *   }
+ * }
+ *
+ * function mousePressed() {
+ *   linePerspective(!linePerspective());
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   strokeWeight(4);
+ * }
+ *
+ * function draw() {
+ *   background(220);
+ *
+ *   // Using orthographic projection
+ *   ortho();
+ *
+ *   // Enable line perspective explicitly
+ *   linePerspective(true);
+ *
+ *   // Draw a rotating cube
+ *   rotateX(frameCount * 0.01);
+ *   rotateY(frameCount * 0.01);
+ *   box(25);
+ *
+ *   // Move to a new position
+ *   translate(0, -60, 0);
+ *
+ *   // Using perspective projection
+ *   perspective();
+ *
+ *   // Disable line perspective explicitly
+ *   linePerspective(false);
+ *
+ *   // Draw another rotating cube with perspective
+ *   rotateX(frameCount * 0.01);
+ *   rotateY(frameCount * 0.01);
+ *   box(25);
+ * }
+ * </code>
+ * </div>
+ * @alt
+ * Demonstrates the dynamic control of line perspective in a 3D environment with rotating boxes.
+ */
+/**
+ * @method linePerspective
+ * @return {boolean} The boolean value representing the current state of linePerspective().
+ */
+
+p5.prototype.linePerspective = function (enable) {
+  p5._validateParameters('linePerspective', arguments);
+  if (!(this._renderer instanceof p5.RendererGL)) {
+    throw new Error('linePerspective() must be called in WebGL mode.');
+  }
+  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 +597,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

@@ -324,13 +324,7 @@ p5.Shader = class {
     modelViewProjectionMatrix.mult(projectionMatrix);
 
     if (this.isStrokeShader()) {
-      if (this._renderer._curCamera.cameraType === 'default') {
-        // strokes scale up as they approach camera, default
-        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);
     this.setUniform('uProjectionMatrix', projectionMatrix.mat4);