Created fix for camera settings getting reset each time resizeCanvas() is called

src/webgl/p5.Camera.js

@@ -1946,12 +1946,12 @@ p5.Camera = class Camera {
   // @TODO: combine this function with _setDefaultCamera to compute these values
   // as-needed
   _computeCameraDefaultSettings() {
-    this.defaultCameraFOV = 60 / 180 * Math.PI;
     this.defaultAspectRatio = this._renderer.width / this._renderer.height;
     this.defaultEyeX = 0;
     this.defaultEyeY = 0;
-    this.defaultEyeZ =
-      this._renderer.height / 2.0 / Math.tan(this.defaultCameraFOV / 2.0);
+    this.defaultEyeZ = 800;
+    this.defaultCameraFOV =
+      2 * Math.atan(this._renderer.height / 2 / this.defaultEyeZ);
     this.defaultCenterX = 0;
     this.defaultCenterY = 0;
     this.defaultCenterZ = 0;
@@ -1986,12 +1986,9 @@ p5.Camera = class Camera {
     // If we're using the default camera, update the aspect ratio
     if (this.cameraType === 'default') {
       this._computeCameraDefaultSettings();
-      this._setDefaultCamera();
-    } else {
-      this.perspective(
-        this.cameraFOV,
-        this._renderer.width / this._renderer.height
-      );
+      this.cameraFOV = this.defaultCameraFOV;
+      this.aspectRatio = this.defaultAspectRatio;
+      this.perspective();
     }
   }
 

src/webgl/p5.Framebuffer.js

@@ -33,30 +33,8 @@ class FramebufferCamera extends p5.Camera {
   _computeCameraDefaultSettings() {
     super._computeCameraDefaultSettings();
     this.defaultAspectRatio = this.fbo.width / this.fbo.height;
-    this.defaultEyeZ =
-      this.fbo.height / 2.0 / Math.tan(this.defaultCameraFOV / 2.0);
-    this.defaultCameraNear = this.defaultEyeZ * 0.1;
-    this.defaultCameraFar = this.defaultEyeZ * 10;
-  }
-
-  /**
-   * Resets the camera to a default perspective camera sized to match
-   * the p5.Framebuffer it is attached to.
-   *
-   * @method resize
-   * @private
-   */
-  _resize() {
-    // If we're using the default camera, update the aspect ratio
-    if (this.cameraType === 'default') {
-      this._computeCameraDefaultSettings();
-      this._setDefaultCamera();
-    } else {
-      this.perspective(
-        this.cameraFOV,
-        this.fbo.width / this.fbo.height
-      );
-    }
+    this.defaultCameraFOV =
+      2 * Math.atan(this.fbo.height / 2 / this.defaultEyeZ);
   }
 }
 

src/webgl/shaders/line.vert

@@ -170,9 +170,9 @@ void main() {
         // find where the lines intersect to find the elbow of the join
         vec2 c = (posp.xy/posp.w + vec2(1.,1.)) * 0.5 * uViewport.zw;
         vec2 intersection = lineIntersection(
-          c + (side * normalIn * uStrokeWeight / 2.) * curPerspScale,
+          c + (side * normalIn * uStrokeWeight / 2.),
           tangentIn,
-          c + (side * normalOut * uStrokeWeight / 2.) * curPerspScale,
+          c + (side * normalOut * uStrokeWeight / 2.),
           tangentOut
         );
         offset = (intersection - c);
@@ -187,9 +187,9 @@ void main() {
           offset *= maxMag / mag;
         }
       } else if (sideEnum == 1.) {
-        offset = side * normalIn * curPerspScale * uStrokeWeight / 2.;
+        offset = side * normalIn * uStrokeWeight / 2.;
       } else if (sideEnum == 3.) {
-        offset = side * normalOut * curPerspScale * uStrokeWeight / 2.;
+        offset = side * normalOut * uStrokeWeight / 2.;
       }
     }
     if (uStrokeJoin == STROKE_JOIN_BEVEL) {
@@ -208,12 +208,12 @@ void main() {
     // extends out from the line
     float tangentOffset = abs(aSide) - 1.;
     offset = (normal * normalOffset + tangent * tangentOffset) *
-      uStrokeWeight * 0.5 * curPerspScale;
+      uStrokeWeight * 0.5;
     vMaxDist = uStrokeWeight / 2.;
   }
-  vPosition = vCenter + offset / curPerspScale;
+  vPosition = vCenter + offset;
 
-  gl_Position.xy = p.xy + offset.xy;
+  gl_Position.xy = p.xy + offset.xy * curPerspScale;
   gl_Position.zw = p.zw;
 
   vColor = (uUseLineColor ? aVertexColor : uMaterialColor);

test/unit/webgl/p5.Camera.js

@@ -687,10 +687,10 @@ suite('p5.Camera', function() {
 
       test('perspective() with no parameters specified (sets default)', function() {
         var expectedMatrix = new Float32Array([
-          1.7320507764816284,0,0,0,
-          0,-1.7320507764816284,0,0,
+          16,0,0,0,
+          0,-16,0,0,
           0,0,-1.0202020406723022,-1,
-          0,0,-17.49546241760254,0
+          0,0,-161.6161651611328,0
         ]);
 
         myCam.perspective();
@@ -726,10 +726,10 @@ suite('p5.Camera', function() {
 
       test('frustum() with no parameters specified (sets default)', function() {
         var expectedMatrix = new Float32Array([
-          1.7320507764816284, 0, 0, 0,
-          0, 1.7320507764816284, 0, 0,
-          0, -0, -1.0202020406723022, -1,
-          0, 0, -17.49546241760254, 0
+          16,0,0,0,
+          0,16,0,0,
+          0,-0,-1.0202020406723022,-1,
+          0,0,-161.6161651611328,0
         ]);
 
         myCam.frustum();
@@ -1013,4 +1013,63 @@ suite('p5.Camera', function() {
       assert.deepEqual(myCam2._renderer, myp5._renderer);
     });
   });
-});
+
+  suite('Camera attributes after resizing', function() {
+    test('Camera position is the same', function() {
+      myp5.createCanvas(1, 1, myp5.WEBGL);
+      myp5.noStroke();
+      myp5.pixelDensity(1);
+
+      let cam = myp5.createCamera();
+
+      myp5.fill(255, 0, 0);
+
+      const testShape = () => {
+        myp5.clear();
+        myp5.rect(-myp5.width, -myp5.height, myp5.width * 2, myp5.height * 2);
+      };
+
+      testShape();
+      assert.deepEqual(myp5.get(0, 0), [255, 0, 0, 255]);
+      assert.equal(cam.eyeX, 0);
+
+      cam.move(10, 0, 0);
+      testShape();
+      assert.deepEqual(myp5.get(0, 0), [0, 0, 0, 0]);
+      assert.equal(cam.eyeX, 10);
+
+      myp5.resizeCanvas(2, 1);
+      myp5.resizeCanvas(1, 1);
+      testShape();
+      assert.deepEqual(myp5.get(0, 0), [0, 0, 0, 0]);
+      assert.equal(cam.eyeX, 10);
+    });
+
+    test('Camera rotation is the same', function() {
+      myp5.createCanvas(1, 1, myp5.WEBGL);
+      myp5.noStroke();
+      myp5.pixelDensity(1);
+
+      let cam = myp5.createCamera();
+
+      myp5.fill(255, 0, 0);
+
+      const testShape = () => {
+        myp5.clear();
+        myp5.rect(-myp5.width, -myp5.height, myp5.width * 2, myp5.height * 2);
+      };
+
+      testShape();
+      assert.deepEqual(myp5.get(0, 0), [255, 0, 0, 255]);
+
+      cam.pan(10);
+      testShape();
+      assert.deepEqual(myp5.get(0, 0), [0, 0, 0, 0]);
+
+      myp5.resizeCanvas(2, 1);
+      myp5.resizeCanvas(1, 1);
+      testShape();
+      assert.deepEqual(myp5.get(0, 0), [0, 0, 0, 0]);
+    });
+  });
+});

test/unit/webgl/p5.Framebuffer.js

@@ -221,7 +221,7 @@ suite('p5.Framebuffer', function() {
       myp5.plane(myp5.width, -myp5.height);
 
       // Just check the red channel, other channels might vary across browsers
-      assert.equal(myp5.get(5, 5)[0], 221);
+      assert.equal(myp5.get(5, 5)[0], 232);
     });
   });
 
@@ -287,7 +287,11 @@ suite('p5.Framebuffer', function() {
     suite('the default camera', function() {
       test('it uses the aspect ratio of the framebuffer', function() {
         expect(fbo.defaultCamera.aspectRatio).to.equal(5 / 15);
-        const z = -fbo.height / 2.0 / Math.tan(Math.PI / 3 / 2);
+        expect(fbo.defaultCamera.cameraFOV).to.be.closeTo(
+          2.0 * Math.atan(15 / 2 / 800),
+          0.01
+        );
+        const z = -800;
         const expectedCameraMatrix = [
           1, 0, 0, 0,
           0, 1, 0, 0,
@@ -303,8 +307,11 @@ suite('p5.Framebuffer', function() {
       test('it updates the aspect ratio after resizing', function() {
         fbo.resize(20, 10);
         expect(fbo.defaultCamera.aspectRatio).to.equal(2);
-
-        const z = -fbo.height / 2.0 / Math.tan(Math.PI / 3 / 2);
+        expect(fbo.defaultCamera.cameraFOV).to.be.closeTo(
+          2.0 * Math.atan(10 / 2 / 800),
+          0.01
+        );
+        const z = -800;
         const expectedCameraMatrix = [
           1, 0, 0, 0,
           0, 1, 0, 0,