Merge branch 'main' into fixGraphicsRemove

processing · May 22, 2024 · 80ac8b9 · 80ac8b9
2 parents ba10c34 + 659b0bd
commit 80ac8b9
Show file tree

Hide file tree

Showing 10 changed files with 780 additions and 300 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -5946,6 +5946,25 @@
         "doc",
         "bug"
       ]
+    },
+    {
+      "login": "JulioGitLab",
+      "name": "Julio Lab",
+      "avatar_url": "https://avatars.githubusercontent.com/u/156870555?v=4",
+      "profile": "https://github.com/JulioGitLab",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "JordanSucher",
+      "name": "Jordan Sucher",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9809109?v=4",
+      "profile": "https://github.com/JordanSucher",
+      "contributions": [
+        "bug",
+        "code"
+      ]
     }
   ],
   "repoType": "github",

diff --git a/README.md b/README.md
@@ -1000,6 +1000,8 @@ We recognize all types of contributions. This project follows the [all-contribut
     <tr>
       <td align="center" valign="top" width="16.66%"><a href="https://github.com/PalumboN"><img src="https://avatars.githubusercontent.com/u/4098184?v=4?s=120" width="120px;" alt="Nahuel Palumbo"/><br /><sub><b>Nahuel Palumbo</b></sub></a><br /><a href="https://github.com/processing/p5.js/issues?q=author%3APalumboN" title="Bug reports">🐛</a> <a href="https://github.com/processing/p5.js/commits?author=PalumboN" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="16.66%"><a href="https://github.com/lottihill"><img src="https://avatars.githubusercontent.com/u/76125564?v=4?s=120" width="120px;" alt="lottihill"/><br /><sub><b>lottihill</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=lottihill" title="Documentation">📖</a> <a href="https://github.com/processing/p5.js/issues?q=author%3Alottihill" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="16.66%"><a href="https://github.com/JulioGitLab"><img src="https://avatars.githubusercontent.com/u/156870555?v=4?s=120" width="120px;" alt="Julio Lab"/><br /><sub><b>Julio Lab</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=JulioGitLab" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="16.66%"><a href="https://github.com/JordanSucher"><img src="https://avatars.githubusercontent.com/u/9809109?v=4?s=120" width="120px;" alt="Jordan Sucher"/><br /><sub><b>Jordan Sucher</b></sub></a><br /><a href="https://github.com/processing/p5.js/issues?q=author%3AJordanSucher" title="Bug reports">🐛</a> <a href="https://github.com/processing/p5.js/commits?author=JordanSucher" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
       "node --require @babel/register ./utils/sample-linter.js"
     ]
   },
-  "version": "1.9.3",
+  "version": "1.9.4",
   "devDependencies": {
     "@babel/core": "^7.7.7",
     "@babel/preset-env": "^7.10.2",

diff --git a/src/color/p5.Color.js b/src/color/p5.Color.js
@@ -571,7 +571,7 @@ p5.Color = class Color {
   /**
    * Sets the red component of a color.
    *
-   * The range depends on the <a href="#/colorMode">colorMode()</a>. In the
+   * The range depends on the <a href="#/p5/colorMode">colorMode()</a>. In the
    * default RGB mode it's between 0 and 255.
    *
    * @method setRed
@@ -613,7 +613,7 @@ p5.Color = class Color {
   /**
    * Sets the green component of a color.
    *
-   * The range depends on the <a href="#/colorMode">colorMode()</a>. In the
+   * The range depends on the <a href="#/p5/colorMode">colorMode()</a>. In the
    * default RGB mode it's between 0 and 255.
    *
    * @method setGreen
@@ -655,7 +655,7 @@ p5.Color = class Color {
   /**
    * Sets the blue component of a color.
    *
-   * The range depends on the <a href="#/colorMode">colorMode()</a>. In the
+   * The range depends on the <a href="#/p5/colorMode">colorMode()</a>. In the
    * default RGB mode it's between 0 and 255.
    *
    * @method setBlue
@@ -698,7 +698,7 @@ p5.Color = class Color {
    * Sets the alpha (transparency) value of a color.
    *
    * The range depends on the
-   * <a href="#/colorMode">colorMode()</a>. In the default RGB mode it's
+   * <a href="#/p5/colorMode">colorMode()</a>. In the default RGB mode it's
    * between 0 and 255.
    *
    * @method setAlpha

diff --git a/src/core/p5.Graphics.js b/src/core/p5.Graphics.js
@@ -320,8 +320,22 @@ p5.Graphics = class extends p5.Element {
   /**
  * Removes the graphics buffer from the web page.
  *
- * Calling `myGraphics.remove()` removes the graphics buffer's canvas along
- * with any HTML elements it created.
+ * Calling `myGraphics.remove()` removes the graphics buffer's
+ * `&lt;canvas&gt;` element from the web page. The graphics buffer also uses
+ * a bit of memory on the CPU that can be freed like so:
+ *
+ * ```js
+ * // Remove the graphics buffer from the web page.
+ * myGraphics.remove();
+ *
+ * // Delete the graphics buffer from CPU memory.
+ * myGraphics = undefined;
+ * ```
+ *
+ * Note: All variables that reference the graphics buffer must be assigned
+ * the value `undefined` to delete the graphics buffer from CPU memory. If any
+ * variable still refers to the graphics buffer, then it won't be garbage
+ * collected.
  *
  * @method remove
  *
@@ -358,6 +372,7 @@ p5.Graphics = class extends p5.Element {
  * // Remove the p5.Graphics object when the
  * // the user double-clicks.
  * function doubleClicked() {
+ *   // Remove the p5.Graphics object from the web page.
  *   pg.remove();
  *   pg = undefined;
  * }

diff --git a/src/core/shape/attributes.js b/src/core/shape/attributes.js
@@ -186,7 +186,7 @@ p5.prototype.noSmooth = function() {
  *
  * By default, the first two parameters of
  * <a href="#/p5/rect">rect()</a> and <a href="#/p5/square">square()</a>,
- * are the x- and y-coordinates of the shape's center. The next parameters set
+ * are the x- and y-coordinates of the shape's upper left corner. The next parameters set
  * the shape's width and height. This is the same as calling
  * `rectMode(CORNER)`.
  *

diff --git a/src/core/transform.js b/src/core/transform.js
@@ -266,15 +266,15 @@ p5.prototype.applyMatrix = function(...args) {
  *   // Translate the origin to the center.
  *   translate(50, 50);
  *
- *   // Draw a red circle at the coordinates (25, 25).
+ *   // Draw a blue circle at the coordinates (25, 25).
  *   fill('blue');
  *   circle(25, 25, 20);
  *
  *   // Clear all transformations.
  *   // The origin is now at the top-left corner.
  *   resetMatrix();
  *
- *   // Draw a blue circle at the coordinates (25, 25).
+ *   // Draw a red circle at the coordinates (25, 25).
  *   fill('red');
  *   circle(25, 25, 20);
  * }
@@ -317,9 +317,8 @@ p5.prototype.resetMatrix = function() {
  * shapes to spin.
  *
  * @method rotate
- * @param  {Number} angle the angle of rotation, specified in radians
- *                        or degrees, depending on current angleMode
- * @param  {p5.Vector|Number[]} [axis] (in 3d) the axis to rotate around
+ * @param  {Number} angle angle of rotation in the current <a href="#/p5/angleMode">angleMode()</a>.
+ * @param  {p5.Vector|Number[]} [axis] axis to rotate about in 3D.
  * @chainable
  *
  * @example