2.0 beta 6 bug fixes

docs/parameterData.json

@@ -392,11 +392,6 @@
         []
       ]
     },
-    "calculateOffset": {
-      "overloads": [
-        []
-      ]
-    },
     "createCanvas": {
       "overloads": [
         [
@@ -3094,37 +3089,6 @@
         ]
       ]
     },
-    "update": {
-      "overloads": [
-        []
-      ]
-    },
-    "bindTexture": {
-      "overloads": [
-        []
-      ]
-    },
-    "unbindTexture": {
-      "overloads": [
-        []
-      ]
-    },
-    "setInterpolation": {
-      "overloads": [
-        [
-          "String",
-          "String"
-        ]
-      ]
-    },
-    "setWrapMode": {
-      "overloads": [
-        [
-          "String",
-          "String"
-        ]
-      ]
-    },
     "remove": {
       "overloads": [
         []
@@ -3267,13 +3231,6 @@
       ]
     }
   },
-  "p5.Renderer": {
-    "resize": {
-      "overloads": [
-        []
-      ]
-    }
-  },
   "p5.Element": {
     "remove": {
       "overloads": [

src/accessibility/outputs.js

@@ -540,7 +540,7 @@ function outputs(p5, fn){
 
   //gets position of shape in the canvas
   fn._getPos = function (x, y) {
-    const { x: transformedX, y: transformedY } = this.worldToScreen(new this.Vector(x, y));
+    const { x: transformedX, y: transformedY } = this.worldToScreen(new p5.Vector(x, y));
     const canvasWidth = this.width;
     const canvasHeight = this.height;
     if (transformedX < 0.4 * canvasWidth) {
@@ -657,7 +657,7 @@ function outputs(p5, fn){
     ];
     //  Apply the inverse of the current transformations to the canvas corners
     const currentTransform = this._renderer.isP3D ?
-      new DOMMatrix(this._renderer.states.uMVMatrix.mat4) :
+      new DOMMatrix(this._renderer.uMVMatrix.mat4) :
       this.drawingContext.getTransform();
     const invertedTransform = currentTransform.inverse();
     const tc = canvasCorners.map(

src/core/p5.Renderer.js

@@ -367,13 +367,15 @@ function renderer(p5, fn){
    * @param {HTMLElement} elt DOM node that is wrapped
    * @param {p5} [pInst] pointer to p5 instance
    * @param {Boolean} [isMainCanvas] whether we're using it as main canvas
+   * @private
    */
   p5.Renderer = Renderer;
 }
 
 /**
  * Helper fxn to measure ascent and descent.
  * Adapted from http://stackoverflow.com/a/25355178
+ * @private
  */
 function calculateOffset(object) {
   let currentLeft = 0,

src/dom/p5.Element.js

@@ -1501,9 +1501,9 @@ class Element {
     // For details, see https://github.com/processing/p5.js/issues/3087.
     const eventPrependedFxn = function (event) {
       this._pInst.mouseIsPressed = true;
-      this._pInst._activePointers.set(e.pointerId, e);
+      this._pInst._activePointers.set(event.pointerId, event);
       this._pInst._setMouseButton(event);
-      this._pInst._updatePointerCoords(e);
+      this._pInst._updatePointerCoords(event);
       // Pass along the return-value of the callback:
       return fxn.call(this, event);
     };

src/webgl/light.js

@@ -964,7 +964,7 @@ function light(p5, fn){
    *   // Load an image and create a p5.Image object.
    *   img = await loadImage('assets/outdoor_spheremap.jpg');
    *
-   *   createCanvas(100 ,100 ,WEBGL);
+   *   createCanvas(100, 100, WEBGL);
    *
    *   describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape. The full landscape is viewable in 3D as the user drags the mouse.');
    * }

src/webgl/p5.Camera.js

@@ -2213,31 +2213,29 @@ class Camera {
    *
    *   // Move the camera along its "local" axes
    *   // when the user presses certain keys.
-   *   if (keyIsPressed === true) {
-   *
-   *     // Move horizontally.
-   *     if (keyCode === LEFT_ARROW) {
-   *       cam.move(-1, 0, 0);
-   *     }
-   *     if (keyCode === RIGHT_ARROW) {
-   *       cam.move(1, 0, 0);
-   *     }
-   *
-   *     // Move vertically.
-   *     if (keyCode === UP_ARROW) {
-   *       cam.move(0, -1, 0);
-   *     }
-   *     if (keyCode === DOWN_ARROW) {
-   *       cam.move(0, 1, 0);
-   *     }
-   *
-   *     // Move in/out of the screen.
-   *     if (key === 'i') {
-   *       cam.move(0, 0, -1);
-   *     }
-   *     if (key === 'o') {
-   *       cam.move(0, 0, 1);
-   *     }
+   *
+   *   // Move horizontally.
+   *   if (keyIsDown(LEFT_ARROW)) {
+   *     cam.move(-1, 0, 0);
+   *   }
+   *   if (keyIsDown(RIGHT_ARROW)) {
+   *     cam.move(1, 0, 0);
+   *   }
+   *
+   *   // Move vertically.
+   *   if (keyIsDown(UP_ARROW)) {
+   *     cam.move(0, -1, 0);
+   *   }
+   *   if (keyIsDown(DOWN_ARROW)) {
+   *     cam.move(0, 1, 0);
+   *   }
+   *
+   *   // Move in/out of the screen.
+   *   if (keyIsDown('i')) {
+   *     cam.move(0, 0, -1);
+   *   }
+   *   if (keyIsDown('o')) {
+   *     cam.move(0, 0, 1);
    *   }
    *
    *   // Draw the box.

src/webgl/p5.Shader.js

@@ -526,7 +526,7 @@ class Shader {
    * <a href="#/p5.Graphics">p5.Graphics</a>, as in
    * `myShader.copyToContext(pg)`. The shader can also be copied from a
    * <a href="#/p5.Graphics">p5.Graphics</a> object to the main canvas using
-   * the `window` variable, as in `myShader.copyToContext(window)`.
+   * the `p5.instance` variable, as in `myShader.copyToContext(p5.instance)`.
    *
    * Note: A <a href="#/p5.Shader">p5.Shader</a> object created with
    * <a href="#/p5/createShader">createShader()</a>,
@@ -667,7 +667,7 @@ class Shader {
    *   pg.shader(original);
    *
    *   // Copy the original shader to the main canvas.
-   *   copied = original.copyToContext(window);
+   *   copied = original.copyToContext(p5.instance);
    *
    *   // Apply the copied shader to the main canvas.
    *   shader(copied);
@@ -843,7 +843,15 @@ class Shader {
 
     for (const uniform of this.samplers) {
       let tex = uniform.texture;
-      if (tex === undefined) {
+      if (
+        tex === undefined ||
+        (
+          false &&
+          tex.isFramebufferTexture &&
+          !tex.src.framebuffer.antialias &&
+          tex.src.framebuffer === this._renderer.activeFramebuffer()
+        )
+      ) {
         // user hasn't yet supplied a texture for this slot.
         // (or there may not be one--maybe just lighting),
         // so we supply a default texture instead.

src/webgl/p5.Texture.js

@@ -114,8 +114,6 @@ class Texture {
    * Initializes common texture parameters, creates a gl texture,
    * tries to upload the texture for the first time if data is
    * already available.
-   * @private
-   * @method init
    */
   init (data) {
     const gl = this._renderer.GL;
@@ -172,7 +170,6 @@ class Texture {
    * easy to do so) and reuploads the texture if necessary. If it's not
    * possible or to expensive to do a calculation to determine wheter or
    * not the data has occurred, this method simply re-uploads the texture.
-   * @method update
    */
   update () {
     const data = this.src;
@@ -271,7 +268,6 @@ class Texture {
 
   /**
    * Binds the texture to the appropriate GL target.
-   * @method bindTexture
    */
   bindTexture () {
     // bind texture using gl context + glTarget and
@@ -284,7 +280,6 @@ class Texture {
 
   /**
    * Unbinds the texture from the appropriate GL target.
-   * @method unbindTexture
    */
   unbindTexture () {
     // unbind per above, disable texturing on glTarget
@@ -304,7 +299,6 @@ class Texture {
    * Sets how a texture is be interpolated when upscaled or downscaled.
    * Nearest filtering uses nearest neighbor scaling when interpolating
    * Linear filtering uses WebGL's linear scaling when interpolating
-   * @method setInterpolation
    * @param {String} downScale Specifies the texture filtering when
    *                           textures are shrunk. Options are LINEAR or NEAREST
    * @param {String} upScale Specifies the texture filtering when
@@ -337,7 +331,6 @@ class Texture {
    * when their uv's go outside of the 0 - 1 range. There are three options:
    * CLAMP, REPEAT, and MIRROR. REPEAT & MIRROR are only available if the texture
    * is a power of two size (128, 256, 512, 1024, etc.).
-   * @method setWrapMode
    * @param {String} wrapX Controls the horizontal texture wrapping behavior
    * @param {String} wrapY Controls the vertical texture wrapping behavior
    */

test/unit/accessibility/outputs.js

@@ -1,6 +1,7 @@
 import { mockP5, mockP5Prototype } from '../../js/mocks';
 import outputs from '../../../src/accessibility/outputs';
 import textOutput from '../../../src/accessibility/textOutput';
+import p5 from '../../../src/app.js';
 
 // TODO: Is it possible to test this without a runtime?
 suite('outputs', function() {
@@ -17,10 +18,36 @@ suite('outputs', function() {
       assert.typeOf(mockP5Prototype.textOutput, 'function');
     });
 
+    test('should not break for webgl', async function() {
+      await new Promise((res) => {
+        new p5((p) => {
+          p.setup = function() {
+            p.createCanvas(50, 50, p.WEBGL);
+            p.textOutput();
+            p.circle(0, 0, 20);
+            res();
+          };
+        });
+      });
+    });
+
+    test('should not break for webgl', async function() {
+      await new Promise((res) => {
+        new p5((p) => {
+          p.setup = function() {
+            p.createCanvas(50, 50, p.WEBGL);
+            p.gridOutput();
+            p.circle(0, 0, 20);
+            res();
+          };
+        });
+      });
+    });
+
     let expected =
       'Your output is a, 100 by 100 pixels, white canvas containing the following shape:';
 
-    test.todo('should create output as fallback', function() {
+    test('should create output as fallback', function() {
       return new Promise(function(resolve, reject) {
         let actual = '';
         new p5(function(p) {
@@ -46,7 +73,7 @@ suite('outputs', function() {
       });
     });
 
-    test.todo('should create output as label', function() {
+    test('should create output as label', function() {
       return new Promise(function(resolve, reject) {
         let label = '';
         let fallback = '';
@@ -76,7 +103,7 @@ suite('outputs', function() {
       });
     });
 
-    test.todo('should create text output for arc()', function() {
+    test('should create text output for arc()', function() {
       return new Promise(function(resolve, reject) {
         expected =
           '<li><a href="#myCanvasIDtextOutputshape0">red arc</a>, at middle, covering 31% of the canvas.</li>';
@@ -104,7 +131,7 @@ suite('outputs', function() {
       });
     });
 
-    test.todo('should create text output for ellipse()', function() {
+    test('should create text output for ellipse()', function() {
       return new Promise(function(resolve, reject) {
         expected =
           '<li><a href="#myCanvasIDtextOutputshape0">green circle</a>, at middle, covering 24% of the canvas.</li>';
@@ -132,7 +159,7 @@ suite('outputs', function() {
       });
     });
 
-    test.todo('should create text output for triangle()', function() {
+    test('should create text output for triangle()', function() {
       return new Promise(function(resolve, reject) {
         expected =
           '<li><a href="#myCanvasIDtextOutputshape0">green triangle</a>, at top left, covering 13% of the canvas.</li>';
@@ -170,7 +197,7 @@ suite('outputs', function() {
     let expected =
       'white canvas, 100 by 100 pixels, contains 1 shape:  1 square';
 
-    test.todo('should create output as fallback', function() {
+    test('should create output as fallback', function() {
       return new Promise(function(resolve, reject) {
         let actual = '';
         new p5(function(p) {
@@ -196,7 +223,7 @@ suite('outputs', function() {
       });
     });
 
-    test.todo('should create output as label', function() {
+    test('should create output as label', function() {
       return new Promise(function(resolve, reject) {
         let label = '';
         let fallback = '';
@@ -226,7 +253,7 @@ suite('outputs', function() {
       });
     });
 
-    test.todo('should create text output for quad()', function() {
+    test('should create text output for quad()', function() {
       return new Promise(function(resolve, reject) {
         expected = 'red quadrilateral, location = top left, area = 45 %';
         new p5(function(p) {
@@ -253,7 +280,7 @@ suite('outputs', function() {
       });
     });
 
-    test.todo('should create text output for point()', function() {
+    test('should create text output for point()', function() {
       return new Promise(function(resolve, reject) {
         expected = 'dark fuchsia point, location = bottom right';
         new p5(function(p) {
@@ -280,7 +307,7 @@ suite('outputs', function() {
       });
     });
 
-    test.todo('should create text output for triangle()', function() {
+    test('should create text output for triangle()', function() {
       return new Promise(function(resolve, reject) {
         expected = 'green triangle, location = top left, area = 13 %';
         new p5(function(p) {