Merge branch 'main' into patch-3

Author: Qianqianye

.all-contributorsrc

@@ -6264,6 +6264,60 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "ibrand",
+      "name": "Ilona Brand",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3953117?v=4",
+      "profile": "https://github.com/ibrand",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "aleannab",
+      "name": "Antoinette Bumatay-Chan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/342223?v=4",
+      "profile": "http://www.antoinettecreates.com",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "benpalevsky",
+      "name": "benpalevsky",
+      "avatar_url": "https://avatars.githubusercontent.com/u/25121735?v=4",
+      "profile": "https://github.com/benpalevsky",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "jeanetteandrews",
+      "name": "jeanette",
+      "avatar_url": "https://avatars.githubusercontent.com/u/12685889?v=4",
+      "profile": "http://jeanetteandre.ws",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "williamthazard",
+      "name": "William Hazard",
+      "avatar_url": "https://avatars.githubusercontent.com/u/105560469?v=4",
+      "profile": "https://github.com/williamthazard",
+      "contributions": [
+        "example"
+      ]
+    },
+    {
+      "login": "visheshrwl",
+      "name": "Vishesh Rawal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/92795514?v=4",
+      "profile": "https://github.com/visheshrwl",
+      "contributions": [
+        "bug", "doc", "code"
+      ]
     }
   ],
   "repoType": "github",

README.md

