Merge branch 'main' into label-update

Author: Qianqianye

.all-contributorsrc

@@ -3167,6 +3167,42 @@
       "contributions": [
         "translation"
       ]
+    },
+    {
+      "login": "IkeB108",
+      "name": "Ike Bischof",
+      "avatar_url": "https://avatars.githubusercontent.com/u/56776763?v=4",
+      "profile": "https://ikebot108.weebly.com/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "ongzzzzzz",
+      "name": "Ong Zhi Zheng",
+      "avatar_url": "https://avatars.githubusercontent.com/u/47311100?v=4",
+      "profile": "https://ongzz.ml",
+      "contributions": [
+        "plugin"
+      ]
+    },
+    {
+      "login": "bsubbaraman",
+      "name": "bsubbaraman",
+      "avatar_url": "https://avatars.githubusercontent.com/u/11969085?v=4",
+      "profile": "https://github.com/bsubbaraman",
+      "contributions": [
+        "plugin"
+      ]
+    },
+    {
+      "login": "jdeboi",
+      "name": "Jenna deBoisblanc",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1548679?v=4",
+      "profile": "http://jdeboi.com",
+      "contributions": [
+        "plugin"
+      ]
     }
   ],
   "repoType": "github",

.github/labeler.yml

@@ -1,32 +1,32 @@
 "Area:Accessibility":
-  - '\[X\] Accessibility'
+  - '\[[xX]\]\s*Accessibility'
 "Area:Color":
-  - '\[X\] Color'
+  - '\[[xX]\]\s*Color'
 "Area:Core":
-  - '\[X\] Core'
+  - '\[[xX]\]\s*Core'
 "Area:Data":
-  - '\[X\] Data'
+  - '\[[xX]\]\s*Data'
 "Area:DOM":
-  - '\[X\] DOM'
+  - '\[[xX]\]\s*DOM'
 "Area:Events":
-  - '\[X\] Events'
+  - '\[[xX]\]\s*Events'
 "Area:Image":
-  - '\[X\] Image'
+  - '\[[xX]\]\s*Image'
 "Area:IO":
-  - '\[X\] IO'
+  - '\[[xX]\]\s*IO'
 "Area:Math":
-  - '\[X\] Math'
+  - '\[[xX]\]\s*Math'
 "Area:Typography":
-  - '\[X\] Typography'
+  - '\[[xX]\]\s*Typography'
 "Area:Utilities":
-  - '\[X\] Utilities'
+  - '\[[xX]\]\s*Utilities'
 "Area:WebGL":
-  - '\[X\] WebGL'
+  - '\[[xX]\]\s*WebGL'
 "Build Process":
-  - '\[X\] Build Process'
+  - '\[[xX]\]\s*Build Process'
 "Unit Testing":
-  - '\[X\] Unit Testing'
+  - '\[[xX]\]\s*Unit Testing'
 "Localization":
   - '\[X\] Internalization'
 "Friendly Errors":
-  - '\[X\] Friendly Errors'
+  - '\[[xX]\]\s*Friendly Errors'

.github/workflows/labeler.yml

@@ -2,7 +2,8 @@ name: "Issue Labeler"
 on:
   issues:
     types: [opened, edited]
-
+permissions:
+  issues: write
 jobs:
   triage:
     runs-on: ubuntu-latest

README.md

