Update p5.js to v2.1.0

Author: github-actions[bot]

public/reference/data.json

@@ -305,7 +305,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](../web_accessibility/#describe).
+For more on `describe()` visit the [web accessibility contributor documentation](../web_accessibility/#describe), and the [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial.
 
 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.
 
@@ -380,36 +380,22 @@ Class constructors are defined with the `@class` tag and the `@constructor` tag.
 
 The p5.js repository is set up so that you can generate and preview the reference without needing to build and run the p5.js website as well.
 
-To do so, make sure you have committed and pushed your changes to a branch of your fork of p5.js.
-
-**Important:** Make sure you're working with compatible branches:
-
-- Use the `2.0` branch of p5.js-website with the `dev-2.0` branch of p5.js
-- Use the `main` branch of p5.js-website with the `main` branch of p5.js
-
-* First, ensure you have the necessary dependencies installed in the p5.js-website repository:
+* The main command to generate the reference from the reference comments in the source code is to run the following command.
 
 ```
-npm install
+npm run docs
 ```
 
-* Then, in the p5.js-website repo, run the following command, using the URL of your fork of p5 before the `#`, and the name of your branch after the `#`:
+This will generate the necessary preview files and the main `docs/reference/data.json` file, which is the same file (after minification) that will be used to render the reference page on the website.
 
-```
-npm run custom:dev https://github.com/yourUsername/p5.js.git#yourBranch
-```
-
-This will build the reference from your branch and start a development preview of the website. A URL will be logged in the console that you can go to in your browser to test out your changes.
-
-If everything is working correctly, your terminal output should look similar to this:
-![Terminal output showing successful npm run custom:dev execution](src/content/contributor-docs/images/custom-dev-terminal-output.png)
-
-* When you're done, you can run this command to reset your changes:
+* For continuous work on the reference, you can run the following command.
 
 ```
-npm run custom:cleanup
+npm run docs:dev
 ```
 
+This will launch a live preview of the rendered reference that will update each time you make changes (you will need to refresh the page after making changes to see them appear). This is useful, especially for previewing example code running in the browser.
+
 * The main template files are stored in the `docs/` folder and, in most cases, you should not make changes directly to files in this folder, except to add new asset files in the `docs/yuidoc-p5-theme/assets` folder.
 
 ## Next steps

public/search-indices/en.json

@@ -275,7 +275,6 @@ Some of the key files and folders you will be in the p5.js folder are as follows
 * `src` - Where all the code that eventually gets combined into the final p5.js and p5.min.js files lives
 * [`test`](../unit_testing/) - Where unit tests and code for testing all documentation examples lives
 * `tasks` - Where detailed and custom build code lives
-* `Gruntfile.js` - This is the main build configuration file
 * `contributor_docs` - Where the documentation and all other contributor documentation lives
 
 The other files and folders are either configurations or other kinds of support files; in most cases, you shouldn't need to make any modifications.

public/search-indices/es.json

@@ -283,6 +283,37 @@ if (typeof p5 !== undefined) {
 
 In the above snippet, an additional `if` condition is added around the call to `p5.registerAddon()`. This is done to support both direct usage in ESM modules (where users can directly import your addon function then call `p5.registerAddon()` themselves) and after bundling support regular `<script>` tag usage without your users needing to call `p5.registerAddon()` directly as long as they have included the addon `<script>` tag after the `<script>` tag including p5.js itself.
 
+## Accessing custom actions
+
+In certain circumstances, such as when you have a library that listens to a certain browser event, you may wish to run a function that your user defined on the global scope, much like how a `click` event triggers a user defined `mouseClicked()` function. We call these functions "custom actions" and your addon can access any of them through `this._customActions` object.
+
+The following addon snippet listens to the `click` event on a custom button element.
+
+```js
+function myAddon(p5, fn, lifecycles){
+  lifecycles.presetup = function(){
+    let customButton = this.createButton('click me');
+    customButton.elt.addEventListener('click', this._customActions.myAddonButtonClicked);
+  };
+}
+```
+
+In a sketch that uses the above addon, a user can define the following:
+
+```js
+function setup(){
+  createCanvas(400, 400);
+}
+
+function myAddonButtonClicked(){
+  // This function will be run each time the button created by the addon is clicked
+}
+```
+
+Please note that in the above example, if the user does not define `function myAddonButtonClicked()` in their code, `this._customActions.myAddonButtonClicked` will return `undefined`. This means that if you are planning to call the custom action function directly in your code, you should include an `if` statement check to make sure that `this._customActions.myAddonButtonClicked` is defined.
+
+Overall, this custom actions approach supports accessing the custom action functions in both global mode and instance mode with the same code, simplifying your code from what it otherwise may need to be.
+
 ## Next steps
 
 Below are some extra tips about authoring your addon library.
@@ -315,6 +346,21 @@ fn.myMethod = function(){
 
 **p5.js library filenames are also prefixed with p5, but the next word is lowercase** to distinguish them from classes. For example, p5.sound.js. You are encouraged to follow this format for naming your file.
 
+**In some cases, you will need to make sure your addon cleans up after itself after a p5.js sketch is removed** by the user calling `remove()`. This means adding relevant clean up code in the `lifecycles.remove` hook. In most circumstances, you don't need to do this with the main exception being cleaning up event handlers: if you are using event handlers (ie. calling `addEventListeners`), you will need to make sure those event handlers are also removed when a sketch is removed. p5.js provides a handy method to automatically remove any registered event handlers with and internal property `this._removeSignal`. When registering an event handler, include `this._removeSignal` as follow:
+
+```js
+function myAddon(p5, fn, lifecycles){
+  lifecycles.presetup = function(){
+    // ... Define `target` ...
+    target.addEventListener('click', function() { }, {
+      signal: this._removeSignal
+    });
+  };
+}
+```
+
+With this you will not need to manually define a clean up actions for event handlers in `lifecycles.remove` and all event handlers associated with the `this._removeSignal` property as above will be automtically cleaned up on sketch removal.
+
 **Packaging**
 
 **Create a single JS file that contains your library.** This makes it easy for users to add it to their projects. We suggest using a [bundler](https://rollupjs.org/) for your library. You may want to provide options for both the normal JavaScript file for sketching/debugging and a [minified](https://terser.org/) version for faster loading.

public/search-indices/hi.json

@@ -34,6 +34,7 @@ Our community is large and diverse. Many people learn to code using p5.js, and a
 
 * [Code Samples](#code-samples)
 * [Comments](#comments)
+* [Accessible Canvas Labels](#accessible-canvas-labels)
 * [Whitespace](#whitespace)
 * [Semicolons](#semicolons)
 * [Naming Conventions](#naming-conventions)
@@ -241,6 +242,47 @@ let magicWord = 'Please';
 
 **[⬆ back to top](#table-of-contents)**
 
+## Accessible Canvas Labels
+
+* Use `describe()` to in p5.js example code, to add labels to your canvas so that it’s readable for screen readers.
+
+> Why? It makes examples accessible to screen readers, and models how to write good canvas labels.
+
+```javascript
+// Good.
+function setup() {
+  createCanvas(100, 100);
+  describe('A red heart in the bottom right corner of a pink background.');
+}
+
+// Bad.
+function setup() {
+  createCanvas(100, 100);
+  describe('heart shape');
+}
+
+// Good.
+function draw() {
+  background(220);
+  fill(0, 255, 0);
+  ellipse(mouseX, 50, 40, 40);
+  // Label updates with shape's translation.
+  describe(`A green circle at x pos ${round(mouseX)} moving with the mouse pointer.`, LABEL);
+}
+```
+
+* Don’t use screen reader labels as a way of commenting your code. Labels should only summarize the resulting visual elements within a canvas.
+
+* Don’t overuse screen reader labels, as you may end up complicating the screen reader’s interpretation of the canvas rather than helping it.
+
+* Do make your label descriptions short and accurate. The recommended length for label descriptions is one to two sentences. Use full sentences for your labels, and write in the present tense when describing elements.
+
+The above examples and suggestions are based on the [Writing Accessible Canvas Descriptions tutorial](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/). This tutorial gives more detailed guidance, and includes other ways to label your canvas, in addition to  `describe()`: `describeElement()`, `textOutput()`, and `gridOutput()`.
+
+To understand the structure of p5.js’ web accessibility features for contributors, see the [Web Accessibility Contributor Doc](../web_accessibility.md#user-generated-accessible-canvas-descriptions).
+
+**[⬆ back to top](#table-of-contents)**
+
 ## Whitespace
 
 * Indent blocks 2 spaces.