Merge branch 'dev-2.0' of https://github.com/diyaayay/p5.js into type…

…script-declarations

.github/ISSUE_TEMPLATE/1-p5.js-2.0-bug-report.yml

@@ -0,0 +1,81 @@
+name: 📃 p5.js 2.0 Beta Bug Report
+description: This template is for submitting a bug report for bugs found in the p5.js 2.0 beta releases.
+title: "[p5.js 2.0 Beta Bug Report]: "
+labels: [p5.js 2.0]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ### What falls under this category?
+        There has been many changes to p5.js in 2.0 that is currently released as beta versions. If you suspect there may be a bug, please follow the below steps before opening a bug report using this template:
+
+        1. There are some differences in behavior between p5.js 1.x and 2.0 beta, please check the changelog and/or [proposal list](https://github.com/orgs/processing/projects/21) to see if the difference in behavior is intended. If in doubt, feel free to open the issue anyway and ask.
+        2. Breaking changes may still happen between beta versions, please make sure to include the full beta version number and use the latest beta release where possible.
+        3. We are not considering any new proposal for p5.js 2.0 at this stage and if you would like to request new features, please use the "New feature request" issue template.
+        4. The documentation and examples may be outdated at this stage while we work on updating them.
+  - type: checkboxes
+    id: sub-area
+    attributes:
+      label: Most appropriate sub-area of p5.js?
+      description: You may select more than one.
+      options:
+          - label: Accessibility
+          - label: Color
+          - label: Core/Environment/Rendering
+          - label: Data
+          - label: DOM
+          - label: Events
+          - label: Image
+          - label: IO
+          - label: Math
+          - label: Typography
+          - label: Utilities
+          - label: WebGL
+          - label: Build process
+          - label: Unit testing
+          - label: Internationalization
+          - label: Friendly errors
+          - label: Other (specify if possible)
+  - type: input
+    attributes:
+      label: p5.js version
+      description: You can find this in the first line of the p5.js file.
+    validations:
+      required: false
+  - type: input
+    attributes:
+      label: Web browser and version
+      description: In the address bar, on Chrome enter "chrome://version", on Firefox enter "about:support". On Safari, use "About Safari".
+    validations:
+      required: false
+  - type: input
+    attributes:
+      label: Operating system
+      description: "Ex: Windows/MacOSX/Linux/Android/iOS along with version"
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Steps to reproduce this
+      description: Include a simple code snippet that demonstrates the problem, along with any console errors produced. If this isn't possible, then simply describe the issue as best you can!
+      value: "### Steps:
+
+        1.
+
+        2.
+
+        3.
+
+
+        ### Snippet:
+
+
+        ```js
+
+
+          // Paste your code here :)
+
+
+        ```"
+    validations:
+      required: true

.github/workflows/release-workflow.yml

@@ -41,11 +41,12 @@ jobs:
         run: npm ci
         env:
           CI: true
-      - name: Run build
+      - name: Run test
         run: npm test
         env:
           CI: true
-      - run: rm ./lib/p5-test.js ./lib/p5.pre-min.js
+      - name: Run build
+        run: npm run build
 
       # 2. Prepare release files
       - run: mkdir release && mkdir p5 && cp -r ./lib/* p5/

package.json

@@ -23,7 +23,7 @@
       "node ./utils/sample-linter.mjs"
     ]
   },
-  "version": "1.9.4",
+  "version": "2.0.0-beta.1",
   "dependencies": {
     "@davepagurek/bezier-path": "^0.0.2",
     "acorn": "^8.12.1",

src/type/text2d.js

@@ -518,12 +518,16 @@ function text2d(p5, fn) {
 
     // adjust the bounding boxes based on horiz. text alignment
     if (lines.length > 1) {
-      boxes.forEach(bb => bb.x += this._xAlignOffset(textAlign, width));
+      // Call the 2D mode version: the WebGL mode version does additional
+      // alignment adjustments to account for how WebGL renders text.
+      boxes.forEach(bb => bb.x += p5.Renderer2D.prototype._xAlignOffset.call(this, textAlign, width));
     }
 
     // adjust the bounding boxes based on vert. text alignment
     if (typeof height !== 'undefined') {
-      this._yAlignOffset(boxes, height);
+      // Call the 2D mode version: the WebGL mode version does additional
+      // alignment adjustments to account for how WebGL renders text.
+      p5.Renderer2D.prototype._yAlignOffset.call(this, boxes, height);
     }
 
     // get the bounds for the text block
@@ -1224,11 +1228,11 @@ function text2d(p5, fn) {
           case fn.LEFT:
             adjustedX = x;
             break;
-          case fn._CTX_MIDDLE:
-            adjustedX = x + (adjustedW - widths[i]) / 2;
+          case fn.CENTER:
+            adjustedX = x + (adjustedW - widths[i]) / 2 - adjustedW / 2 + (width || 0) / 2;
             break;
           case fn.RIGHT:
-            adjustedX = x + adjustedW - widths[i];
+            adjustedX = x + adjustedW - widths[i] - adjustedW + (width || 0);
             break;
           case fn.END:
             throw new Error('textBounds: END not yet supported for textAlign');
@@ -1255,10 +1259,10 @@ function text2d(p5, fn) {
         case fn.BASELINE:
           break;
         case fn._CTX_MIDDLE:
-          yOff = -totalHeight / 2 + textSize;
+          yOff = -totalHeight / 2 + textSize + (height || 0) / 2;
           break;
         case fn.BOTTOM:
-          yOff = -(totalHeight - textSize);
+          yOff = -(totalHeight - textSize) + (height || 0);
           break;
         default:
           console.warn(`${textBaseline} is not supported in WebGL mode.`); // FES?

src/webgl/loading.js

@@ -441,6 +441,7 @@ function loading(p5, fn){
         if (flipV) {
           model.flipV();
         }
+        model._makeTriangleEdges();
 
         if (successCallback) {
           return successCallback(model);
@@ -464,6 +465,7 @@ function loading(p5, fn){
         if (flipV) {
           model.flipV();
         }
+        model._makeTriangleEdges();
 
         if (successCallback) {
           return successCallback(model);
@@ -1087,19 +1089,7 @@ function loading(p5, fn){
   fn.model = function (model, count = 1) {
     this._assert3d('model');
     // p5._validateParameters('model', arguments);
-    if (model.vertices.length > 0) {
-      if (!this._renderer.geometryInHash(model.gid)) {
-
-        if (model.edges.length === 0) {
-          model._makeTriangleEdges();
-        }
-
-        model._edgesToVertices();
-        this._renderer._getOrMakeCachedBuffers(model);
-      }
-
-      this._renderer._drawGeometry(model, { count });
-    }
+    this._renderer.model(model, count);
   };
 }
 

src/webgl/p5.RendererGL.js

@@ -586,6 +586,21 @@ class RendererGL extends Renderer {
     this.updateShapeVertexProperties();
   }
 
+  model(model, count = 1) {
+    if (model.vertices.length > 0) {
+      if (this.geometryBuilder) {
+        this.geometryBuilder.addRetained(model);
+      } else {
+        if (!this.geometryInHash(model.gid)) {
+          model._edgesToVertices();
+          this._getOrMakeCachedBuffers(model);
+        }
+
+        this._drawGeometry(model, { count });
+      }
+    }
+  }
+
   //////////////////////////////////////////////
   // Rendering
   //////////////////////////////////////////////

src/webgl/shaders/phong.frag

@@ -49,7 +49,7 @@ void main(void) {
   inputs.color = isTexture
       ? TEXTURE(uSampler, vTexCoord) * uTint/255.
       : vColor;
-  if (isTexture) {
+  if (isTexture && inputs.color.a > 0.0) {
     // Textures come in with premultiplied alpha. Temporarily unpremultiply it
     // so hooks users don't have to think about premultiplied alpha.
     inputs.color.rgb /= inputs.color.a;

src/webgl/text.js

@@ -665,7 +665,7 @@ function text(p5, fn){
       console.log(
         'WEBGL: only Opentype (.otf) and Truetype (.ttf) fonts are supported'
       );
-      return p;
+      return;
     }
 
     this.push(); // fix to #803