@@ -79,7 +79,7 @@ Anyone interested can volunteer to be a steward! There are no specific requireme
 | [Utilities](https://github.com/processing/p5.js/tree/main/src/utilities)             | [@kungfuchicken](https://github.com/kungfuchicken), [@cosmicbhejafry](https://github.com/cosmicbhejafry)                                  |
 | [WebGL](https://github.com/processing/p5.js/tree/main/src/webgl)                     | [@stalgiag](https://github.com/stalgiag); GSoC 2022: [@aceslowman](https://github.com/aceslowman)(Contributor), [@kjhollen](https://github.com/kjhollen)(Mentor); [@ShenpaiSharma](https://github.com/ShenpaiSharma)(Contributor), [@calebfoss](https://github.com/calebfoss)(Mentor); [@davepagurek](https://github.com/davepagurek); [@jeffawang](https://github.com/jeffawang); [@AdilRabbani](https://github.com/AdilRabbani)  |
 | Build Process/Unit Testing                                                           | [@outofambit](https://github.com/outofambit), [@kungfuchicken](https://github.com/kungfuchicken)                                                                                                               |
-| Localization Tools                                                                   | [@outofambit](https://github.com/outofambit), [@almchung](https://github.com/almchung)                           |
+| Internalization                                                                  | [@outofambit](https://github.com/outofambit), [@almchung](https://github.com/almchung)                           |
 | Friendly Errors                                                                      | [@outofambit](https://github.com/outofambit), [@almchung](https://github.com/almchung)                                                                                                              |
 | [Contributor Docs](https://github.com/processing/p5.js/tree/main/contributor_docs)   | [SoD 2022](https://github.com/processing/p5.js/wiki/Season-of-Docs-2022-Organization-Application---p5.js): [@limzykenneth](https://github.com/limzykenneth) |
 
@@ -577,6 +577,12 @@ We recognize all types of contributions. This project follows the [all-contribut
     <td align="center"><a href="https://github.com/anniezhengg"><img src="https://avatars.githubusercontent.com/u/78184655?v=4?s=100" width="100px;" alt=""/><br /><sub><b>anniezhengg</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=anniezhengg" title="Code">💻</a> <a href="#design-anniezhengg" title="Design">🎨</a></td>
     <td align="center"><a href="https://github.com/SNP0301"><img src="https://avatars.githubusercontent.com/u/68281918?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Seung-Gi Kim(David)</b></sub></a><br /><a href="#translation-SNP0301" title="Translation">🌍</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://ikebot108.weebly.com/"><img src="https://avatars.githubusercontent.com/u/56776763?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ike Bischof</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=IkeB108" title="Code">💻</a></td>
+    <td align="center"><a href="https://ongzz.ml"><img src="https://avatars.githubusercontent.com/u/47311100?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ong Zhi Zheng</b></sub></a><br /><a href="#plugin-ongzzzzzz" title="Plugin/utility libraries">🔌</a></td>
+    <td align="center"><a href="https://github.com/bsubbaraman"><img src="https://avatars.githubusercontent.com/u/11969085?v=4?s=100" width="100px;" alt=""/><br /><sub><b>bsubbaraman</b></sub></a><br /><a href="#plugin-bsubbaraman" title="Plugin/utility libraries">🔌</a></td>
+    <td align="center"><a href="http://jdeboi.com"><img src="https://avatars.githubusercontent.com/u/1548679?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jenna deBoisblanc</b></sub></a><br /><a href="#plugin-jdeboi" title="Plugin/utility libraries">🔌</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

src/core/p5.Renderer2D.js

@@ -1,6 +1,5 @@
 import p5 from './main';
 import * as constants from './constants';
-import filters from '../image/filters';
 
 import './p5.Renderer';
 
@@ -162,13 +161,8 @@ p5.Renderer2D.prototype.image = function(
   }
 
   try {
-    if (this._tint) {
-      if (p5.MediaElement && img instanceof p5.MediaElement) {
-        img.loadPixels();
-      }
-      if (img.canvas) {
-        cnv = this._getTintedImageCanvas(img);
-      }
+    if (this._tint && img.canvas) {
+      cnv = this._getTintedImageCanvas(img);
     }
     if (!cnv) {
       cnv = img.canvas || img.elt;
@@ -205,25 +199,66 @@ p5.Renderer2D.prototype._getTintedImageCanvas = function(img) {
   if (!img.canvas) {
     return img;
   }
-  const pixels = filters._toPixels(img.canvas);
-  const tmpCanvas = document.createElement('canvas');
-  tmpCanvas.width = img.canvas.width;
-  tmpCanvas.height = img.canvas.height;
-  const tmpCtx = tmpCanvas.getContext('2d');
-  const id = tmpCtx.createImageData(img.canvas.width, img.canvas.height);
-  const newPixels = id.data;
-  for (let i = 0; i < pixels.length; i += 4) {
-    const r = pixels[i];
-    const g = pixels[i + 1];
-    const b = pixels[i + 2];
-    const a = pixels[i + 3];
-    newPixels[i] = r * this._tint[0] / 255;
-    newPixels[i + 1] = g * this._tint[1] / 255;
-    newPixels[i + 2] = b * this._tint[2] / 255;
-    newPixels[i + 3] = a * this._tint[3] / 255;
+
+  if (!img.tintCanvas) {
+    // Once an image has been tinted, keep its tint canvas
+    // around so we don't need to re-incur the cost of
+    // creating a new one for each tint
+    img.tintCanvas = document.createElement('canvas');
+  }
+
+  // Keep the size of the tint canvas up-to-date
+  if (img.tintCanvas.width !== img.canvas.width) {
+    img.tintCanvas.width = img.canvas.width;
+  }
+  if (img.tintCanvas.height !== img.canvas.height) {
+    img.tintCanvas.height = img.canvas.height;
   }
-  tmpCtx.putImageData(id, 0, 0);
-  return tmpCanvas;
+
+  // Goal: multiply the r,g,b,a values of the source by
+  // the r,g,b,a values of the tint color
+  const ctx = img.tintCanvas.getContext('2d');
+
+  ctx.save();
+  ctx.clearRect(0, 0, img.canvas.width, img.canvas.height);
+
+  if (this._tint[0] < 255 || this._tint[1] < 255 || this._tint[2] < 255) {
+    // Color tint: we need to use the multiply blend mode to change the colors.
+    // However, the canvas implementation of this destroys the alpha channel of
+    // the image. To accommodate, we first get a version of the image with full
+    // opacity everywhere, tint using multiply, and then use the destination-in
+    // blend mode to restore the alpha channel again.
+
+    // Start with the original image
+    ctx.drawImage(img.canvas, 0, 0);
+
+    // This blend mode makes everything opaque but forces the luma to match
+    // the original image again
+    ctx.globalCompositeOperation = 'luminosity';
+    ctx.drawImage(img.canvas, 0, 0);
+
+    // This blend mode forces the hue and chroma to match the original image.
+    // After this we should have the original again, but with full opacity.
+    ctx.globalCompositeOperation = 'color';
+    ctx.drawImage(img.canvas, 0, 0);
+
+    // Apply color tint
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.fillStyle = `rgb(${this._tint.slice(0, 3).join(', ')})`;
+    ctx.fillRect(0, 0, img.canvas.width, img.canvas.height);
+
+    // Replace the alpha channel with the original alpha * the alpha tint
+    ctx.globalCompositeOperation = 'destination-in';
+    ctx.globalAlpha = this._tint[3] / 255;
+    ctx.drawImage(img.canvas, 0, 0);
+  } else {
+    // If we only need to change the alpha, we can skip all the extra work!
+    ctx.globalAlpha = this._tint[3] / 255;
+    ctx.drawImage(img.canvas, 0, 0);
+  }
+
+  ctx.restore();
+  return img.tintCanvas;
 };
 
 //////////////////////////////////////////////

src/dom/dom.js

@@ -1993,8 +1993,8 @@ p5.Element.prototype.style = function(prop, val) {
     ) {
       let styles = window.getComputedStyle(self.elt);
       let styleVal = styles.getPropertyValue(prop);
-      let numVal = styleVal.replace(/\D+/g, '');
-      this[prop] = parseInt(numVal, 10);
+      let numVal = styleVal.replace(/[^\d.]/g, '');
+      this[prop] = Math.round(parseFloat(numVal, 10));
     }
   }
   return this;

src/image/loading_displaying.js

@@ -6,7 +6,6 @@
  */
 
 import p5 from '../core/main';
-import Filters from './filters';
 import canvas from '../core/helpers';
 import * as constants from '../core/constants';
 import omggif from 'omggif';
@@ -602,33 +601,8 @@ p5.prototype.noTint = function() {
  * @param {p5.Image} The image to be tinted
  * @return {canvas} The resulting tinted canvas
  */
-p5.prototype._getTintedImageCanvas = function(img) {
-  if (!img.canvas) {
-    return img;
-  }
-  const pixels = Filters._toPixels(img.canvas);
-  const tmpCanvas = document.createElement('canvas');
-  tmpCanvas.width = img.canvas.width;
-  tmpCanvas.height = img.canvas.height;
-  const tmpCtx = tmpCanvas.getContext('2d');
-  const id = tmpCtx.createImageData(img.canvas.width, img.canvas.height);
-  const newPixels = id.data;
-
-  for (let i = 0; i < pixels.length; i += 4) {
-    const r = pixels[i];
-    const g = pixels[i + 1];
-    const b = pixels[i + 2];
-    const a = pixels[i + 3];
-
-    newPixels[i] = r * this._renderer._tint[0] / 255;
-    newPixels[i + 1] = g * this._renderer._tint[1] / 255;
-    newPixels[i + 2] = b * this._renderer._tint[2] / 255;
-    newPixels[i + 3] = a * this._renderer._tint[3] / 255;
-  }
-
-  tmpCtx.putImageData(id, 0, 0);
-  return tmpCanvas;
-};
+p5.prototype._getTintedImageCanvas =
+  p5.Renderer2D.prototype._getTintedImageCanvas;
 
 /**
  * Set image mode. Modifies the location from which images are drawn by

src/math/p5.Vector.js

@@ -1490,6 +1490,7 @@ p5.Vector.prototype.heading = function heading() {
  */
 
 p5.Vector.prototype.setHeading = function setHeading(a) {
+  if (this.isPInst) a = this._toRadians(a);
   let m = this.mag();
   this.x = m * Math.cos(a);
   this.y = m * Math.sin(a);

src/webgl/3d_primitives.js

@@ -99,7 +99,7 @@ p5.prototype.plane = function(width, height, detailX, detailY) {
  * Draw a box with given width, height and depth
  * @method  box
  * @param  {Number} [width]     width of the box
- * @param  {Number} [Height]    height of the box
+ * @param  {Number} [height]    height of the box
  * @param  {Number} [depth]     depth of the box
  * @param {Integer} [detailX]  Optional number of triangle
  *                            subdivisions in x-dimension