@@ -1053,6 +1053,14 @@ We recognize all types of contributions. This project follows the [all-contribut
       <td align="center" valign="top" width="16.66%"><a href="http://willallstetter.com"><img src="https://avatars.githubusercontent.com/u/67874779?v=4?s=120" width="120px;" alt="willallstet"/><br /><sub><b>willallstet</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=willallstet" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="16.66%"><a href="https://github.com/ashwanidey"><img src="https://avatars.githubusercontent.com/u/110251931?v=4?s=120" width="120px;" alt="Ashwani Dey"/><br /><sub><b>Ashwani Dey</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=ashwanidey" title="Documentation">📖</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="16.66%"><a href="https://github.com/ibrand"><img src="https://avatars.githubusercontent.com/u/3953117?v=4?s=120" width="120px;" alt="Ilona Brand"/><br /><sub><b>Ilona Brand</b></sub></a><br /><a href="https://github.com/processing/p5.js/issues?q=author%3Aibrand" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="16.66%"><a href="http://www.antoinettecreates.com"><img src="https://avatars.githubusercontent.com/u/342223?v=4?s=120" width="120px;" alt="Antoinette Bumatay-Chan"/><br /><sub><b>Antoinette Bumatay-Chan</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=aleannab" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="16.66%"><a href="https://github.com/benpalevsky"><img src="https://avatars.githubusercontent.com/u/25121735?v=4?s=120" width="120px;" alt="benpalevsky"/><br /><sub><b>benpalevsky</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=benpalevsky" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="16.66%"><a href="http://jeanetteandre.ws"><img src="https://avatars.githubusercontent.com/u/12685889?v=4?s=120" width="120px;" alt="jeanette"/><br /><sub><b>jeanette</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=jeanetteandrews" title="Code">💻</a></td>
+      <td align="center" valign="top" width="16.66%"><a href="https://github.com/williamthazard"><img src="https://avatars.githubusercontent.com/u/105560469?v=4?s=120" width="120px;" alt="William Hazard"/><br /><sub><b>William Hazard</b></sub></a><br /><a href="#example-williamthazard" title="Examples">💡</a></td>
+       <td align="center" valign="top" width="16.66%"><a href="https://github.com/visheshrwl"><img src="https://avatars.githubusercontent.com/u/92795514?v=4" width="120px;" alt="Vishesh Rawal"/><br /><sub><b>Vishesh Rawal</b></sub></a><br /><a href="https://visheshrwl.vercel.app" title="Vishesh Rawal">💡</a></td>
+    </tr>
   </tbody>
 </table>
 

contributor_docs/access.md

@@ -54,5 +54,5 @@ This version of the p5.js Access Statement was revised in collaboration with Eve
 
 [^1]: Crenshaw, Kimberlé (1989). "Demarginalizing the intersection of race and sex: a black feminist critique of antidiscrimination doctrine, feminist theory and antiracist politics". University of Chicago Legal Forum. 1989 (1): 139–167. ISSN 0892-5593. Full text at Archive.org.
 [^2]: Capital ‘D’ Deaf refers to people who are culturally Deaf or part of the Deaf community while lower case ‘d’ deaf is an audiological term that can describe people not associated with Deaf identity. 
-[^3]: There are differing preferences between ‘person-first’ vs. ‘identity-first’ language within the disability community. Read [Unpacking the debate over person-first vs. identity-first language in the autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/).
+[^3]: There are differing preferences between ‘person-first’ vs. ‘identity-first’ language within the disability community. Read [Unpacking the debate over person-first vs. identity-first language in the autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Language: Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), and [Person-First and Identity-First Language Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf).
 [^4]: Linguistic Imperialism, or Language Imperialism, refers to the ongoing domination/prioritization/imposition of certain languages such as English at the expense of native languages due to imperial expansion and globalization. 

contributor_docs/contributing_to_the_p5js_reference.md

@@ -73,7 +73,7 @@ Anything in a block in this manner will be interpreted as reference documentatio
 
 ## Reference comments block
 
-Let’s break down the reference comments block above for the `sin()` function and see what each section does. You can compare what you see in the comments here and what you can see on the reference page for [`sin()`](https://p5js.org/reference/#/p5/sin).
+Let’s break down the reference comments block above for the `sin()` function and see what each section does. You can compare what you see in the comments here and what you can see on the reference page for [`sin()`](https://p5js.org/reference/p5/sin/).
 
 ```
 /**
@@ -143,7 +143,7 @@ If the method returns the parent object, you can skip the `@return` tag and add
 
 ## Additional signatures
 
-If a function has multiple possible parameter options, you can specify each individually. For example, the [`background()`](http://p5js.org/reference/#p5/background) function takes a number of different parameter options (see "Syntax" section on the reference page). Choose one version to list as the first signature using the template above. At the end of the first reference comment block, you can add additional signatures, each in its own block, using only the `@method` and `@param` tags following the example below.
+If a function has multiple possible parameter options, you can specify each individually. For example, the [`background()`](https://p5js.org/reference/p5/background/) function takes a number of different parameter options (see "Syntax" section on the reference page). Choose one version to list as the first signature using the template above. At the end of the first reference comment block, you can add additional signatures, each in its own block, using only the `@method` and `@param` tags following the example below.
 
 ```
 /**
@@ -270,7 +270,7 @@ If you do not want the example to be run as part of the automated tests (for exa
 * </code></div>
 ```
 
-If your example uses external asset files, put them in the [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) folder (or reuse one already in there) then link to them with "assets/filename.ext" in the code. See the [tint()](http://p5js.org/reference/#/p5/tint) reference for example.
+If your example uses external asset files, put them in the [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) folder (or reuse one already in there) then link to them with "assets/filename.ext" in the code. See the [tint()](https://p5js.org/reference/p5/tint/) reference for example.
 
 
 ### Add a canvas description using `describe()`
@@ -308,7 +308,7 @@ Finally, for every example you add, you are required to use the p5.js function `
 * </div>
 ```
 
-For more on `describe()` visit the [web accessibility contributor documentation](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions).
+For more on `describe()` visit the [web accessibility contributor documentation](./web_accessibility/#describe).
 
 With all the above you should have most of the tools needed to write and edit p5.js reference comments. However, there are a few more specialized usage of JSDoc style reference comments that you may come across in p5.js. These are situationally useful and not something that you need often.
 
@@ -412,5 +412,5 @@ This will launch a live preview of the rendered reference that will update each
 
 For additional details about the reference system, you can checkout the documentation for [JSDoc](https://jsdoc.app/) and [YUIDoc](https://yui.github.io/yuidoc/).
 
-For examples of issues related to the reference, have a look at [#6519](https://github.com/processing/p5.js/issues/6519) and [#6045](https://github.com/processing/p5.js/issues/6045). The [contributor guidelines](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md) document is also a good place to start.
+For examples of issues related to the reference, have a look at [#6519](https://github.com/processing/p5.js/issues/6519) and [#6045](https://github.com/processing/p5.js/issues/6045). The [contributor guidelines](./contributor_guidelines.md) document is also a good place to start.
 

contributor_docs/steward_guidelines.md

@@ -71,7 +71,7 @@ Feature request issues should use the "New Feature Request" issue template. The
    - If a feature request does not have the "Increasing Access" field sufficiently filled out, you can ask the issue author how the feature increases access.
    - The access statement of a feature can be provided by a different member of the community, including the issue reviewers.
 2. The new feature request can be assessed for inclusion based on the following criteria.
-   - Does the feature fit into the project scope and [design principles](design_principles.md) of p5.js?
+   - Does the feature fit into the project scope and [design principles](./contributor_guidelines.md#software-design-principles) of p5.js?
      - For example, a request to add a new drawing primitive shape may be considered, but a request to adopt a browser-based IOT protocol will likely be out of scope.
      - Overall, the scope of p5.js should be relatively narrow in order to avoid excessive bloat from rarely used features.
      - If a feature does not fit into the scope of p5.js, suggest that the issue author implement the feature as as an addon library.
@@ -197,7 +197,7 @@ The `lint` task consists of two sub tasks: `lint:source` and `lint:samples`. `li
 
 The `lint:samples` task will first run the `yui` task which itself consists of `yuidoc:prod`, `clean:reference`, and `minjson`, which extract the documentation from the source code into a JSON document, remove unused files from the previous step, and minify the generated JSON file into `data.min.json` respectively.
 
-Next in `lint:samples` is `eslint-samples:source`, which is a custom written task whose definition is in [./tasks/build/eslint-samples.js](tasks/build/eslint-samples.js); it will run ESLint to check the documentation example code to make sure they follow the same coding convention as the rest of p5.js (`yui` is run first here because we need the JSON file to be built first before we can lint the examples).
+Next in `lint:samples` is `eslint-samples:source`, which is a custom written task whose definition is in [../tasks/build/eslint-samples.js](../tasks/build/eslint-samples.js); it will run ESLint to check the documentation example code to make sure they follow the same coding convention as the rest of p5.js (`yui` is run first here because we need the JSON file to be built first before we can lint the examples).
 
 
 #### `test` Task
@@ -223,7 +223,7 @@ grunt.registerTask('build', [
 ]);
 ```
 
-Tasks that start with `browserify` are defined in [./tasks/build/browserify.js](tasks/build/browserify.js). They all  similar steps with minor differences. These are the main steps to build the full p5.js library from its many source code files into one:
+Tasks that start with `browserify` are defined in [../tasks/build/browserify.js](../tasks/build/browserify.js). They all  similar steps with minor differences. These are the main steps to build the full p5.js library from its many source code files into one:
 
 - `browserify` builds p5.js while `browserify:min` builds an intermediate file to be minified in the next step. The difference between `browserify` and `browserify:min` is that `browserify:min` does not contain data needed for FES to function.
 - `uglify` takes the output file of `browserify:min` and minify it into the final p5.min.js (configuration of this step is in the main Gruntfile.js).
@@ -247,7 +247,7 @@ This step spins up a local server hosting the test files and built source code f
 mochaChrome
 ```
 
-This step is defined in [./tasks/test/mocha-chrome.js](tasks/test/mocha-chrome.js). It uses Puppeteer to spin up a headless version of Chrome that can be remote controlled and runs the tests associated with the HTML files in the `./test` folder, which includes testing the unminified and minified version of the library against the unit test suites as well as testing all reference examples.
+This step is defined in [../tasks/test/mocha-chrome.js](../tasks/test/mocha-chrome.js). It uses Puppeteer to spin up a headless version of Chrome that can be remote controlled and runs the tests associated with the HTML files in the `./test` folder, which includes testing the unminified and minified version of the library against the unit test suites as well as testing all reference examples.
 
 ```
 mochaTest

contributor_docs/web_accessibility.md

@@ -6,7 +6,7 @@ This document describes the structure of p5.js’ web accessibility features for
 
 If you want to make your sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader)-accessible, visit the How to label your p5.js code tutorial.
 
-If you want to use p5.js with a screen reader, visit the [Using p5.js with a Screen Reader tutorial](https://p5js.org/learn/p5-screen-reader.html).
+If you want to use p5.js with a screen reader, visit the [Using p5.js with a Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader).
 
 The canvas HTML element is a grid of pixels. It doesn’t provide any screen reader-accessible information about the shapes drawn on it. p5.js has several functions that make the canvas more accessible to screen readers by providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions. I’ll describe some of the details around the implementation of these functions.
 

contributor_docs/webgl_contribution_guide.md

@@ -8,7 +8,7 @@ If you're reading this page, you're probably interested in helping work on WebGL
 ## Resources
 
 - Read our [p5.js WebGL architecture overview](webgl_mode_architecture.md) to understand how WebGL mode differs from 2D mode. This will be a valuable reference for some implementation specifics for shaders, strokes, and more.
-- Read our [contributor guidelines](https://p5js.org/contributor-docs/#/./contributor_guidelines) for information on how to create issues, set up the codebase, and test changes.
+- Read our [contributor guidelines](./contributor_guidelines) for information on how to create issues, set up the codebase, and test changes.
 - It can be helpful to know a bit about the browser's WebGL API, which is what p5.js's WebGL mode is built on top of:
   - [WebGL fundamentals](https://webglfundamentals.org/) goes over many core rendering concepts
   - [The Book of Shaders](https://thebookofshaders.com/) explains many techniques used in WebGL shaders

src/color/creating_reading.js

@@ -953,11 +953,11 @@ p5.prototype.hue = function(c) {
  * values. 0 is equal to the first color, 0.1 is very near the first color,
  * 0.5 is halfway between the two colors, and so on. Negative numbers are set
  * to 0. Numbers greater than 1 are set to 1. This differs from the behavior of
- * <a href="#/lerp">lerp</a>. It's necessary because numbers outside of the
+ * <a href="#/p5/lerp">lerp</a>. It's necessary because numbers outside of the
  * interval [0, 1] will produce strange and unexpected colors.
  *
  * The way that colors are interpolated depends on the current
- * <a href="#/colorMode">colorMode()</a>.
+ * <a href="#/p5/colorMode">colorMode()</a>.
  *
  * @method lerpColor
  * @param  {p5.Color} c1  interpolate from this color.

src/core/friendly_errors/fes_core.js

@@ -145,8 +145,8 @@ if (typeof IS_MINIFIED !== 'undefined') {
 
       //Whenever func having p5.[Class] is encountered, we need to have the error link as mentioned below else different link
       funcName.startsWith('p5.')  ?
-        msgWithReference = `${message} (http://p5js.org/reference/#/${referenceSection}.${funcName})` :
-        msgWithReference = `${message} (http://p5js.org/reference/#/${referenceSection}/${funcName})`;
+        msgWithReference = `${message} (http://p5js.org/reference/${referenceSection}.${funcName})` :
+        msgWithReference = `${message} (http://p5js.org/reference/${referenceSection}/${funcName})`;
     }
     return msgWithReference;
   };
@@ -777,7 +777,7 @@ if (typeof IS_MINIFIED !== 'undefined') {
 
             // if the flow gets this far, this is likely not a misspelling
             // of a p5 property/function
-            let url = 'https://p5js.org/examples/data-variable-scope.html';
+            let url = 'https://p5js.org/tutorials/variables-and-change/';
             p5._friendlyError(
               translator('fes.globalErrors.reference.notDefined', {
                 url,