From 85f6a0d7c2d8706713d37c350dcadb4c6ff4f7ed Mon Sep 17 00:00:00 2001
From: limzykenneth <limzy.kenneth@gmail.com>
Date: Wed, 20 Mar 2024 17:55:40 +0000
Subject: [PATCH 1/3] Remove merged docs

---
 .../contributing_documentation.md             | 39 ----------------
 contributor_docs/design_principles.md         | 10 -----
 contributor_docs/organization.md              | 45 -------------------
 contributor_docs/steward_guidelines.md        |  2 +-
 4 files changed, 1 insertion(+), 95 deletions(-)
 delete mode 100644 contributor_docs/contributing_documentation.md
 delete mode 100644 contributor_docs/design_principles.md
 delete mode 100644 contributor_docs/organization.md

diff --git a/contributor_docs/contributing_documentation.md b/contributor_docs/contributing_documentation.md
deleted file mode 100644
index 8a2caddf64..0000000000
--- a/contributor_docs/contributing_documentation.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# Contributing Documentation
-
-Documentation is essential for new learners and experienced programmers alike. It helps make our community inclusive by extending a friendly hand to those who are less familiar with p5.js. It also helps us find the bugs and issues with the code itself, because we test and try things out as we document.
-
-There are several ways to contribute to documentation:
-
-## ☝️ Make changes
-If you're just getting started, one really helpful way you can contribute is by improving our documentation. If you notice a typo, a missing or broken example, or a function description that is confusing, here are some things you can do:
-* If you are just correcting a small typo, feel free to go ahead and work on it and send in a PR when you're finished! 
-* If you don't feel like fixing it yourself, that's alright. Let us know by [opening an issue](https://github.com/processing/p5.js/issues).
-* If you're unsure about anything, [open an issue](https://github.com/processing/p5.js/issues) anyway!
-
-## 🗯 Contribute to the reference  
-Read through the [reference](http://p5js.org/reference/), and look for typos, broken examples, or confusing documentation. If it's a straightforward fix, go ahead and work on it! If it's a more involved question that requires discussion, create an [issue](https://github.com/processing/p5.js/issues/new).
-* Here are instructions for [getting setup for the first time with the p5.js repo](./README.md).
-* The reference is built from the inline documentation in the source code (found in the `src/` folder).
-* Here is information on [how to update or add inline documentation and examples](./inline_documentation.md).
-* Here is the [documentation style guide](./documentation_style_guide.md) for writing and code samples.
-* If you find errors with the [spanish documentation](http://p5js.org/es), there are instructions to update this [here](https://github.com/processing/p5.js-website#internationalization-i18n-and-structure).
-* Community-maintained Typescript definitions are [here](https://github.com/p5-types/p5.ts).
-
-## ✨ Make examples  
-While the examples in the reference are meant to be very simplistic snippets of code, it is also useful to have longer, more complex examples.
-* Currently we are working on porting the examples from the [processing examples page](https://processing.org/examples/) to the [p5.js examples page](http://p5js.org/examples). If you would like to help with this, please see the instructions [here](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md).
-* Alternatively, you can create your own set of examples and publish them independently anywhere you like. If you share them online tag [@p5xjs](https://twitter.com/p5xjs) or email [hello@p5js.org](mailto:hello@p5js.org) to let us know, and we will share far and wide! This [guide to embedding p5.js](https://github.com/processing/p5.js/wiki/Embedding-p5.js) may be useful for posting your examples online.
-* If you find bugs in p5.js along the way, please log them in the [issues](https://github.com/processing/p5.js/issues).
-
-## 👯 Make tutorials 
-* If you are new to p5.js, this is a great place to start. Try making something yourself, then making a tutorial to teach others to do it too.
-* Currently we are working on porting the tutorials from the [processing tutorials page](https://processing.org/tutorials) to the [p5.js learn page](http://p5js.org/learn). If you would like to help with this, please see the tutorial on making tutorials [here](https://p5js.org/learn/tutorial-guide.html).
-* We also welcome tutorials on different subjects. You can publish these anywhere, in any format you like. If you share them online tag [@p5xjs](https://twitter.com/p5xjs) or email [hello@p5js.org](mailto:hello@p5js.org) to let us know, and we will share far and wide! We especially encourage tutorials created with a specific audience or use case in mind (ex: p5 for journalists, activists, poets, kids, seniors, dreamers, in a different language, etc). We like to consider, who does not already feel welcome or included in the p5 community, and can we use learning as an invitation? What is the language you use to communicate with your audience and make them feel known? Feel free to be experimental with your format. Check out [Sharon De La Cruz's talk on Code Slang](https://www.youtube.com/watch?v=CFT6w9NKfCs) for inspiration.
-* If you find bugs in p5.js along the way, please log them in the [issues](https://github.com/processing/p5.js/issues).
-
-## 👉 Getting started
-* Read the [p5.js community statement](http://p5js.org/community/)
-* Optional: Check out the [contributor docs](./README.md) to get an overview of the repository and learn how to build the code (if relevant for you).
-* All discussion happens on GitHub issues, so there's no slack/gitter/etc channel you need to join.
-* Add your name to the [contributors list](https://github.com/processing/p5.js#contributors) in the readme.md file! Instructions [here](https://github.com/processing/p5.js/issues/2309).
-* And of course, if you're more of a bug fixer kind of person, feel free to jump into any of the [issues](https://github.com/processing/p5.js/issues)!
diff --git a/contributor_docs/design_principles.md b/contributor_docs/design_principles.md
deleted file mode 100644
index a32d23d1c2..0000000000
--- a/contributor_docs/design_principles.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Design principles for p5.js
-
-- **Beginner Friendly** The p5.js API aims to be friendly to beginner coders, offering a low barrier to creating interactive and visual web content with cutting-edge HTML5/canvas/DOM APIs.
-
-- **Educational** p5.js is focused on an API and curriculum that supports educational use, including a complete reference to the API with supporting examples, as well as tutorials and sample class curricula that introduces core creative coding principles in a clear and engaging order.
-
-- **JavaScript and its community** p5.js aims to make web development practices more accessible to beginners by modeling proper JavaScript design patterns and usage, while abstracting them where necessary. As an open source library, p5.js also includes the wider JavaScript community in its creation, documentation and dissemination.
-
-- **Processing and its community** p5.js is a direct response to the Processing language and its community, and aims to make the transition from Processing to JavaScript easy and clear.  Supporting the Processing API and community is a priority for p5.js, while also expanding to include the new possibilities of creative coding on the web, and taking a Processing-style approach to exposing that API to beginners.
-
diff --git a/contributor_docs/organization.md b/contributor_docs/organization.md
deleted file mode 100644
index 3558923861..0000000000
--- a/contributor_docs/organization.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Organizing Contributions
-Keeping the repository organized ensures that it is always clear which discussions and tasks are the most important. This helps everyone from maintainers to new contributors navigate the repository without getting overwhelmed. To help with this, we have a set of guidelines for how to organize issues, work, and pull requests.
-
-Helping with organization can be a great way to contribute. If a bug report is missing information such as example code, feel free to chime in and ask for the missing info. If an issue with an assignee has seen no activity for 60 days, it can be helpful to comment on the issue to check in with the assignee to see if they still want to work on the issue. Whenever you are helping with organizational tasks, make sure to be kind and always keep the community guidelines in mind.
-
-# Guidelines for Organization
-
-## Issues
-- **All issues should use the relevant issue template**
-- **All bug reports should include sample code**
-  - This can be in the form of code posted in the body of the issue, or it can be a link to an online example of the code preferably in [the online editor](https://editor.p5js.org)
-- **All issues should have at least 2 labels**
-  - This makes it much easier to navigate the issues.
-  - Depending on issue template used, labels for area will be automatically set in many cases. You can add additional labels as required.
-- **Issue assignment is first-come, first-serve**
-  - If a bug has been reproduced, or a feature request/enhancement has been agreed upon by the community, it becomes available for assignment. When this happens the first contributor to request assignment by saying something like "I'd like to work on this issue!" will be assigned.
-  - Do not request to be assigned to an issue if it is unclear whether the bug is reproducible or the feature request/enhancement has been agreed upon.
-
-## Pull Requests
-- **All pull requests should be associated with an issue**
-  - If you want to fix a bug or add a feature, start by opening an issue so the community can discuss it.
-  - If a pull request is opened without an associated issue, comment and ask the contributor to open an issue.
-
-
-
-# Guidelines for Decision-Making
-p5 aspires to make its decision-making process as transparent and horizontal as possible. To do this, p5 uses an informal consensus-seeking model for decision-making. This means that we prefer to reach community consensus on any and all decisions. If this fails, then a vote will take place instead.
-
-**Stewards** have the ability to veto proposals. This can happen when a proposal doesn't align with the mission/community guidelines, or when a proposal presents a significant maintenance or implementation challenge that the project is not able to tackle at that time.
-
-To propose a change, open an issue. If it is a large change or a change that necessitates significant design consideration, add a 'discussion' label to the issue. Interested community members will chime in with their thoughts. After a significant period has passed (30 days unless urgent), maintainers will try to discern whether there is significant interest and whether consensus has been reached about the best approach. At this point, maintainers will either request a vote, close the issue, or open up the issue for pull requests. Pull requests submitted before a discussion has concluded will be ignored.
-
-> In the future it would be great to automate the above organization and decision-making processes.
-
-> If you have an idea for how to automate any of the above with a bot or github action feel free to open an issue with your proposal!
-
-
-
-# Stewards
-
-Stewards are contributors that are particularly involved, familiar, or responsive to certain areas of the project. Their role is to help provide context and guidance to others working on p5.js. If you have a question about contributing to a particular area, you can tag the listed steward in an issue or pull request. They may also weigh in on feature requests and guide the overall direction of their area, with the input of the community.
-
-Anyone interested can volunteer to be a steward! There are no specific requirements for expertise, just an interest in actively learning and participating. If you’re familiar with one or more parts of this project, open an issue to volunteer as a steward!
-
-Once added, a steward's username will remain in the [stewards section of the readme](https://github.com/processing/p5.js#stewards) until they request to be removed. If a steward is unresponsive for an extended period of time, we may ping them to ask about their status. And you can always take a break as a steward and come back!
diff --git a/contributor_docs/steward_guidelines.md b/contributor_docs/steward_guidelines.md
index 77145ece82..cc9a090565 100644
--- a/contributor_docs/steward_guidelines.md
+++ b/contributor_docs/steward_guidelines.md
@@ -43,7 +43,7 @@ Bug report issues should use the "Found a bug" issue template. The following wor
      - Otherwise, leave a comment about where the bug report should be filed (with a direct link provided) and close the issue.
    - The first step in reviewing a bug report is to see if enough information is provided for a bug replication, and if so, attempt to replicate the bug as described.
 2. If the bug can be replicated:
-   - Some discussion may be required to determine the best way to fix a particular bug. Sometimes, it may be straightforward; sometimes, it may be tricky. Please refer to [p5.js' design principles](design_principles.md) when making this decision on a case-by-case basis.
+   - Some discussion may be required to determine the best way to fix a particular bug. Sometimes, it may be straightforward; sometimes, it may be tricky. Please refer to [p5.js' design principles](./contributor_guidelines.md#software-design-principles) when making this decision on a case-by-case basis.
    - If the issue author indicated in the issue they are willing to contribute a fix:
      - Approve the issue for fixing by the issue author by leaving a comment and assigning them to the issue. Use the cog button on the right side next to "Assignee".
    - If the issue author does not wish to contribute a fix:

From 4d8161ace2d2831cc834c2b39ac0725320e3dd6d Mon Sep 17 00:00:00 2001
From: limzykenneth <limzy.kenneth@gmail.com>
Date: Thu, 21 Mar 2024 00:00:12 +0000
Subject: [PATCH 2/3] Archive some contributor documentation

---
 .../{ => archive}/custom_p5_build.md          |  0
 contributor_docs/archive/discussions.md       |  3 --
 .../{ => archive}/internationalization.md     |  0
 .../{ => archive}/issue_labels.md             |  0
 .../{ => archive}/supported_browsers.md       |  0
 contributor_docs/repo_structure.md            | 30 -------------------
 contributor_docs/sidebar.md                   |  6 +---
 7 files changed, 1 insertion(+), 38 deletions(-)
 rename contributor_docs/{ => archive}/custom_p5_build.md (100%)
 delete mode 100644 contributor_docs/archive/discussions.md
 rename contributor_docs/{ => archive}/internationalization.md (100%)
 rename contributor_docs/{ => archive}/issue_labels.md (100%)
 rename contributor_docs/{ => archive}/supported_browsers.md (100%)
 delete mode 100644 contributor_docs/repo_structure.md

diff --git a/contributor_docs/custom_p5_build.md b/contributor_docs/archive/custom_p5_build.md
similarity index 100%
rename from contributor_docs/custom_p5_build.md
rename to contributor_docs/archive/custom_p5_build.md
diff --git a/contributor_docs/archive/discussions.md b/contributor_docs/archive/discussions.md
deleted file mode 100644
index 41327fb689..0000000000
--- a/contributor_docs/archive/discussions.md
+++ /dev/null
@@ -1,3 +0,0 @@
-Joining in on the discussion about how p5 is developed is a great way to contribute. This can be done in a number of ways but one great place to start is by checking out the existing Github [issues that have been labeled 'discussion'](https://github.com/processing/p5.js/labels/discussion) and adding your voice.
-
-The documents in this subsection are developed based on these discussion. This is where we compile ideas about current and future design for the library.
diff --git a/contributor_docs/internationalization.md b/contributor_docs/archive/internationalization.md
similarity index 100%
rename from contributor_docs/internationalization.md
rename to contributor_docs/archive/internationalization.md
diff --git a/contributor_docs/issue_labels.md b/contributor_docs/archive/issue_labels.md
similarity index 100%
rename from contributor_docs/issue_labels.md
rename to contributor_docs/archive/issue_labels.md
diff --git a/contributor_docs/supported_browsers.md b/contributor_docs/archive/supported_browsers.md
similarity index 100%
rename from contributor_docs/supported_browsers.md
rename to contributor_docs/archive/supported_browsers.md
diff --git a/contributor_docs/repo_structure.md b/contributor_docs/repo_structure.md
deleted file mode 100644
index 27ce5dff92..0000000000
--- a/contributor_docs/repo_structure.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Where our code lives
-
-The overarching p5.js project includes some repositories other than this one:
-
-- **[p5.js](https://github.com/processing/p5.js)**: This repository contains the source code for the p5.js library. The [user-facing p5.js reference manual](https://p5js.org/reference/) is also generated from the [JSDoc](https://jsdoc.app/) comments included in this source code. It is maintained by [Qianqian Ye](https://github.com/qianqianye) and a group of [stewards](https://github.com/processing/p5.js#stewards).
-- **[p5.js-website](https://github.com/processing/p5.js-website)**: This repository contains most of the code for the [p5.js website](http://p5js.org), with the exception of the reference manual. It is maintained by [Qianqian Ye](https://github.com/qianqianye), [Kenneth Lim](https://github.com/limzykenneth), and a group of [stewards](https://github.com/processing/p5.js-website#stewards).
-- **[p5.js-sound](https://github.com/processing/p5.js-sound)**: This repository contains the p5.sound.js library. It is maintained by [Jason Sigal](https://github.com/therewasaguy).
-- **[p5.js-web-editor](https://github.com/processing/p5.js-web-editor)**: This repository contains the source code for the [p5.js web editor](https://editor.p5js.org). It is maintained by [Cassie Tarakajian](https://github.com/catarak).
-- Other add-on libraries not listed above usually have their own repository and maintainers and are not maintained by the p5.js project directly.
-
-
-## Repository File Structure
-
-There are a lot of files here! Here's a brief overview. It can be confusing, but you don't need to understand every file in the repository to get started. We recommend beginning in one area (for example, fixing some inline documentation), and working your way outwards to exploring more. Luisa Pereira's [Looking Inside p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation) also gives a video tour of the tools and files used in the p5.js workflow.
-
-- 📁`contributor_docs/` contains  documents that explain practices and principles for contributors
-- 📁`docs/` does not actually contain docs! Rather, it contains the code used to *generate* the [online reference manual](https://p5js.org/reference/).
-- 📁`lib/` contains an empty example and the p5.sound add-on, which is periodically updated via pull request from the [p5.js-sound repository](https://github.com/processing/p5.js-sound). This is also where the built p5.js library gets placed after being compiled to a single file using [Grunt](https://gruntjs.com/). It does not need to be checked into the GitHub repository when you make a pull request.
-- 📁`src/` contains all the source code for the library, which is topically organized into separated modules. This is what you'll work on if you are changing p5.js. Most folders have their own readme.md files inside to help you find your way around.
-- 📁`tasks/` contains scripts which perform automated tasks related to the build, deployment, and release of new versions of p5.js.
-- 📁`tests/` contains unit tests which ensure the library continues to function correctly as changes are made.
-- 📁`utils/` might contain additional files useful for the repository, but generally you can ignore this directory.
-
-
-## Miscellaneous
-- There are other files in the 📁[`contributor_docs/`](https://github.com/processing/p5.js/tree/main/contributor_docs) folder that you might explore. They pertain to contributing to specific areas of this project, both technical and non-technical.
-- [Looking Inside p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation) is a video tour of the tools and files used in the p5.js development workflow.
--  [This video from The Coding Train](https://youtu.be/Rr3vLyP1Ods) :train::rainbow: gives an overview of getting started with technical contribution to p5.js.
-- The p5.js [Docker image](https://github.com/toolness/p5.js-docker) can be mounted in [Docker](https://www.docker.com/) and used to develop p5.js without requiring manual installation of requirements like [Node](https://nodejs.org/) or otherwise affecting the host operating system in any way, aside from the installation of Docker.
-- The build process for the p5.js library generates a [JSON data file](https://p5js.org/reference/data.json) which contains the public API of p5.js and can be used in automated tooling, such as for autocompleting p5.js methods in an editor. This file is hosted on the p5.js website, but it is not included as part of the repository.
diff --git a/contributor_docs/sidebar.md b/contributor_docs/sidebar.md
index 2405eadc56..f33fe44db0 100644
--- a/contributor_docs/sidebar.md
+++ b/contributor_docs/sidebar.md
@@ -4,7 +4,7 @@
 - [__CONTRIBUTOR GUIDELINES__](contributor_guidelines.md)
 - [__STEWARD GUIDELINES__](steward_guidelines.md)
 - __CONTRIBUTING DOCS__
-  - [Contributing Documentation](contributing_documentation.md)
+  - [Contributing to the p5.js Reference](contributing_to_the_p5.js_reference.md)
 - __CONTRIBUTING CODE__
   - [Contributing to the p5.js Reference](contributing_to_the_p5.js_reference.md)
   - [Creating Libraries](creating_libraries.md)
@@ -12,10 +12,6 @@
   - [Unit Testing](unit_testing.md)
   - [Friendly-Error System](friendly_error_system.md)
 - __RELATED INFO__
-  - [Repository Structure](repo_structure.md)
-  - [Issue Labels](issue_labels.md)
   - [WebGL Architecture](webgl_mode_architecture.md)
-  - [Supported Browsers](supported_browsers.md)
   - [Web Accessibility](web_accessibility.md)
-  - [Custom Builds](custom_p5_build.md)
   - [Release Process](release_process.md)

From 2c14ffcaf6ee3f447b8a7d003d32938c65652c10 Mon Sep 17 00:00:00 2001
From: limzykenneth <limzy.kenneth@gmail.com>
Date: Thu, 21 Mar 2024 00:15:04 +0000
Subject: [PATCH 3/3] Clean up and archive old docs from translations and
 formatting correction

---
 .../contributing_to_the_p5.js_reference.md    | 322 +++++++++---------
 contributor_docs/creating_libraries.md        | 108 +++---
 .../es/contributing_to_the_p5.js_reference.md | 304 ++++++++---------
 .../es/webgl_contribution_guide.md            |   2 +-
 contributor_docs/fes_contribution_guide.md    | 148 ++++----
 .../hi/{ => archive}/benchmarking_p5.md       |   0
 .../hi/{ => archive}/design_principles.md     |   0
 .../hi/{ => archive}/es6-adoption.md          |   0
 .../hi/{ => archive}/issue_labels.md          |   0
 contributor_docs/hi/{ => archive}/roadmap.md  |   0
 contributor_docs/hi/discussions.md            |   3 -
 contributor_docs/hi/organization.md           |  46 ---
 .../hi/preparing_a_pull_request.md            |  50 ---
 .../ko/{ => archive}/benchmarking_p5.md       |   0
 .../ko/{ => archive}/custom_p5_build.md       |   0
 .../ko/{ => archive}/es6-adoption.md          |   0
 .../ko/{ => archive}/internationalization.md  |   0
 .../ko/{ => archive}/issue_labels.md          |   0
 contributor_docs/ko/{ => archive}/roadmap.md  |   0
 .../ko/{ => archive}/supported_browsers.md    |   0
 .../ko/contributing_to_the_p5.js_reference.md | 308 ++++++++---------
 contributor_docs/ko/design_principles.md      |   9 -
 contributor_docs/ko/discussions.md            |   3 -
 contributor_docs/ko/organization.md           |  47 ---
 .../ko/preparing_a_pull_request.md            |  50 ---
 .../ko/webgl_contribution_guide.md            |   2 +-
 contributor_docs/steward_guidelines.md        |  28 +-
 contributor_docs/unit_testing.md              | 118 +++----
 contributor_docs/web_accessibility.md         | 182 +++++-----
 contributor_docs/webgl_contribution_guide.md  |  94 ++---
 .../zh/{ => archive}/custom_p5_build.md       |   0
 .../zh/{ => archive}/internationalization.md  |   0
 .../zh/{ => archive}/issue_labels.md          |   0
 .../zh/{ => archive}/supported_browsers.md    |   0
 .../zh/contributing_documentation.md          |  38 ---
 .../zh/contributing_to_the_p5.js_reference.md | 296 ++++++++--------
 contributor_docs/zh/design_principles.md      |  10 -
 contributor_docs/zh/organization.md           |  45 ---
 contributor_docs/zh/repo_structure.md         |  30 --
 39 files changed, 956 insertions(+), 1287 deletions(-)
 rename contributor_docs/hi/{ => archive}/benchmarking_p5.md (100%)
 rename contributor_docs/hi/{ => archive}/design_principles.md (100%)
 rename contributor_docs/hi/{ => archive}/es6-adoption.md (100%)
 rename contributor_docs/hi/{ => archive}/issue_labels.md (100%)
 rename contributor_docs/hi/{ => archive}/roadmap.md (100%)
 delete mode 100644 contributor_docs/hi/discussions.md
 delete mode 100644 contributor_docs/hi/organization.md
 delete mode 100644 contributor_docs/hi/preparing_a_pull_request.md
 rename contributor_docs/ko/{ => archive}/benchmarking_p5.md (100%)
 rename contributor_docs/ko/{ => archive}/custom_p5_build.md (100%)
 rename contributor_docs/ko/{ => archive}/es6-adoption.md (100%)
 rename contributor_docs/ko/{ => archive}/internationalization.md (100%)
 rename contributor_docs/ko/{ => archive}/issue_labels.md (100%)
 rename contributor_docs/ko/{ => archive}/roadmap.md (100%)
 rename contributor_docs/ko/{ => archive}/supported_browsers.md (100%)
 delete mode 100644 contributor_docs/ko/design_principles.md
 delete mode 100644 contributor_docs/ko/discussions.md
 delete mode 100644 contributor_docs/ko/organization.md
 delete mode 100644 contributor_docs/ko/preparing_a_pull_request.md
 rename contributor_docs/zh/{ => archive}/custom_p5_build.md (100%)
 rename contributor_docs/zh/{ => archive}/internationalization.md (100%)
 rename contributor_docs/zh/{ => archive}/issue_labels.md (100%)
 rename contributor_docs/zh/{ => archive}/supported_browsers.md (100%)
 delete mode 100644 contributor_docs/zh/contributing_documentation.md
 delete mode 100644 contributor_docs/zh/design_principles.md
 delete mode 100644 contributor_docs/zh/organization.md
 delete mode 100644 contributor_docs/zh/repo_structure.md

diff --git a/contributor_docs/contributing_to_the_p5.js_reference.md b/contributor_docs/contributing_to_the_p5.js_reference.md
index 115ceb1e65..d72a3208cd 100644
--- a/contributor_docs/contributing_to_the_p5.js_reference.md
+++ b/contributor_docs/contributing_to_the_p5.js_reference.md
@@ -11,62 +11,62 @@ When you look at the source code of p5.js, you will see many lines in the librar
 
 ```
 /**
- * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
- * in creative coding. The values returned oscillate between -1 and 1 as the
- * input angle increases. `sin()` takes into account the current
- * <a href="#/p5/angleMode">angleMode</a>.
- *
- * @method sin
- * @param  {Number} angle the angle.
- * @return {Number} sine of the angle.
- *
- * @example
- * <div>
- * <code>
- * function draw() {
- *   background(200);
- *
- *   let t = frameCount;
- *   let x = 50;
- *   let y = 30 * sin(t * 0.05) + 50;
- *   line(x, 50, x, y);
- *   circle(x, y, 20);
- *
- *   describe('A white ball on a string oscillates up and down.');
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * function draw() {
- *   let x = frameCount;
- *   let y = 30 * sin(x * 0.1) + 50;
- *   point(x, y);
- *
- *   describe('A series of black dots form a wave pattern.');
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * function draw() {
- *   let t = frameCount;
- *   let x = 30 * cos(t * 0.1) + 50;
- *   let y = 10 * sin(t * 0.2) + 50;
- *   point(x, y);
- *
- *   describe('A series of black dots form an infinity symbol.');
- * }
- * </code>
- * </div>
- */
+ * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
+ * in creative coding. The values returned oscillate between -1 and 1 as the
+ * input angle increases. `sin()` takes into account the current
+ * <a href="#/p5/angleMode">angleMode</a>.
+ *
+ * @method sin
+ * @param  {Number} angle the angle.
+ * @return {Number} sine of the angle.
+ *
+ * @example
+ * <div>
+ * <code>
+ * function draw() {
+ *   background(200);
+ *
+ *   let t = frameCount;
+ *   let x = 50;
+ *   let y = 30 * sin(t * 0.05) + 50;
+ *   line(x, 50, x, y);
+ *   circle(x, y, 20);
+ *
+ *   describe('A white ball on a string oscillates up and down.');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * function draw() {
+ *   let x = frameCount;
+ *   let y = 30 * sin(x * 0.1) + 50;
+ *   point(x, y);
+ *
+ *   describe('A series of black dots form a wave pattern.');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * function draw() {
+ *   let t = frameCount;
+ *   let x = 30 * cos(t * 0.1) + 50;
+ *   let y = 10 * sin(t * 0.2) + 50;
+ *   point(x, y);
+ *
+ *   describe('A series of black dots form an infinity symbol.');
+ * }
+ * </code>
+ * </div>
+ */
 ```
 
 They are usually followed by the actual JavaScript code that defines the function. Reference comments always start with `/**` and end with `*/`, with each line in between the two starting with `*`.
 
-Anything in a block in this manner will be interpreted as reference documentation. You may be familiar with this style of code comments through [JSDoc](https://jsdoc.app/). While p5.js does not use JSDoc, it uses a very similar tool called [YUIDoc](https://yui.github.io/yuidoc/), which has a very similar reference syntax. In this style of reference comments, each comment block is further divided into individual elements, which we will have a look at next. 
+Anything in a block in this manner will be interpreted as reference documentation. You may be familiar with this style of code comments through [JSDoc](https://jsdoc.app/). While p5.js does not use JSDoc, it uses a very similar tool called [YUIDoc](https://yui.github.io/yuidoc/), which has a very similar reference syntax. In this style of reference comments, each comment block is further divided into individual elements, which we will have a look at next.
 
 
 ## Reference comments block
@@ -75,18 +75,18 @@ Let’s break down the reference comments block above for the `sin()` function a
 
 ```
 /**
- * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
- * in creative coding. The values returned oscillate between -1 and 1 as the
- * input angle increases. `sin()` takes into account the current
- * <a href="#/p5/angleMode">angleMode</a>.
+ * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
+ * in creative coding. The values returned oscillate between -1 and 1 as the
+ * input angle increases. `sin()` takes into account the current
+ * <a href="#/p5/angleMode">angleMode</a>.
 ```
 
 At the very top of the comment is the text description of the function. This description can contain both markdown syntax and HTML. The description should be concise and describe what the function does and, if necessary, some details about its quirks or behaviors.
 
 ```
  * @method sin
- * @param  {Number} angle  the angle.
- * @return {Number} sine of the angle.
+ * @param  {Number} angle  the angle.
+ * @return {Number} sine of the angle.
 ```
 
 A function will typically have the three sections above, each starting with an `@` symbol followed by one of the following keywords:
@@ -145,18 +145,18 @@ If a function has multiple possible parameter options, you can specify each indi
 
 ```
 /**
- * @method background
- * @param {String} colorstring color string, possible formats include: integer
- *                         rgb() or rgba(), percentage rgb() or rgba(),
- *                         3-digit hex, 6-digit hex
- * @param {Number} [a] alpha value
- */
+ * @method background
+ * @param {String} colorstring color string, possible formats include: integer
+ *                         rgb() or rgba(), percentage rgb() or rgba(),
+ *                         3-digit hex, 6-digit hex
+ * @param {Number} [a] alpha value
+ */
 
 /**
- * @method background
- * @param {Number} gray specifies a value between white and black
- * @param {Number} [a]
- */
+ * @method background
+ * @param {Number} gray specifies a value between white and black
+ * @param {Number} [a]
+ */
 ```
 
 
@@ -171,27 +171,27 @@ So far, we have looked at how to write references for functions and constants. V
 
 ```
 /**
- * The system variable mouseX always contains the current horizontal
- * position of the mouse, relative to (0, 0) of the canvas. The value at
- * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
- * If touch is used instead of mouse input, mouseX will hold the x value
- * of the most recent touch point.
- *
- * @property {Number} mouseX
- * @readOnly
- *
- * @example
- * <div>
- * <code>
- * // Move the mouse across the canvas
- * function draw() {
- *   background(244, 248, 252);
- *   line(mouseX, 0, mouseX, 100);
- *   describe('horizontal black line moves left and right with mouse x-position');
- * }
- * </code>
- * </div>
- */
+ * The system variable mouseX always contains the current horizontal
+ * position of the mouse, relative to (0, 0) of the canvas. The value at
+ * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
+ * If touch is used instead of mouse input, mouseX will hold the x value
+ * of the most recent touch point.
+ *
+ * @property {Number} mouseX
+ * @readOnly
+ *
+ * @example
+ * <div>
+ * <code>
+ * // Move the mouse across the canvas
+ * function draw() {
+ *   background(244, 248, 252);
+ *   line(mouseX, 0, mouseX, 100);
+ *   describe('horizontal black line moves left and right with mouse x-position');
+ * }
+ * </code>
+ * </div>
+ */
 ```
 
 The start of the block contains the description of the variable (`mouseX` in this case). To define the name of the variable, we use `@property` instead of `@method`. `@property` follows the same syntax as `@param` for defining the type and its name. The `@readonly` tag is present on most p5.js variables and is used internally to indicate this value should not be overwritten directly by a library user.
@@ -207,23 +207,23 @@ The relevant `@example` tag to create the above is as follows:
 
 ```
  * @example
- * <div>
- * <code>
- * const c = color(255, 204, 0);
- * fill(c);
- * rect(15, 20, 35, 60);
- * // Sets 'redValue' to 255.
- * const redValue = red(c);
- * fill(redValue, 0, 0);
- * rect(50, 20, 35, 60);
- * describe(
- *   'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
- * );
- * </code>
- * </div>
-```
-
-After the `@example` tag, you should start an HTML `<div>` tag followed by a `<code>` tag. In between the opening and closing `<code>`  tag, you will insert the relevant example code. The basic principle of writing good example code for the reference is to keep things simple and minimal. The example should be meaningful and explain how the feature works without being too complicated. The example’s canvas should be 100x100 pixels and if the `setup()` function is not included, such as in the example above, the code will be automatically wrapped in a `setup()` function with a default 100x100 pixels gray background canvas created. We won’t go through the details about best practices and code style for the example code here; please see the reference style guide instead.
+ * <div>
+ * <code>
+ * const c = color(255, 204, 0);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'redValue' to 255.
+ * const redValue = red(c);
+ * fill(redValue, 0, 0);
+ * rect(50, 20, 35, 60);
+ * describe(
+ *   'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
+ * );
+ * </code>
+ * </div>
+```
+
+After the `@example` tag, you should start an HTML `<div>` tag followed by a `<code>` tag. In between the opening and closing `<code>`  tag, you will insert the relevant example code. The basic principle of writing good example code for the reference is to keep things simple and minimal. The example should be meaningful and explain how the feature works without being too complicated. The example’s canvas should be 100x100 pixels and if the `setup()` function is not included, such as in the example above, the code will be automatically wrapped in a `setup()` function with a default 100x100 pixels gray background canvas created. We won’t go through the details about best practices and code style for the example code here; please see the reference style guide instead.
 
 You can have multiple examples for one feature.To do so, add an additional `<div>` and `<code>` HTML block right after the first closed, separated by a blank line.
 
@@ -235,7 +235,7 @@ You can have multiple examples for one feature.To do so, add an additional `<div
 * describe('An ellipse created using an arc with its top right open.');
 * </code>
 * </div>
-* 
+*
 * <div>
 * <code>
 * arc(50, 50, 80, 80, 0, PI, OPEN);
@@ -262,8 +262,8 @@ If you do not want the example to be run as part of the automated tests (for exa
 * @example
 * <div class='norender notest'><code>
 * function setup() {
-*   let c = createCanvas(100, 100);
-*   saveCanvas(c, 'myCanvas', 'jpg');
+*   let c = createCanvas(100, 100);
+*   saveCanvas(c, 'myCanvas', 'jpg');
 * }
 * </code></div>
 ```
@@ -273,7 +273,7 @@ If your example uses external asset files, put them in the [/docs/yuidoc-p5-them
 
 ### Add a canvas description using `describe()`
 
-Finally, for every example you add, you are required to use the p5.js function `describe()` in the example to create a screen-reader accessible description for the canvas. Include only one parameter: a string with a brief description of what is happening on the canvas. 
+Finally, for every example you add, you are required to use the p5.js function `describe()` in the example to create a screen-reader accessible description for the canvas. Include only one parameter: a string with a brief description of what is happening on the canvas.
 
 ```
 * @example
@@ -281,26 +281,26 @@ Finally, for every example you add, you are required to use the p5.js function `
 * <code>
 * let xoff = 0.0;
 * function draw() {
-*   background(204);
-*   xoff = xoff + 0.01;
-*   let n = noise(xoff) * width;
-*   line(n, 0, n, height);
-*   describe('A vertical line moves randomly from left to right.');
+*   background(204);
+*   xoff = xoff + 0.01;
+*   let n = noise(xoff) * width;
+*   line(n, 0, n, height);
+*   describe('A vertical line moves randomly from left to right.');
 * }
 * </code>
 * </div>
-* 
+*
 * <div>
 * <code>
 * let noiseScale = 0.02;
 * function draw() {
-*   background(0);
-*   for (let x = 0; x < width; x += 1) {
-*     let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
-*     stroke(noiseVal*255);
-*     line(x, mouseY + noiseVal * 80, x, height);
-*   }
-*   describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
+*   background(0);
+*   for (let x = 0; x < width; x += 1) {
+*     let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
+*     stroke(noiseVal*255);
+*     line(x, mouseY + noiseVal * 80, x, height);
+*   }
+*   describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
 * }
 * </code>
 * </div>
@@ -315,15 +315,15 @@ With all the above you should have most of the tools needed to write and edit p5
 
 You can use the `@private` if a property or variable is a private function or variable. If a feature is marked as `@private` it will not be included as part of the rendered reference on the website. The reason to use the `@private` tag to mark a reference comments block as private is when you document internal features for the library itself. For example, see the reference comments for `_start` below:
 
-   
+
 
 ```
 /**
- * _start calls preload() setup() and draw()
- * 
- * @method _start
- * @private
- */
+ * _start calls preload() setup() and draw()
+ *
+ * @method _start
+ * @private
+ */
 p5.prototype._start = function () {
 ```
 
@@ -338,12 +338,12 @@ The `@requires` tag defines the required imported modules that the current modul
 
 ```
 /**
- * @module Color
- * @submodule Creating & Reading
- * @for p5
- * @requires core
- * @requires constants
- */
+ * @module Color
+ * @submodule Creating & Reading
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
 ```
 
 The convention p5.js follows is that each subfolder in the `src/` folder will be one `@module` while each file inside the subfolder will be its own `@submodule` under the overall subfolder’s `@module`. Unless you are adding new subfolders/files to the p5.js source code, you shouldn’t need to edit this reference comments block.
@@ -355,31 +355,31 @@ Class constructors are defined with the `@class` tag and the `@constructor` tag.
 
 ```
 /**
- * A class to describe a color. Each `p5.Color` object stores the color mode
- * and level maxes that were active during its construction. These values are
- * used to interpret the arguments passed to the object's constructor. They
- * also determine output formatting such as when
- * <a href="#/p5/saturation">saturation()</a> is called.
- *
- * Color is stored internally as an array of ideal RGBA values in floating
- * point form, normalized from 0 to 1. These values are used to calculate the
- * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
- * are sent to the renderer.
- *
- * When different color representations are calculated, the results are cached
- * for performance. These values are normalized, floating-point numbers.
- *
- * <a href="#/p5/color">color()</a> is the recommended way to create an instance
- * of this class.
- *
- * @class p5.Color
- * @constructor
- * @param {p5} [pInst]                  pointer to p5 instance.
- *
- * @param {Number[]|String} vals        an array containing the color values
- *                                      for red, green, blue and alpha channel
- *                                      or CSS color.
- */
+ * A class to describe a color. Each `p5.Color` object stores the color mode
+ * and level maxes that were active during its construction. These values are
+ * used to interpret the arguments passed to the object's constructor. They
+ * also determine output formatting such as when
+ * <a href="#/p5/saturation">saturation()</a> is called.
+ *
+ * Color is stored internally as an array of ideal RGBA values in floating
+ * point form, normalized from 0 to 1. These values are used to calculate the
+ * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
+ * are sent to the renderer.
+ *
+ * When different color representations are calculated, the results are cached
+ * for performance. These values are normalized, floating-point numbers.
+ *
+ * <a href="#/p5/color">color()</a> is the recommended way to create an instance
+ * of this class.
+ *
+ * @class p5.Color
+ * @constructor
+ * @param {p5} [pInst]                  pointer to p5 instance.
+ *
+ * @param {Number[]|String} vals        an array containing the color values
+ *                                      for red, green, blue and alpha channel
+ *                                      or CSS color.
+ */
 ```
 
 
@@ -387,7 +387,7 @@ 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.
 
-- The main command to generate the reference from the reference comments in the source code is to run the following command. 
+- The main command to generate the reference from the reference comments in the source code is to run the following command.
 
 ```
 npm run docs
diff --git a/contributor_docs/creating_libraries.md b/contributor_docs/creating_libraries.md
index 0974213ae2..841d1e23c9 100644
--- a/contributor_docs/creating_libraries.md
+++ b/contributor_docs/creating_libraries.md
@@ -32,7 +32,7 @@ The main way to extend p5.js is by adding methods to the p5.prototype object. Fo
 
 ```js
 p5.prototype.loadCSV = function(){
-  console.log('I will load a CSV file soon!');
+  console.log('I will load a CSV file soon!');
 };
 ```
 
@@ -42,7 +42,7 @@ You can also extend p5.js classes such as` p5.Element` or` p5.Graphics` by addin
 
 ```js
 p5.Element.prototype.shout = function () {
-  this.elt.innerHTML += '<span>!</span>';
+  this.elt.innerHTML += '<span>!</span>';
 };
 ```
 
@@ -53,23 +53,23 @@ You now have a p5.loadcsv.js file with one method attached to the `p5.prototype`
 
 ```js
 function setup() {
-  createCanvas(400, 400);
-  loadCSV();
+  createCanvas(400, 400);
+  loadCSV();
 }
 ```
 
 ```html
 <html>
-  <head>
-    <!-- Other tags -->
+  <head>
+    <!-- Other tags -->
 
-    <script src="./p5.js"></script>
-    <script src="./p5.loadcsv.js"></script>
+    <script src="./p5.js"></script>
+    <script src="./p5.loadcsv.js"></script>
 
-    <!-- Other tags -->
-  </head>
-  
-  <!-- Other tags -->
+    <!-- Other tags -->
+  </head>
+
+  <!-- Other tags -->
 
 </html>
 ```
@@ -83,20 +83,20 @@ To load a CSV file with your `loadCSV()` function, the function needs to accept
 
 ```js
 p5.prototype.loadCSV = function (filename) {
-  console.log(`I will load the CSV file ${filename} soon!`);
+  console.log(`I will load the CSV file ${filename} soon!`);
 };
 ```
 
- 
+
 
 In our test sketch, we can use it like so:
 
 ```js
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(400, 400);
 
-  // Prints "I will load the CSV file data.csv soon!" to the console.
-  loadCSV('data.csv');
+  // Prints "I will load the CSV file data.csv soon!" to the console.
+  loadCSV('data.csv');
 }
 ```
 
@@ -111,17 +111,17 @@ You can access p5.js functions and variables such as `circle()` and `PI` in your
 
 ```js
 p5.prototype.loadCSV = (filename) => {
-  // this === window is true because
-  // "this" refers to the window object.
-  // This is almost never what you want.
-  console.log(this === window);
+  // this === window is true because
+  // "this" refers to the window object.
+  // This is almost never what you want.
+  console.log(this === window);
 };
 
 
 p5.prototype.loadCSV = function (filename) {
-  // Prints 'I will load the CSV file data.csv at 10:30'
-  // to the console.
-  console.log(`I will load the CSV file ${filename} at ${this.hour()}:${this.minute()}!`);
+  // Prints 'I will load the CSV file data.csv at 10:30'
+  // to the console.
+  console.log(`I will load the CSV file ${filename} at ${this.hour()}:${this.minute()}!`);
 };
 ```
 
@@ -136,19 +136,19 @@ First make the following changes to your `loadCSV()` method:
 
 ```js
 p5.prototype.loadCSV = function(filename){
-  console.log(`I will load the CSV file ${filename} at ${this.hour()}:${this.minute}!`);
+  console.log(`I will load the CSV file ${filename} at ${this.hour()}:${this.minute}!`);
 
-  let result = [];
+  let result = [];
 
-  fetch(filename)
-    .then((res) => res.text())
-    .then((data) => {
-      data.split('\n').forEach((line) => {
-        result.push(line.split(','));
-      });
-    });
+  fetch(filename)
+    .then((res) => res.text())
+    .then((data) => {
+      data.split('\n').forEach((line) => {
+        result.push(line.split(','));
+      });
+    });
 
-  return result;
+  return result;
 };
 ```
 
@@ -158,9 +158,9 @@ Now, when you run the sketch, pass a file path to a simple CSV file to your `loa
 
 ```js
 function setup(){
-  createCanvas(400, 400);
-  let myCSV = loadCSV('data.csv');
-  print(myCSV);
+  createCanvas(400, 400);
+  let myCSV = loadCSV('data.csv');
+  print(myCSV);
 }
 ```
 
@@ -172,12 +172,12 @@ Simply moving where you call `loadCSV()` to `preload()` in this case is not enou
 let myCSV;
 
 function preload(){
-  myCSV = loadCSV('data.csv');
+  myCSV = loadCSV('data.csv');
 }
 
 function setup(){
-  createCanvas(400, 400);
-  print(myCSV); // Still prints [] 
+  createCanvas(400, 400);
+  print(myCSV); // Still prints []
 }
 ```
 
@@ -185,21 +185,21 @@ p5 will need to be told that the addon’s `loadCSV()` function is something it
 
 ```js
 p5.prototype.loadCSV = function (filename){
-  console.log(`I will load the CSV file ${filename} at ${this.hour()}:${this.minute}!`);
+  console.log(`I will load the CSV file ${filename} at ${this.hour()}:${this.minute}!`);
 
-  let result = [];
+  let result = [];
 
-  fetch(filename)
-    .then((res) => res.text())
-    .then((data) => {
-      data.split('\n').forEach((line) => {
-        result.push(line.split(','));
-      });
+  fetch(filename)
+    .then((res) => res.text())
+    .then((data) => {
+      data.split('\n').forEach((line) => {
+        result.push(line.split(','));
+      });
 
-      this._decrementPreload();
-    });
+      this._decrementPreload();
+    });
 
-  return result;
+  return result;
 };
 
 p5.prototype.registerPreloadMethod('loadCSV', p5.prototype);
@@ -245,13 +245,13 @@ To create an action hook, you can use the snippet below.
 
 ```js
 p5.prototype.doRemoveStuff = function (){
-  // Addon library related cleanup
+  // Addon library related cleanup
 };
 p5.prototype.registerMethod("remove", p5.prototype.doRemoveStuff);
 
 p5.prototype.setDefaultBackground = function(){
-  // Set background to be p5 pink by default 
-  this.background("#ed225d");
+  // Set background to be p5 pink by default
+  this.background("#ed225d");
 };
 p5.prototype.registerMethod("pre", p5.prototype.setDefaultBackground);
 ```
diff --git a/contributor_docs/es/contributing_to_the_p5.js_reference.md b/contributor_docs/es/contributing_to_the_p5.js_reference.md
index 7180ddd000..e1dc00139c 100644
--- a/contributor_docs/es/contributing_to_the_p5.js_reference.md
+++ b/contributor_docs/es/contributing_to_the_p5.js_reference.md
@@ -10,57 +10,57 @@ Cuando mires el código fuente de p5.js, verás que muchas líneas en la bibliot
 
 ```
 /**
- * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
- * in creative coding. The values returned oscillate between -1 and 1 as the
- * input angle increases. `sin()` takes into account the current
- * <a href="#/p5/angleMode">angleMode</a>.
- *
- * @method sin
- * @param  {Number} angle the angle.
- * @return {Number} sine of the angle.
- *
- * @example
- * <div>
- * <code>
- * function draw() {
- *   background(200);
- *
- *   let t = frameCount;
- *   let x = 50;
- *   let y = 30 * sin(t * 0.05) + 50;
- *   line(x, 50, x, y);
- *   circle(x, y, 20);
- *
- *   describe('A white ball on a string oscillates up and down.');
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * function draw() {
- *   let x = frameCount;
- *   let y = 30 * sin(x * 0.1) + 50;
- *   point(x, y);
- *
- *   describe('A series of black dots form a wave pattern.');
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * function draw() {
- *   let t = frameCount;
- *   let x = 30 * cos(t * 0.1) + 50;
- *   let y = 10 * sin(t * 0.2) + 50;
- *   point(x, y);
- *
- *   describe('A series of black dots form an infinity symbol.');
- * }
- * </code>
- * </div>
- */
+ * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
+ * in creative coding. The values returned oscillate between -1 and 1 as the
+ * input angle increases. `sin()` takes into account the current
+ * <a href="#/p5/angleMode">angleMode</a>.
+ *
+ * @method sin
+ * @param  {Number} angle the angle.
+ * @return {Number} sine of the angle.
+ *
+ * @example
+ * <div>
+ * <code>
+ * function draw() {
+ *   background(200);
+ *
+ *   let t = frameCount;
+ *   let x = 50;
+ *   let y = 30 * sin(t * 0.05) + 50;
+ *   line(x, 50, x, y);
+ *   circle(x, y, 20);
+ *
+ *   describe('A white ball on a string oscillates up and down.');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * function draw() {
+ *   let x = frameCount;
+ *   let y = 30 * sin(x * 0.1) + 50;
+ *   point(x, y);
+ *
+ *   describe('A series of black dots form a wave pattern.');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * function draw() {
+ *   let t = frameCount;
+ *   let x = 30 * cos(t * 0.1) + 50;
+ *   let y = 10 * sin(t * 0.2) + 50;
+ *   point(x, y);
+ *
+ *   describe('A series of black dots form an infinity symbol.');
+ * }
+ * </code>
+ * </div>
+ */
 ```
 
 Por lo general, estos comentarios están seguidos del código JavaScript real que define a la función. Los comentarios de referencia siempre comienzan con `/**` y terminan con `*/`, con cada línea entre los dos con `*` al inicio.
@@ -73,18 +73,18 @@ Desglosemos el bloque de comentarios de referencia anterior para la función `si
 
 ```
 /**
- * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
- * in creative coding. The values returned oscillate between -1 and 1 as the
- * input angle increases. `sin()` takes into account the current
- * <a href="#/p5/angleMode">angleMode</a>.
+ * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
+ * in creative coding. The values returned oscillate between -1 and 1 as the
+ * input angle increases. `sin()` takes into account the current
+ * <a href="#/p5/angleMode">angleMode</a>.
 ```
 
 En la parte superior del comentario está la descripción textual de la función. Esta descripción puede contener tanto sintaxis de markdown como HTML. La descripción debe ser concisa y describir qué hace la función y, si es necesario, algunos detalles sobre sus peculiaridades o comportamientos.
 
 ```
  * @method sin
- * @param  {Number} angle  the angle.
- * @return {Number} sine of the angle.
+ * @param  {Number} angle  the angle.
+ * @return {Number} sine of the angle.
 ```
 
 Una función normalmente tendrá las tres secciones anteriores, cada una comenzando con el símbolo `@` seguido de una de las siguientes palabras clave:
@@ -140,18 +140,18 @@ Si una función tiene múltiples opciones de parámetros posibles, puedes especi
 
 ```
 /**
- * @method background
- * @param {String} colorstring color string, possible formats include: integer
- *                         rgb() or rgba(), percentage rgb() or rgba(),
- *                         3-digit hex, 6-digit hex
- * @param {Number} [a] alpha value
- */
+ * @method background
+ * @param {String} colorstring color string, possible formats include: integer
+ *                         rgb() or rgba(), percentage rgb() or rgba(),
+ *                         3-digit hex, 6-digit hex
+ * @param {Number} [a] alpha value
+ */
 
 /**
- * @method background
- * @param {Number} gray specifies a value between white and black
- * @param {Number} [a]
- */
+ * @method background
+ * @param {Number} gray specifies a value between white and black
+ * @param {Number} [a]
+ */
 ```
 
 ### Información adicional: Múltiples firmas
@@ -164,27 +164,27 @@ Hasta ahora hemos visto cómo escribir referencias para funciones y constantes.
 
 ```
 /**
- * The system variable mouseX always contains the current horizontal
- * position of the mouse, relative to (0, 0) of the canvas. The value at
- * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
- * If touch is used instead of mouse input, mouseX will hold the x value
- * of the most recent touch point.
- *
- * @property {Number} mouseX
- * @readOnly
- *
- * @example
- * <div>
- * <code>
- * // Move the mouse across the canvas
- * function draw() {
- *   background(244, 248, 252);
- *   line(mouseX, 0, mouseX, 100);
- *   describe('horizontal black line moves left and right with mouse x-position');
- * }
- * </code>
- * </div>
- */
+ * The system variable mouseX always contains the current horizontal
+ * position of the mouse, relative to (0, 0) of the canvas. The value at
+ * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
+ * If touch is used instead of mouse input, mouseX will hold the x value
+ * of the most recent touch point.
+ *
+ * @property {Number} mouseX
+ * @readOnly
+ *
+ * @example
+ * <div>
+ * <code>
+ * // Move the mouse across the canvas
+ * function draw() {
+ *   background(244, 248, 252);
+ *   line(mouseX, 0, mouseX, 100);
+ *   describe('horizontal black line moves left and right with mouse x-position');
+ * }
+ * </code>
+ * </div>
+ */
 ```
 
 El inicio del bloque contiene la descripción de la variable (`mouseX` en este caso). Para definir el nombre de la variable usamos `@property` en lugar de `@method`. `@property` sigue la misma sintaxis que `@param` para definir el tipo y su nombre. La etiqueta `@readonly` está presente en la mayoría de las variables de p5.js y se utiliza internamente para indicar que dicho valor no debe ser sobrescrito directamente por un usuario de la biblioteca.
@@ -199,20 +199,20 @@ El código con la etiqueta `@example` que crea el ejemplo anterior es el siguien
 
 ```
  * @example
- * <div>
- * <code>
- * const c = color(255, 204, 0);
- * fill(c);
- * rect(15, 20, 35, 60);
- * // Sets 'redValue' to 255.
- * const redValue = red(c);
- * fill(redValue, 0, 0);
- * rect(50, 20, 35, 60);
- * describe(
- *   'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
- * );
- * </code>
- * </div>
+ * <div>
+ * <code>
+ * const c = color(255, 204, 0);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'redValue' to 255.
+ * const redValue = red(c);
+ * fill(redValue, 0, 0);
+ * rect(50, 20, 35, 60);
+ * describe(
+ *   'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
+ * );
+ * </code>
+ * </div>
 ```
 
 Después de la etiqueta `@example`, debes comenzar con una etiqueta HTML `<div>` seguida de una etiqueta `<code>`. Entre la etiqueta `<code>` de apertura y cierre, insertarás el ejemplo de código en cuestión. El principio básico para escribir un buen ejemplo de código para la referencia es mantener las cosas simples y mínimas. El ejemplo debe ser significativo y explicar cómo funciona la función, valga la redundancia, sin ser demasiado complicado. El lienzo para el ejemplo debe ser de 100x100 pixeles y si la función `setup()` no está incluida, como en el ejemplo anterior, el código será envuelto automáticamente en una función `setup()` con un lienzo predeterminado de fondo gris y 100x100 píxeles. No entraremos aquí en detalles sobre buenas prácticas y estilo para los ejemplos de código; consulta la guía de estilo de referencia en su lugar.
@@ -254,8 +254,8 @@ Si no quieres que el ejemplo se ejecute como parte de las pruebas automatizadas
 * @example
 * <div class='norender notest'><code>
 * function setup() {
-*   let c = createCanvas(100, 100);
-*   saveCanvas(c, 'myCanvas', 'jpg');
+*   let c = createCanvas(100, 100);
+*   saveCanvas(c, 'myCanvas', 'jpg');
 * }
 * </code></div>
 ```
@@ -272,11 +272,11 @@ Por último, para cada ejemplo que añadas, se requiere que utilices la función
 * <code>
 * let xoff = 0.0;
 * function draw() {
-*   background(204);
-*   xoff = xoff + 0.01;
-*   let n = noise(xoff) * width;
-*   line(n, 0, n, height);
-*   describe('A vertical line moves randomly from left to right.');
+*   background(204);
+*   xoff = xoff + 0.01;
+*   let n = noise(xoff) * width;
+*   line(n, 0, n, height);
+*   describe('A vertical line moves randomly from left to right.');
 * }
 * </code>
 * </div>
@@ -285,13 +285,13 @@ Por último, para cada ejemplo que añadas, se requiere que utilices la función
 * <code>
 * let noiseScale = 0.02;
 * function draw() {
-*   background(0);
-*   for (let x = 0; x < width; x += 1) {
-*     let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
-*     stroke(noiseVal*255);
-*     line(x, mouseY + noiseVal * 80, x, height);
-*   }
-*   describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
+*   background(0);
+*   for (let x = 0; x < width; x += 1) {
+*     let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
+*     stroke(noiseVal*255);
+*     line(x, mouseY + noiseVal * 80, x, height);
+*   }
+*   describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
 * }
 * </code>
 * </div>
@@ -308,11 +308,11 @@ Puedes usar la etiqueta `@private` si una propiedad o variable es una función o
 
 ```
 /**
- * _start calls preload() setup() and draw()
- *
- * @method _start
- * @private
- */
+ * _start calls preload() setup() and draw()
+ *
+ * @method _start
+ * @private
+ */
 p5.prototype._start = function () {
 ```
 
@@ -326,12 +326,12 @@ La etiqueta `@requires` define los módulos de los que depende el módulo actual
 
 ```
 /**
- * @module Color
- * @submodule Creating & Reading
- * @for p5
- * @requires core
- * @requires constants
- */
+ * @module Color
+ * @submodule Creating & Reading
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
 ```
 
 La convención que sigue p5.js es que cada subcarpeta en la carpeta `src/` será un `@module`, mientras que cada archivo dentro de la subcarpeta será su propio `@submodule` bajo el `@module` general de la subcarpeta. A menos que estés añadiendo nuevas subcarpetas/archivos al código fuente de p5.js, no deberías necesitar editar este bloque de comentarios de referencia.
@@ -342,31 +342,31 @@ Los constructores de clases se definen con la etiqueta `@class`y la etiqueta `@c
  
 ```
 /**
- * A class to describe a color. Each `p5.Color` object stores the color mode
- * and level maxes that were active during its construction. These values are
- * used to interpret the arguments passed to the object's constructor. They
- * also determine output formatting such as when
- * <a href="#/p5/saturation">saturation()</a> is called.
- *
- * Color is stored internally as an array of ideal RGBA values in floating
- * point form, normalized from 0 to 1. These values are used to calculate the
- * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
- * are sent to the renderer.
- *
- * When different color representations are calculated, the results are cached
- * for performance. These values are normalized, floating-point numbers.
- *
- * <a href="#/p5/color">color()</a> is the recommended way to create an instance
- * of this class.
- *
- * @class p5.Color
- * @constructor
- * @param {p5} [pInst]                  pointer to p5 instance.
- *
- * @param {Number[]|String} vals        an array containing the color values
- *                                      for red, green, blue and alpha channel
- *                                      or CSS color.
- */
+ * A class to describe a color. Each `p5.Color` object stores the color mode
+ * and level maxes that were active during its construction. These values are
+ * used to interpret the arguments passed to the object's constructor. They
+ * also determine output formatting such as when
+ * <a href="#/p5/saturation">saturation()</a> is called.
+ *
+ * Color is stored internally as an array of ideal RGBA values in floating
+ * point form, normalized from 0 to 1. These values are used to calculate the
+ * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
+ * are sent to the renderer.
+ *
+ * When different color representations are calculated, the results are cached
+ * for performance. These values are normalized, floating-point numbers.
+ *
+ * <a href="#/p5/color">color()</a> is the recommended way to create an instance
+ * of this class.
+ *
+ * @class p5.Color
+ * @constructor
+ * @param {p5} [pInst]                  pointer to p5 instance.
+ *
+ * @param {Number[]|String} vals        an array containing the color values
+ *                                      for red, green, blue and alpha channel
+ *                                      or CSS color.
+ */
 ```
 
 ## Generando y previsualizando la referencia
diff --git a/contributor_docs/es/webgl_contribution_guide.md b/contributor_docs/es/webgl_contribution_guide.md
index 38aa091a00..8903def6b9 100644
--- a/contributor_docs/es/webgl_contribution_guide.md
+++ b/contributor_docs/es/webgl_contribution_guide.md
@@ -149,7 +149,7 @@ function draw() {
   if (avgFrameRates.length > numSamples) {
     frameRateSum -= avgFrameRates.shift();
   }
- 
+
   frameRateP.html(round(frameRateSum) + ' avg fps');
 }
 ```
diff --git a/contributor_docs/fes_contribution_guide.md b/contributor_docs/fes_contribution_guide.md
index ff8af6a32d..f02733aee9 100644
--- a/contributor_docs/fes_contribution_guide.md
+++ b/contributor_docs/fes_contribution_guide.md
@@ -43,20 +43,20 @@ Individual files contain the following main FES functions:
 #### Syntax
 
 ```js
-_report(message)
+_report(message);
 
-_report(message, func)
+_report(message, func);
 
-_report(message, func, color)
+_report(message, func, color);
 ```
 
 
 #### Parameters
 
 ```
-@param  {String}        message   Message to be printed
-@param  {String}        [func]    Name of function
-@param  {Number|String} [color]   CSS color code
+@param  {String}        message   Message to be printed
+@param  {String}        [func]    Name of function
+@param  {Number|String} [color]   CSS color code
 ```
 
 The `[func]` input is used to append a reference link to the end of the error message.
@@ -88,22 +88,22 @@ The call sequence to `_friendlyFileLoadError` looks something like this:
 
 ```
 _friendlyFileLoadError
-  _report
+  _report
 ```
 
 
 #### Syntax
 
 ```js
-_friendlyFileLoadError(errorType, filePath)
+_friendlyFileLoadError(errorType, filePath);
 ```
 
 
 #### Parameters
 
 ```
-@param  {Number}  errorType   Number of file load error type
-@param  {String}  filePath    Path to file caused the error
+@param  {Number}  errorType   Number of file load error type
+@param  {String}  filePath    Path to file caused the error
 ```
 
 The `errorType` input refers to the specific type of file load error as enumerated in `core/friendly_errors/file_errors.js`. File load errors in p5.js are categorized into various distinct cases. This categorization is designed to facilitate the delivery of precise and informative error messages corresponding to different error scenarios. For example, when it can't read the data in a font file, it can show a different error than it would when it tries to load a file that is too large to read.
@@ -117,15 +117,15 @@ File Loading Error Example:
 /// missing font file
 let myFont;
 function preload() {
-  myFont = loadFont('assets/OpenSans-Regular.ttf');
-};
+  myFont = loadFont('assets/OpenSans-Regular.ttf');
+}
 function setup() {
-  fill('#ED225D');
-  textFont(myFont);
-  textSize(36);
-  text('p5*js', 10, 50);
-};
-function draw() {};
+  fill('#ED225D');
+  textFont(myFont);
+  textSize(36);
+  text('p5*js', 10, 50);
+}
+function draw() {}
 ```
 
 FES will generate the following message in the console in addition to browser’s “unsupported” error:
@@ -133,7 +133,7 @@ FES will generate the following message in the console in addition to browser’
 ```
 🌸 p5.js says: It looks like there was a problem loading your font. Try checking if the file path (assets/OpenSans-Regular.ttf) is correct, hosting the file online, or running a local server.
 
-+ More info: https://github.com/processing/p5.js/wiki/Local-server 
++ More info: https://github.com/processing/p5.js/wiki/Local-server
 ```
 
 
@@ -203,32 +203,32 @@ The call sequence from `_validateParameters` looks something like this:
 
 ```
 validateParameters
-   buildArgTypeCache
-      addType
-    lookupParamDoc
-    scoreOverload
-      testParamTypes
-      testParamType
-    getOverloadErrors
-    _friendlyParamError
-      ValidationError
-      report
-        friendlyWelcome
+   buildArgTypeCache
+      addType
+    lookupParamDoc
+    scoreOverload
+      testParamTypes
+      testParamType
+    getOverloadErrors
+    _friendlyParamError
+      ValidationError
+      report
+        friendlyWelcome
 ```
 
 
 #### Syntax
 
 ```js
-_validateParameters(func, args)
+_validateParameters(func, args);
 ```
 
 
 #### Parameters
 
 ```
-@param  {String}  func    Name of the function being called
-@param  {Array}   args    User input arguments
+@param  {String}  func    Name of the function being called
+@param  {Array}   args    User input arguments
 ```
 
 
@@ -243,7 +243,7 @@ arc(1, 1, 10.5, 10);
 FES will generate the following message in the console:
 
 ```
-🌸 p5.js says: [sketch.js, line 13] arc() was expecting at least 6 arguments, but received only 4. (http://p5js.org/reference/#/p5/arc) 
+🌸 p5.js says: [sketch.js, line 13] arc() was expecting at least 6 arguments, but received only 4. (http://p5js.org/reference/#/p5/arc)
 ```
 
 Example of a type mismatch
@@ -255,7 +255,7 @@ arc(1, ',1', 10.5, 10, 0, Math.PI);
 FES will generate the following message in the console:
 
 ```
-🌸 p5.js says: [sketch.js, line 14] arc() was expecting Number for the first parameter, received string instead. (http://p5js.org/reference/#/p5/arc) 
+🌸 p5.js says: [sketch.js, line 14] arc() was expecting Number for the first parameter, received string instead. (http://p5js.org/reference/#/p5/arc)
 ```
 
 
@@ -268,7 +268,7 @@ core/friendly\_errors/validate\_params.js
 
 #### Description
 
-`fesErrorMonitor()` monitors browser error messages to guess the source of the error and provide additional guidance to the users. This includes the stack trace,  which is a sequential list of the functions called in a program leading up to the point of the thrown error. Stack traces are useful for determining if an error is internal or caused by something the user called directly.
+`fesErrorMonitor()` monitors browser error messages to guess the source of the error and provide additional guidance to the users. This includes the stack trace,  which is a sequential list of the functions called in a program leading up to the point of the thrown error. Stack traces are useful for determining if an error is internal or caused by something the user called directly.
 
 It calls `translator()` to generate and print a Friendly Error message using key `fes.globalErrors.*`. You can see all the available keys at `translations/en/translation.json`.
 
@@ -291,31 +291,31 @@ The call sequence for `_fesErrorMonitor` roughly looks something like this:
 
 ```
  _fesErrorMonitor
-     processStack
-       printFriendlyError
-     (if type of error is ReferenceError)
-       _handleMisspelling
-         computeEditDistance
-         _report
-       _report
-       printFriendlyStack
-     (if type of error is SyntaxError, TypeError, etc)
-       _report
-       printFriendlyStack
+     processStack
+       printFriendlyError
+     (if type of error is ReferenceError)
+       _handleMisspelling
+         computeEditDistance
+         _report
+       _report
+       printFriendlyStack
+     (if type of error is SyntaxError, TypeError, etc)
+       _report
+       printFriendlyStack
 ```
 
 
 #### Syntax
 
 ```js
-fesErrorMonitor(event)
+fesErrorMonitor(event);
 ```
 
 
 #### Parameters
 
 ```
-@param {*}  e     Error event
+@param {*}  e     Error event
 ```
 
 
@@ -325,66 +325,66 @@ Internal Error Example 1:
 
 ```js
 function preload() {
-  // error in background() due to it being called in
-  // preload
-  background(200);
+  // error in background() due to it being called in
+  // preload
+  background(200);
 }
 ```
 
 FES will generate the following message in the console:
 
 ```
-🌸 p5.js says: [sketch.js, line 8] An error with message "Cannot read properties of undefined (reading 'background')" occurred inside the p5js library when "background" was called. If not stated otherwise, it might be due to "background" being called from preload. Nothing besides load calls (loadImage, loadJSON, loadFont, loadStrings, etc.) should be inside the preload function. (http://p5js.org/reference/#/p5/preload) 
+🌸 p5.js says: [sketch.js, line 8] An error with message "Cannot read properties of undefined (reading 'background')" occurred inside the p5js library when "background" was called. If not stated otherwise, it might be due to "background" being called from preload. Nothing besides load calls (loadImage, loadJSON, loadFont, loadStrings, etc.) should be inside the preload function. (http://p5js.org/reference/#/p5/preload)
 ```
 
 Internal Error Example 2:
 
 ```js
 function setup() {
-  cnv = createCanvas(200, 200);
-  cnv.mouseClicked();
+  cnv = createCanvas(200, 200);
+  cnv.mouseClicked();
 }
 ```
 
 FES will generate the following message in the console:
 
 ```js
-🌸 p5.js says: [sketch.js, line 12] An error with message "Cannot read properties of undefined (reading 'bind')" occurred inside the p5js library when mouseClicked was called. If not stated otherwise, it might be an issue with the arguments passed to mouseClicked. (http://p5js.org/reference/#/p5/mouseClicked) 
+🌸 p5.js says: [sketch.js, line 12] An error with message "Cannot read properties of undefined (reading 'bind')" occurred inside the p5js library when mouseClicked was called. If not stated otherwise, it might be an issue with the arguments passed to mouseClicked. (http://p5js.org/reference/#/p5/mouseClicked)
 ```
 
 Example of an Error (Scope):
 
 ```js
 function setup() {
-  let b = 1;
+  let b = 1;
 }
 function draw() {
-  b += 1;
+  b += 1;
 }
 ```
 
 FES will generate the following message in the console:
 
 ```
-🌸 p5.js says: 
+🌸 p5.js says:
 
 [sketch.js, line 5] "b" is not defined in the current scope. If you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive).
 
-+ More info: https://p5js.org/examples/data-variable-scope.html 
++ More info: https://p5js.org/examples/data-variable-scope.html
 ```
 
 Example of an Error (Spelling):
 
 ```js
 function setup() {
-  xolor(1, 2, 3);
+  xolor(1, 2, 3);
 }
 ```
 
 FES will generate the following message in the console:
 
 ```
-🌸 p5.js says: [sketch.js, line 2] It seems that you may have accidentally written "xolor" instead of "color". Please correct it to color if you wish to use the function from p5.js. (http://p5js.org/reference/#/p5/color) 
+🌸 p5.js says: [sketch.js, line 2] It seems that you may have accidentally written "xolor" instead of "color". Please correct it to color if you wish to use the function from p5.js. (http://p5js.org/reference/#/p5/color)
 ```
 
 
@@ -405,31 +405,31 @@ It calls `translator()` to generate and print a Friendly Error message using key
 #### Syntax
 
 ```js
-checkForUserDefinedFunctions(context)
+checkForUserDefinedFunctions(context);
 ```
 
 
 #### Parameters
 
 ```
-@param {*} context  Current default context.
-                    Set to window in "global mode" and
-                    to a p5 instance in "instance mode"
+@param {*} context  Current default context.
+                    Set to window in "global mode" and
+                    to a p5 instance in "instance mode"
 ```
 
 
 #### Examples
 
 ```js
-function preLoad() {
-  loadImage('myimage.png');
+function preload() {
+  loadImage('myimage.png');
 }
 ```
 
 FES will generate the following message in the console:
 
 ```
-🌸 p5.js says: It seems that you may have accidentally written preLoad instead of preload. Please correct it if it's not intentional. (http://p5js.org/reference/#/p5/preload) 
+🌸 p5.js says: It seems that you may have accidentally written preLoad instead of preload. Please correct it if it's not intentional. (http://p5js.org/reference/#/p5/preload)
 ```
 
 
@@ -450,8 +450,8 @@ It calls `translator()` to generate and print a Friendly Error message using the
 #### Parameters
 
 ```
-@param {*}        err    Error event
-@param {Boolean}  log    false
+@param {*}        err    Error event
+@param {Boolean}  log    false
 ```
 
 
@@ -489,10 +489,10 @@ You can disable the FES with one line of code at the top of your sketch:
 ```js
 p5.disableFriendlyErrors = true; // disables FES
 function setup() {
-  // Do setup stuff
+  // Do setup stuff
 }
 function draw() {
-  // Do drawing stuff
+  // Do drawing stuff
 }
 ```
 
@@ -511,7 +511,7 @@ Please note that this action will disable certain features of the FES that are k
 
 ## Conclusion
 
-In the README document, we have outlined the structure of the `core/friendly_errors` folder. This section explains the organization and purpose of this folder, making it easier to navigate and understand. Additionally, for each function within this folder, we have provided a reference guide. 
+In the README document, we have outlined the structure of the `core/friendly_errors` folder. This section explains the organization and purpose of this folder, making it easier to navigate and understand. Additionally, for each function within this folder, we have provided a reference guide.
 
 In the latter part of this documentation, we have included notes from previous contributors that discuss the current limitations of FES and potential areas for improvement in future development.
 
diff --git a/contributor_docs/hi/benchmarking_p5.md b/contributor_docs/hi/archive/benchmarking_p5.md
similarity index 100%
rename from contributor_docs/hi/benchmarking_p5.md
rename to contributor_docs/hi/archive/benchmarking_p5.md
diff --git a/contributor_docs/hi/design_principles.md b/contributor_docs/hi/archive/design_principles.md
similarity index 100%
rename from contributor_docs/hi/design_principles.md
rename to contributor_docs/hi/archive/design_principles.md
diff --git a/contributor_docs/hi/es6-adoption.md b/contributor_docs/hi/archive/es6-adoption.md
similarity index 100%
rename from contributor_docs/hi/es6-adoption.md
rename to contributor_docs/hi/archive/es6-adoption.md
diff --git a/contributor_docs/hi/issue_labels.md b/contributor_docs/hi/archive/issue_labels.md
similarity index 100%
rename from contributor_docs/hi/issue_labels.md
rename to contributor_docs/hi/archive/issue_labels.md
diff --git a/contributor_docs/hi/roadmap.md b/contributor_docs/hi/archive/roadmap.md
similarity index 100%
rename from contributor_docs/hi/roadmap.md
rename to contributor_docs/hi/archive/roadmap.md
diff --git a/contributor_docs/hi/discussions.md b/contributor_docs/hi/discussions.md
deleted file mode 100644
index 2baaed8a4e..0000000000
--- a/contributor_docs/hi/discussions.md
+++ /dev/null
@@ -1,3 +0,0 @@
-p5 कैसे विकसित होता है, इस बारे में चर्चा में शामिल होना योगदान देने का एक शानदार तरीका है। यह कई तरीकों से किया जा सकता है, लेकिन शुरू करने के लिए एक बढ़िया जगह मौजूदा गिटहब [जिन मुद्दों को 'चर्चा' करार दिया गया है](https://github.com/processing/p5.js/labels/discubion) की जाँच करके और अपनी आवाज जोड़ें।
-
-इस चर्चा के आधार पर इस उपधारा में दस्तावेज विकसित किए जाते हैं। यह वह जगह है जहां हम लाइब्रेरी के लिए वर्तमान और भविष्य के डिजाइन के बारे में विचारों को संकलित करते हैं।
\ No newline at end of file
diff --git a/contributor_docs/hi/organization.md b/contributor_docs/hi/organization.md
deleted file mode 100644
index ea51f614d0..0000000000
--- a/contributor_docs/hi/organization.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# योगदान का आयोजन
-
-रिपॉजिटरी को व्यवस्थित रखना यह सुनिश्चित करता है कि यह हमेशा स्पष्ट हो कि कौन से विचार-विमर्श और कार्य सबसे महत्वपूर्ण हैं। यह अनुरक्षक से नए योगदानकर्ताओं तक सभी को अभिभूत किए बिना भंडार को नेविगेट करने में मदद करता है। इसके साथ मदद करने के लिए, हमारे पास मुद्दों को व्यवस्थित करने, काम करने और अनुरोधों को खींचने के लिए दिशानिर्देशों का एक सेट है।
-
-संगठन के साथ योगदान करने के लिए एक शानदार तरीका हो सकता है। यदि त्रुटि विवरण में उदाहरण कोड और ऐसी अन्य जानकारी गुम है, तो बेझिझक लापता जानकारी मांगें।। यदि किसी कार्यपालक के पास कोई समस्या 60 दिनों के लिए नहीं देखी गई है, तो यह देखने के लिए कि क्या वे अभी भी मुद्दे पर काम करना चाहते हैं, इस मुद्दे पर टिप्पणी करने के लिए कार्यभार के साथ जाँच करने में मददगार हो सकते हैं। जब भी आप संगठनात्मक कार्यों में मदद कर रहे हों, सुनिश्चित करें कि आप दयालु हों और हमेशा समुदाय के दिशानिर्देशों को ध्यान में रखें।
-
-# संगठन के लिए दिशा निर्देश
-
-## मुद्दे
-- **सभी त्रुटि विवरण में नमूना कोड शामिल होना चाहिए**
-  - यह मुद्दे के विवरण में पोस्ट किए गए कोड के रूप में हो सकता है, या यह [ऑनलाइन संपादक](https://editor.p5js.org) में अधिमानतः कोड के ऑनलाइन उदाहरण का लिंक हो सकता है 
-- **सभी मुद्दों में कम से कम 2 लेबल होने चाहिए**
-  - इससे मुद्दों को नेविगेट करने में काफी आसानी होती है।
-  - क्षेत्र (webgl, core, image, आदि) के लिए एक लेबल जोड़ने का प्रयास करें।
-- **यह कार्य पहले आओ, पहले पाओ है**
-  - यदि त्रुटि को पुन: पेश किया गया है, या समुदाय द्वारा एक सुविधा अनुरोध / वृद्धि पर सहमति हुई है, तो यह असाइनमेंट के लिए उपलब्ध है। जब ऐसा होता है कि योगदानकर्ता कहता है "मैं इस मुद्दे पर काम करना चाहूंगा", तो असाइनमेंट का अनुरोध करने वाले पहले योगदानकर्ता को असाइन किया जाएगा।
-  - अगर यह अस्पष्ट है कि त्रुटि प्रतिलिपि प्रस्तुत करने योग्य है या सुविधा अनुरोध / वृद्धि पर सहमति व्यक्त की गई है, तो किसी मुद्दे को सौंपा जाने का अनुरोध न करें।
-
-## पुल अनुरोध
-- **सभी पुल अनुरोधों को एक मुद्दे के साथ जोड़ा जाना चाहिए**
-  - यदि आप त्रुटि को ठीक करना चाहते हैं या एक सुविधा जोड़ना चाहते हैं, तो एक मुद्दे को खोलकर शुरू करें ताकि समुदाय उस पर चर्चा कर सके।
-  - यदि किसी संबंधित मुद्दे के बिना एक पुल अनुरोध खोला जाता है, तो टिप्पणी करें और योगदानकर्ता को मुद्दा खोलने के लिए कहें।
-
-
-
-# निर्णय लेने के लिए दिशानिर्देश
-
-p5 अपनी निर्णय लेने की प्रक्रिया को यथासंभव पारदर्शी और क्षैतिज बनाने की इच्छा रखता है। ऐसा करने के लिए, p5 निर्णय लेने के लिए एक अनौपचारिक सहमति-मांग मॉडल का उपयोग करता है। इसका मतलब यह है कि हम किसी भी और सभी निर्णयों पर सामुदायिक सहमति तक पहुंचना पसंद करते हैं। अगर यह विफल होता है, तो इसके बजाय एक वोट होगा।
-
-**प्रबंधक** में प्रस्तावों को वीटो करने की क्षमता है। यह तब हो सकता है जब कोई प्रस्ताव मिशन / सामुदायिक दिशानिर्देशों के साथ संरेखित नहीं होता है, या जब कोई प्रस्ताव एक महत्वपूर्ण रखरखाव या कार्यान्वयन चुनौती प्रस्तुत करता है कि परियोजना उस समय से निपटने में सक्षम नहीं है।
-
-एक बदलाव का प्रस्ताव करने के लिए, एक मुद्दा खोलें। यदि यह एक बड़ा परिवर्तन या परिवर्तन है जो महत्वपूर्ण डिजाइन विचार की आवश्यकता है, तो मुद्दे पर 'चर्चा' लेबल जोड़ें। इच्छुक समुदाय के सदस्य अपने विचारों के साथ झंकार करेंगे। एक महत्वपूर्ण अवधि बीत जाने के बाद (30 दिन जब तक जरूरी नहीं), रखवाले यह समझने की कोशिश करेंगे कि क्या कोई महत्वपूर्ण हित है और क्या सर्वोत्तम दृष्टिकोण के बारे में आम सहमति बन गई है। इस बिंदु पर, अनुरक्षक या तो वोट का अनुरोध करेगा, समस्या को बंद करेगा, या पुल अनुरोधों के लिए समस्या को खोल देगा। चर्चा संपन्न होने से पहले प्रस्तुत अनुरोधों को नजरअंदाज कर दिया जाएगा।
-
-> भविष्य में यह उपरोक्त संगठन और निर्णय लेने की प्रक्रियाओं को स्वचालित करने के लिए बहुत अच्छा होगा।
-
-> अगर आपको बॉट या गीथब एक्शन के साथ उपरोक्त में से किसी को भी स्वचालित करने का विचार है तो अपने प्रस्ताव के साथ समस्या को खोलने के लिए स्वतंत्र महसूस करें!
-
-
-
-# प्रबंधक
-
-प्रबंधक ऐसे योगदानकर्ता होते हैं जो विशेष रूप से परियोजना के कुछ क्षेत्रों से परिचित, परिचित या उत्तरदायी होते हैं। उनकी भूमिका p5.js. पर काम करने वाले अन्य लोगों को संदर्भ और मार्गदर्शन प्रदान करने में मदद करना है। यदि आपके पास किसी विशेष क्षेत्र में योगदान करने के बारे में कोई सवाल है, तो आप सूचीबद्ध प्रबंधक को किसी समस्या या टैग अनुरोध में टैग कर सकते हैं। वे समुदाय अनुरोधों पर भी वजन कर सकते हैं और समुदाय के इनपुट के साथ अपने क्षेत्र की समग्र दिशा का मार्गदर्शन कर सकते हैं।
-
-कोई भी इच्छुक स्वयंसेवक एक प्रबंधक हो सकता है! विशेषज्ञता के लिए कोई विशिष्ट आवश्यकताएं नहीं हैं, बस सक्रिय रूप से सीखने और भाग लेने में रुचि है। यदि आप इस परियोजना के एक या अधिक हिस्सों से परिचित हैं, तो एक समस्या को स्वयंसेवक के रूप में खोलें!
-
-एक बार जोड़े जाने के बाद, एक प्रबंधक का उपयोगकर्ता नाम [रीडमी के स्टीवर्ड सेक्शन](https://github.com/processing/p5.js#stewards) में रहेगा, जब तक कि उन्हें हटाने का अनुरोध नहीं किया जाता। यदि एक प्रबंधक एक विस्तारित अवधि के लिए अनुत्तरदायी है, तो हम उनसे उनकी स्थिति के बारे में पूछ सकते हैं। और आप हमेशा एक प्रबंधक के रूप में विराम ले सकते हैं और वापस आ सकते हैं!
\ No newline at end of file
diff --git a/contributor_docs/hi/preparing_a_pull_request.md b/contributor_docs/hi/preparing_a_pull_request.md
deleted file mode 100644
index 6ce9587380..0000000000
--- a/contributor_docs/hi/preparing_a_pull_request.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# एक पुल अनुरोध तैयार करना
-
-जब आपका कोड अद्यतन हो तो पुल अनुरोध में आसानी होती है! आप अपने कोड को अन्य योगदानकर्ताओं से परिवर्तनों को शामिल करने के लिए अद्यतन करने के लिए git rebase का उपयोग कर सकते हैं। ऐसे -
-
-## सहेजें और अपडेट करें
-
-### आपके पास जो कुछ है उसे बचाओ!
-    git status 
-    git add -u
-    git commit
-
-### परिवर्तनों के बारे में जानें
-सुनिश्चित करें कि आप अपस्ट्रीम p5.js रिपॉजिटरी को ट्रैक कर रहे हैं।
-
-    $ git remote show upstream
-
-यदि आपको कोई त्रुटि दिखाई देती है, तो आपको "upstream" रिमोट रिपॉजिटरी के रूप में मुख्य p5.js रेपो को ट्रैक करना शुरू करना होगा। आपको केवल एक बार ऐसा करने की आवश्यकता होगी! लेकिन, अगर आप इसे दूसरी बार चलाते हैं तो कोई नुकसान नहीं होता है।
-
-    $ git remote add upstream https://github.com/processing/p5.js
-
-फिर नवीनतम परिवर्तनों के बारे में पूछें।
-
-    $ git fetch upstream 
-
-### शायद ज़रुरत पड़े- एक नई शाखा में अपने परिवर्तनों की एक प्रति बनाएँ
-    $ git branch your-branch-name-backup 
-
-### मुख्य शाखा से परिवर्तन लागू करता है, *बाद में* अपने परिवर्तन जोड़ता है
-    $ git rebase upstream/main 
-
-### विवादों का समाधान
-आपकी शाखा में कुछ उलझनें हो सकती हैं!
-यदि यह केवल lib / p5.js और lib / p5.min.js है, तो इसे ठीक करना आसान है। बस परियोजना को फिर से ग्रंट के साथ बनाएं।
-
-    grunt 
-    git add -u
-    git rebase --continue
-
-यदि आपके पास अन्य फ़ाइलों में विरोध है और आप सुनिश्चित नहीं हैं कि उन्हें कैसे हल किया जाए ... मदद के लिए पूछें!
-
-### और अंत में, महान गौरव के लिए
-    $ git push origin
-
-यदि आप तकनीकी विवरणों के बारे में गहन जानकारी प्राप्त कर रहे हैं, तो रेबेसिंग पर एक अच्छा संदर्भ है। https://www.atlassian.com/git/tutorials/merging-vs-rebasing
-
-## पुल अनुरोध बनाना
-
-यहाँ [गिटहब पर पुल अनुरोध बनाने के निर्देश](https://help.github.com/articles/creating-a-pull-request/) दिए गए हैं। आप जिस भी शाखा में काम कर रहे हैं, उसका नाम बता सकते हैं। आप p5.js. की "मुख्य" शाखा के खिलाफ अपना पुल अनुरोध प्रस्तुत करेंगे
-
-एक बार जब आप अपना पुल अनुरोध प्रस्तुत कर देते हैं, तो इसकी समीक्षा की जाएगी और जैसे ही कोई अन्य ऐसा करने के लिए उपलब्ध होगा, और इसे विलय कर दिया जाएगा। परिवर्तन p5.js लाइब्रेरी की अगली रिलीज़ के साथ दिखाई देंगे।
\ No newline at end of file
diff --git a/contributor_docs/ko/benchmarking_p5.md b/contributor_docs/ko/archive/benchmarking_p5.md
similarity index 100%
rename from contributor_docs/ko/benchmarking_p5.md
rename to contributor_docs/ko/archive/benchmarking_p5.md
diff --git a/contributor_docs/ko/custom_p5_build.md b/contributor_docs/ko/archive/custom_p5_build.md
similarity index 100%
rename from contributor_docs/ko/custom_p5_build.md
rename to contributor_docs/ko/archive/custom_p5_build.md
diff --git a/contributor_docs/ko/es6-adoption.md b/contributor_docs/ko/archive/es6-adoption.md
similarity index 100%
rename from contributor_docs/ko/es6-adoption.md
rename to contributor_docs/ko/archive/es6-adoption.md
diff --git a/contributor_docs/ko/internationalization.md b/contributor_docs/ko/archive/internationalization.md
similarity index 100%
rename from contributor_docs/ko/internationalization.md
rename to contributor_docs/ko/archive/internationalization.md
diff --git a/contributor_docs/ko/issue_labels.md b/contributor_docs/ko/archive/issue_labels.md
similarity index 100%
rename from contributor_docs/ko/issue_labels.md
rename to contributor_docs/ko/archive/issue_labels.md
diff --git a/contributor_docs/ko/roadmap.md b/contributor_docs/ko/archive/roadmap.md
similarity index 100%
rename from contributor_docs/ko/roadmap.md
rename to contributor_docs/ko/archive/roadmap.md
diff --git a/contributor_docs/ko/supported_browsers.md b/contributor_docs/ko/archive/supported_browsers.md
similarity index 100%
rename from contributor_docs/ko/supported_browsers.md
rename to contributor_docs/ko/archive/supported_browsers.md
diff --git a/contributor_docs/ko/contributing_to_the_p5.js_reference.md b/contributor_docs/ko/contributing_to_the_p5.js_reference.md
index 73f3e59b18..b3121206df 100644
--- a/contributor_docs/ko/contributing_to_the_p5.js_reference.md
+++ b/contributor_docs/ko/contributing_to_the_p5.js_reference.md
@@ -10,57 +10,57 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
 
 ```
 /**
- * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
- * in creative coding. The values returned oscillate between -1 and 1 as the
- * input angle increases. `sin()` takes into account the current
- * <a href="#/p5/angleMode">angleMode</a>.
- *
- * @method sin
- * @param  {Number} angle the angle.
- * @return {Number} sine of the angle.
- *
- * @example
- * <div>
- * <code>
- * function draw() {
- *   background(200);
- *
- *   let t = frameCount;
- *   let x = 50;
- *   let y = 30 * sin(t * 0.05) + 50;
- *   line(x, 50, x, y);
- *   circle(x, y, 20);
- *
- *   describe('A white ball on a string oscillates up and down.');
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * function draw() {
- *   let x = frameCount;
- *   let y = 30 * sin(x * 0.1) + 50;
- *   point(x, y);
- *
- *   describe('A series of black dots form a wave pattern.');
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * function draw() {
- *   let t = frameCount;
- *   let x = 30 * cos(t * 0.1) + 50;
- *   let y = 10 * sin(t * 0.2) + 50;
- *   point(x, y);
- *
- *   describe('A series of black dots form an infinity symbol.');
- * }
- * </code>
- * </div>
- */
+ * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
+ * in creative coding. The values returned oscillate between -1 and 1 as the
+ * input angle increases. `sin()` takes into account the current
+ * <a href="#/p5/angleMode">angleMode</a>.
+ *
+ * @method sin
+ * @param  {Number} angle the angle.
+ * @return {Number} sine of the angle.
+ *
+ * @example
+ * <div>
+ * <code>
+ * function draw() {
+ *   background(200);
+ *
+ *   let t = frameCount;
+ *   let x = 50;
+ *   let y = 30 * sin(t * 0.05) + 50;
+ *   line(x, 50, x, y);
+ *   circle(x, y, 20);
+ *
+ *   describe('A white ball on a string oscillates up and down.');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * function draw() {
+ *   let x = frameCount;
+ *   let y = 30 * sin(x * 0.1) + 50;
+ *   point(x, y);
+ *
+ *   describe('A series of black dots form a wave pattern.');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * function draw() {
+ *   let t = frameCount;
+ *   let x = 30 * cos(t * 0.1) + 50;
+ *   let y = 10 * sin(t * 0.2) + 50;
+ *   point(x, y);
+ *
+ *   describe('A series of black dots form an infinity symbol.');
+ * }
+ * </code>
+ * </div>
+ */
 ```
 
 레퍼런스 주석 뒤에는 일반적으로 함수를 정의하는 실제 자바스크립트 코드가 뒤따릅니다. 레퍼런스 주석은 항상 `/**`로 시작하고 `*/`로 끝나며, 시작과 끝 사이의 각 라인은 `*`로 시작합니다.
@@ -73,18 +73,18 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
 
 ```
 /**
- * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
- * in creative coding. The values returned oscillate between -1 and 1 as the
- * input angle increases. `sin()` takes into account the current
- * <a href="#/p5/angleMode">angleMode</a>.
+ * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
+ * in creative coding. The values returned oscillate between -1 and 1 as the
+ * input angle increases. `sin()` takes into account the current
+ * <a href="#/p5/angleMode">angleMode</a>.
 ```
 
 주석의 맨 위에는 함수의 설명이 텍스트로 작성되어 있습니다. 이 설명에는 마크다운 구문과 HTML이 모두 포함될 수 있어요. 설명은 간결하게 작성되어야 하며, 필요하다면 함수의 특이사항이나 작동 방식에 관한 세부 내용을 추가하여 함수가 어떤 일을 하는지 최대한 잘 설명해야 합니다.
 
 ```
  * @method sin
- * @param  {Number} angle  the angle.
- * @return {Number} sine of the angle.
+ * @param  {Number} angle  the angle.
+ * @return {Number} sine of the angle.
 ```
 
 함수에 대한 주석은 일반적으로 위 세 개의 섹션을 포함하는데, 각각 `@` 기호 뒤에 다음 중 하나의 키워드가 따라옵니다.
@@ -140,18 +140,18 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
 
 ```
 /**
- * @method background
- * @param {String} colorstring color string, possible formats include: integer
- *                         rgb() or rgba(), percentage rgb() or rgba(),
- *                         3-digit hex, 6-digit hex
- * @param {Number} [a] alpha value
- */
+ * @method background
+ * @param {String} colorstring color string, possible formats include: integer
+ *                         rgb() or rgba(), percentage rgb() or rgba(),
+ *                         3-digit hex, 6-digit hex
+ * @param {Number} [a] alpha value
+ */
 
 /**
- * @method background
- * @param {Number} gray specifies a value between white and black
- * @param {Number} [a]
- */
+ * @method background
+ * @param {Number} gray specifies a value between white and black
+ * @param {Number} [a]
+ */
 ```
 
 ### 더 알아보기: 다중 시그니처
@@ -164,27 +164,27 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
 
 ```
 /**
- * The system variable mouseX always contains the current horizontal
- * position of the mouse, relative to (0, 0) of the canvas. The value at
- * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
- * If touch is used instead of mouse input, mouseX will hold the x value
- * of the most recent touch point.
- *
- * @property {Number} mouseX
- * @readOnly
- *
- * @example
- * <div>
- * <code>
- * // Move the mouse across the canvas
- * function draw() {
- *   background(244, 248, 252);
- *   line(mouseX, 0, mouseX, 100);
- *   describe('horizontal black line moves left and right with mouse x-position');
- * }
- * </code>
- * </div>
- */
+ * The system variable mouseX always contains the current horizontal
+ * position of the mouse, relative to (0, 0) of the canvas. The value at
+ * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
+ * If touch is used instead of mouse input, mouseX will hold the x value
+ * of the most recent touch point.
+ *
+ * @property {Number} mouseX
+ * @readOnly
+ *
+ * @example
+ * <div>
+ * <code>
+ * // Move the mouse across the canvas
+ * function draw() {
+ *   background(244, 248, 252);
+ *   line(mouseX, 0, mouseX, 100);
+ *   describe('horizontal black line moves left and right with mouse x-position');
+ * }
+ * </code>
+ * </div>
+ */
 ```
 
 블록의 시작 부분에는 변수의 설명이 작성되어 있습니다(이 예시에서는 `mouseX`). 변수의 이름을 정의하기 위해, `@method` 대신 `@property`를 사용합니다. `@property`는 `@params`와 같은 방식으로 타입과 이름을 정의할 수 있습니다. `@readonly` 태그는 대부분의 p5.js 변수에 설정되어 있으며, 사용자에 의해 값이 덮어씌워지지 않아야 함을 내부적으로 나타내기 위해 사용됩니다.
@@ -199,20 +199,20 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
 
 ```
  * @example
- * <div>
- * <code>
- * const c = color(255, 204, 0);
- * fill(c);
- * rect(15, 20, 35, 60);
- * // Sets 'redValue' to 255.
- * const redValue = red(c);
- * fill(redValue, 0, 0);
- * rect(50, 20, 35, 60);
- * describe(
- *   'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
- * );
- * </code>
- * </div>
+ * <div>
+ * <code>
+ * const c = color(255, 204, 0);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'redValue' to 255.
+ * const redValue = red(c);
+ * fill(redValue, 0, 0);
+ * rect(50, 20, 35, 60);
+ * describe(
+ *   'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
+ * );
+ * </code>
+ * </div>
 ```
 
 `@example` 태그 다음에는 HTML `<div>` 태그가 시작되고, 그 다음에 `<code>` 태그가 뒤따라옵니다. 그리고 열린 `<code>` 태그와 닫힌 `</code>` 태그 사이에, 예제 코드를 작성하면 됩니다. 좋은 예제 코드를 작성하기 위한 기본 원칙은 가능한 단순하고 작게 작성하는 겁니다. 예제는 의미가 있어야 하고, 기능이 어떻게 작동하는지 너무 복잡하지 않게 설명할 수 있어야 합니다. 예제의 캔버스는 100x100 픽셀의 크기를 가져야 합니다. 만약 위의 예제와 같이 `setup()` 함수가 작성되지 않은 경우라면, 100x100 픽셀 크기의 회색 배경 캔버스를 만드는 `setup()` 함수가 자동으로 래핑(wrapping)됩니다. 예제 코드에 대한 모범 사례 및 코드 스타일에 대한 자세한 내용은 여기서 다루지 않습니다. 대신 레퍼런스 스타일 가이드를 참고해 주세요.
@@ -227,7 +227,7 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
 * describe('An ellipse created using an arc with its top right open.');
 * </code>
 * </div>
-* 
+*
 * <div>
 * <code>
 * arc(50, 50, 80, 80, 0, PI, OPEN);
@@ -254,8 +254,8 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
 * @example
 * <div class='norender notest'><code>
 * function setup() {
-*   let c = createCanvas(100, 100);
-*   saveCanvas(c, 'myCanvas', 'jpg');
+*   let c = createCanvas(100, 100);
+*   saveCanvas(c, 'myCanvas', 'jpg');
 * }
 * </code></div>
 ```
@@ -272,26 +272,26 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
 * <code>
 * let xoff = 0.0;
 * function draw() {
-*   background(204);
-*   xoff = xoff + 0.01;
-*   let n = noise(xoff) * width;
-*   line(n, 0, n, height);
-*   describe('A vertical line moves randomly from left to right.');
+*   background(204);
+*   xoff = xoff + 0.01;
+*   let n = noise(xoff) * width;
+*   line(n, 0, n, height);
+*   describe('A vertical line moves randomly from left to right.');
 * }
 * </code>
 * </div>
-* 
+*
 * <div>
 * <code>
 * let noiseScale = 0.02;
 * function draw() {
-*   background(0);
-*   for (let x = 0; x < width; x += 1) {
-*     let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
-*     stroke(noiseVal*255);
-*     line(x, mouseY + noiseVal * 80, x, height);
-*   }
-*   describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
+*   background(0);
+*   for (let x = 0; x < width; x += 1) {
+*     let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
+*     stroke(noiseVal*255);
+*     line(x, mouseY + noiseVal * 80, x, height);
+*   }
+*   describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
 * }
 * </code>
 * </div>
@@ -307,11 +307,11 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
 
 ```
 /**
- * _start calls preload() setup() and draw()
- * 
- * @method _start
- * @private
- */
+ * _start calls preload() setup() and draw()
+ *
+ * @method _start
+ * @private
+ */
 p5.prototype._start = function () {
 ```
 
@@ -325,12 +325,12 @@ p5.prototype._start = function () {
 
 ```
 /**
- * @module Color
- * @submodule Creating & Reading
- * @for p5
- * @requires core
- * @requires constants
- */
+ * @module Color
+ * @submodule Creating & Reading
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
 ```
 
 p5.js에서 따르는 규칙은 `src/` 폴더 내의 각 서브폴더가 하나의 `@module`이 되며, 서브폴더 내의 각 파일이 `@module`에 속한 `@submodule`이 된다는 것입니다. p5.js 소스 코드에 새로운 서브폴더나 파일을 추가하지 않는 한, 이 레퍼런스 주석 블록을 편집할 필요가 없습니다.
@@ -341,31 +341,31 @@ p5.js에서 따르는 규칙은 `src/` 폴더 내의 각 서브폴더가 하나
 
 ```
 /**
- * A class to describe a color. Each `p5.Color` object stores the color mode
- * and level maxes that were active during its construction. These values are
- * used to interpret the arguments passed to the object's constructor. They
- * also determine output formatting such as when
- * <a href="#/p5/saturation">saturation()</a> is called.
- *
- * Color is stored internally as an array of ideal RGBA values in floating
- * point form, normalized from 0 to 1. These values are used to calculate the
- * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
- * are sent to the renderer.
- *
- * When different color representations are calculated, the results are cached
- * for performance. These values are normalized, floating-point numbers.
- *
- * <a href="#/p5/color">color()</a> is the recommended way to create an instance
- * of this class.
- *
- * @class p5.Color
- * @constructor
- * @param {p5} [pInst]                  pointer to p5 instance.
- *
- * @param {Number[]|String} vals        an array containing the color values
- *                                      for red, green, blue and alpha channel
- *                                      or CSS color.
- */
+ * A class to describe a color. Each `p5.Color` object stores the color mode
+ * and level maxes that were active during its construction. These values are
+ * used to interpret the arguments passed to the object's constructor. They
+ * also determine output formatting such as when
+ * <a href="#/p5/saturation">saturation()</a> is called.
+ *
+ * Color is stored internally as an array of ideal RGBA values in floating
+ * point form, normalized from 0 to 1. These values are used to calculate the
+ * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
+ * are sent to the renderer.
+ *
+ * When different color representations are calculated, the results are cached
+ * for performance. These values are normalized, floating-point numbers.
+ *
+ * <a href="#/p5/color">color()</a> is the recommended way to create an instance
+ * of this class.
+ *
+ * @class p5.Color
+ * @constructor
+ * @param {p5} [pInst]                  pointer to p5 instance.
+ *
+ * @param {Number[]|String} vals        an array containing the color values
+ *                                      for red, green, blue and alpha channel
+ *                                      or CSS color.
+ */
 ```
 
 ## 레퍼런스 생성과 미리보기
diff --git a/contributor_docs/ko/design_principles.md b/contributor_docs/ko/design_principles.md
deleted file mode 100644
index 35a392b622..0000000000
--- a/contributor_docs/ko/design_principles.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# p5.js 디자인 원칙
-
-- **입문자 친화적인** p5.js API는 코딩 입문자에게 친화적이며, 최신 HTML5/canvas/DOM API로 인터랙티브하고 시각적인 웹 콘텐츠를 만드는 데 낮은 장벽을 제공하는 것을 목적으로 하고 있습니다.
-
-- **교육적인** p5.js는 지원하고 있는 예제들과 API에 대한 완벽한 레퍼런스를 비롯해 명확하고 매력적인 순서로 핵심 크리에이티브 코딩 원칙을 소개하는 튜토리얼과 샘플 클래스 커리큘럼을 제공하고 교육적인 용도로서 API와 커리큘럼에 초점을 맞추고 있습니다.
-
-- **자바스크립트와 커뮤니티** p5.js는 적절한 자바스크립트 디자인 패턴과 사용법을 모델링하고 필요할 경우 추상화하여 입문자가 웹 개발에 좀 더 접근하기 쉽도록 하는 것을 목표로 합니다. p5.js는 오픈소스 라이브러리로서, 창작, 문서화 및 배포에 더 광범위한 자바스크립트 커뮤니티를 포함합니다.
-
-- **프로세싱과 커뮤니티** p5.js는 프로세싱 언어와 커뮤니티에 직접적인 연관이 있으며, 프로세싱에서 자바스크립트로의 전환을 쉽고 명확하게 하는 것을 목표로 합니다. p5.js를 위해 프로세싱 API와 커뮤니티를 지원하는 것을 우선으로 하고 있으며, 웹에서 크리에티브 코딩의 새로운 가능성을 포함하고 확장하며, 해당 API를 입문자에게 노출하는 프로세싱 스타일의 접근 방식을 취하고 있습니다.
diff --git a/contributor_docs/ko/discussions.md b/contributor_docs/ko/discussions.md
deleted file mode 100644
index 67839fa74c..0000000000
--- a/contributor_docs/ko/discussions.md
+++ /dev/null
@@ -1,3 +0,0 @@
-p5 개발 방법에 대해 논의에 참여하는 것은 기여 할 수 있는 좋은 방법입니다. 여러가지 방법이 있지만, 한 가지 좋은 시작점은 기존의 Github의['discussion' 라벨을 가진 이슈](https://github.com/processing/p5.js/labels/discussion)를 확인하고 여러분의 의견을 추가하는 것입니다.
-
-이 하위 섹션의 문서는 이러한 논의를 바탕으로 개발되었습니다. 이곳에서 라이브러리의 현재와 미래 디자인에 대해 아이디어를 수집합니다.
diff --git a/contributor_docs/ko/organization.md b/contributor_docs/ko/organization.md
deleted file mode 100644
index 5de43411b8..0000000000
--- a/contributor_docs/ko/organization.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# 체계적인 기여
-저장소를 체계적으로 유지하면 어떤 토론과 작업이 가장 중요한지 항상 명확히 확인할 수 있습니다. 이를 통해 관리자에서 새로운 기여자까지 모든 사람이 혼란스럽지 않게 저장소를 탐색할 수 있습니다. 이것을 돕기 위해, 우리는 이슈를 정리하고, 작업하고, 풀 리퀘스트하는 방법에 대한 가이드라인이 있습니다.
-
-조직을 돕는 것은 기여하는 좋은 방법이 될 수 있습니다. 만약 버그 리포트에 예제 코드 같은 정보가 누락되었다면 편히 누락된 정보를 요청하십시오. 담당자가 할당된 이슈에 60일 동안 아무 활동이 없다면 그 이슈에 코멘트를 남겨 담당자가 이슈를 계속 처리할 의사가 있는지 확인할 수 있습니다. 태스크를 정리하고 관리하는 일을 도울 때는 언제나 친절하고 항상 커뮤니티 가이드라인을 염두에 두십시오.
-
-
-
-# 조직 가이드라인
-
-## 이슈
-- **모든 버그 리포트는 샘플 코드를 포함해야 합니다**
-  - 이슈 본문에 코드를 포함하거나 [온라인 에디터](editor.p5js.org)에서 보기 적합한 코드 예시 링크여도 됩니다.
-- **모든 이슈에는 최소 2개의 라벨이 있어야 합니다**
-- 이렇게 하면 이슈를 훨씬 쉽게 탐색할 수 있습니다. 
-  - 이 영역(webgl, core, image 등)의 라벨을 추가해 보십시오. 
-- **이슈는 희망자에게 먼저 할당됩니다**
-  - 버그가 재현되거나 커뮤니티에서 기능 요청/개선에 합의한 경우 그 이슈는 담당자를 할당할 수 있습니다. 이때 "제가 처리할게요!"라고 요청한 첫 번째 컨트리뷰터에게 이슈가 할당될 것입니다.
-  - 버그를 재현할 수 없거나 기능 요청/개선 합의가 명확하지 않은 경우라면 이슈를 할당해 달라고 요청하지 마십시오.
-
-## 풀 리퀘스트
-- **모든 풀 리퀘스트는 이슈와 관련있어야 합니다**
-  - 버그를 수정하거나 기능을 추가하고 싶다면 먼저 이슈를 등록해서 커뮤니티가 그 점을 논의할 수 있게 합니다.
-  - 만약 관련된 이슈가 없는 풀 리퀘스트가 있다면 댓글을 달아서 컨트리뷰터에게 풀 리퀘스트를 열도록 요청하십시오.
-
-
-
-# 의사결정 가이드라인
-
-p5는 의사결정 프로세스가 가능한 투명하고 수평적이기를 희망합니다. 이를 위해 p5는 비공식적 합의추구 모델을 사용하여 의사결정을 합니다. 이것은 우리가 어떤 또는 모든 결정에 대해 커뮤니티의 합의에 도달하는 것을 선호한다는 의미입니다. 만약 이것이 실패하면 그 다음은 투표를 진행합니다.
-
-**스튜어드**는 제안을 거부할 수 있습니다. 이런 상황은 어떤 제안이 미션/커뮤니티 가이드라인과 맞지 않을 때 일어날 수 있습니다. 또는 제안이 그 당시 프로젝트에서 처리할 수 없는 중요한 유지보수나 구현을 제시하는 경우에도 그렇습니다.
-
-변경을 제안하려면 이슈를 여십시오. 비교적 큰 변경이거나 설계 구조를 고려해야 할 정도의 중대한 사안이라면 이슈에 'discussion' 라벨을 붙입니다. 관심 있는 커뮤니티 멤버는 자신의 생각을 알릴 수 있습니다. 상당한 기간이 지난 후(긴급한 경우가 아니면 30일), 관리자는 그 이슈가 관심을 끌고 있는지, 최선의 방식에 대한 합의에 도달했는지를 알아볼 것입니다. 이 시점에서 관리자는 투표를 요청하거나, 이슈를 닫거나, 또는 풀 리퀘스트할 이슈를 열 것입니다. 토론이 끝나기 전에 제출된 풀 리퀘스트는 무시됩니다.
-
-> 향후에는 위의 조직화와 의사결정 프로세스를 자동화하는 것이 좋을 것입니다.
-
-> 위의 항목 중 어느 것이든 봇이나 깃헙 액션으로 자동화하는 방법에 대한 아이디어가 있다면 이를 제안하는 이슈를 자유롭게 여십시오! 
-
-
-
-# 스튜어드
-
-스튜어드는 프로젝트의 어떤 부분에 특별히 관련되거나, 익숙하거나, 대응하는 기여자입니다. 그들의 역할은 p5.js 작업을 하는 다른 사람들에게 전후사정을 설명하거나 지침을 제공하는 것입니다. 만약 특정 부분에 기여하는 방법이 궁금하다면 이슈나 풀 리퀘스트에 실린 스튜어드를 태그하면 됩니다. 또한 그들은 커뮤니티의 의견을 고려하여 기능 요청을 검토하고 그 부분의 전반적인 작업 방향을 안내할 수도 있습니다.
-
-관심있는 사람은 누구나 스튜어드로 자원봉사할 수 있습니다! 전문 지식에 대한 구체적인 요구사항은 없습니다. 적극적으로 배우고 참여하는 데 관심이 있으면 됩니다. 이 프로젝트에서 하나 이상의 부분을 잘 안다면 이슈를 열어서 스튜어드로 자원하십시오!
-
-스튜어드가 되면 [README 문서 스튜어드 섹션](https://github.com/processing/p5.js#stewards)에 이름이 올라가며, 삭제 요청이 있기 전까지 남아 있을 것입니다. 장기간 스튜어드의 활동이 없으면 우리는 활동 지속 여부를 물을 수도 있습니다. 잠시 쉬었다 다시 활동해도 됩니다!
diff --git a/contributor_docs/ko/preparing_a_pull_request.md b/contributor_docs/ko/preparing_a_pull_request.md
deleted file mode 100644
index 059191b5a7..0000000000
--- a/contributor_docs/ko/preparing_a_pull_request.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# 풀 리퀘스트 준비하기
-
-풀 리퀘스트는 코드가 최신 일 때 더 쉽습니다! git rebase를 사용하면 다른 기여자의 변경 사항을 통합하고 코드를 업데이트할 수 있습니다. 방법은 다음과 같습니다.
-
-## 저장하고 업데이트하기
-
-### 작업한 내용 모두 저장해주세요!
-    git status 
-    git add -u
-    git commit 
-
-### 변경사항을 확인해주세요
-upstream p5.js 저장소를 트래킹하고 있는지 확인해주세요.
-
-    $ git remote show upstream
-
-에러를 보게 되면, 메인 p5.js 저장소를 "upstream" 원격 저장소로 트래킹해야 합니다. 이 작업은 한 번만 하면 됩니다! 하지만, 두 번 실행해도 아무 문제 없습니다.
-
-    $ git remote add upstream https://github.com/processing/p5.js
-
-그런 다음 git에서 최신 변경 사항을 확인해 봅니다.
-
-    $ git fetch upstream 
-
-### 만일의 경우를 대비해, 변경사항을 새 브랜치로 복사하세요.
-    $ git branch your-branch-name-backup 
-
-### main 브랜치로부터의 변경사항을 *적용한 후* 여러분이 작업한 변경 사항을 추가하세요
-    $ git rebase upstream/main 
-
-### 충돌 해결하기
-충돌이 있을 수 있습니다!
-lib/p5.js와 lib/p5.min.js라면 쉽게 고칠 수 있습니다. grunt로 프로젝트를 재빌드합니다.
-
-    grunt 
-    git add -u
-    git rebase --continue
-
-다른 파일과 충돌이 있고, 어떻게 해결해야 하는지 모른다면... 도움을 요청해 주세요!
-
-### 마침내
-    $ git push origin
-
-기술적으로 세부사항에 대해 궁금한 점이 있을 경우, 여기 리베이싱에 대한 좋은 레퍼런스가 있습니다. https://www.atlassian.com/git/tutorials/merging-vs-rebasing
-
-## 풀리퀘스트 생성하기
-
-여기 [github에서 풀 리퀘스트를 생성하는 것에 대한 안내서](https://help.github.com/articles/creating-a-pull-request/)가 있습니다. 원하는 이름으로 브랜치명을 지정할 수 있습니다. p5.js의 "main" 브랜치를 대상으로 풀 리퀘스트를 요청합니다.
-
-풀 리퀘스트를 제출하면, 다른 분들이 가능할 때 즉시 검토되고, 머지 될 것입니다. 변경사항은 p5.js 라이브러리의 다음 릴리와 함께 나갈 것입니다.
diff --git a/contributor_docs/ko/webgl_contribution_guide.md b/contributor_docs/ko/webgl_contribution_guide.md
index 72849734c7..842cc25eff 100644
--- a/contributor_docs/ko/webgl_contribution_guide.md
+++ b/contributor_docs/ko/webgl_contribution_guide.md
@@ -145,7 +145,7 @@ function draw() {
   if (avgFrameRates.length > numSamples) {
     frameRateSum -= avgFrameRates.shift();
   }
- 
+
   frameRateP.html(round(frameRateSum) + ' avg fps');
 }
 ```
diff --git a/contributor_docs/steward_guidelines.md b/contributor_docs/steward_guidelines.md
index cc9a090565..bf645aa26f 100644
--- a/contributor_docs/steward_guidelines.md
+++ b/contributor_docs/steward_guidelines.md
@@ -77,7 +77,7 @@ Feature request issues should use the "New Feature Request" issue template. The
    - Is the feature likely to cause a breaking change?
      - Will it conflict with existing p5.js functions and variables?
      - Will it conflict with typical sketches already written for p5.js?
-     - Features that are likely to cause conflicts such as  the ones above  are  considered breaking changes. Without a [major version release](https://docs.npmjs.com/about-semantic-versioning), we should not make breaking changes to p5.js.
+     - Features that are likely to cause conflicts such as  the ones above  are  considered breaking changes. Without a [major version release](https://docs.npmjs.com/about-semantic-versioning), we should not make breaking changes to p5.js.
    - Can the proposed new feature be achieved using existing functionalities already in p5.js, relatively simple native JavaScript code, or existing easy-to-use libraries?
      - For example, instead of providing a p5.js function to join an array of strings such as `join(["Hello", "world!"])`, the native JavaScript `["Hello", "world!"].join()` should be preferred instead.
 3. If the access requirement and other considerations have been fulfilled, at least two stewards or maintainers must approve the new feature request before work should begin toward a PR. The PR review process for new features is documented below.
@@ -95,7 +95,7 @@ Feature enhancement issues should use the "Existing Feature Enhancement" issue t
 
 ### Discussion
 
-This type of issue has a minimal template ("Discussion") and should be used to gather feedback around a topic in general before coalescing it into something more specific, like a feature request. These sorts of discussion issues can be closed when the conversation finishes and the resulting more specific issues have been created: 
+This type of issue has a minimal template ("Discussion") and should be used to gather feedback around a topic in general before coalescing it into something more specific, like a feature request. These sorts of discussion issues can be closed when the conversation finishes and the resulting more specific issues have been created:
 
 - If an issue is opened as a discussion but should be, for example, a bug report, the correct label should be applied and the "discussion" label removed. Additional info about the bug should also be requested from the author if not already included.
 - If an issue is opened as a discussion but isn't relevant to source code contribution or otherwise relevant to the GitHub repositories/contribution process/contribution community, they should be redirected to the forum or Discord and the issue closed.
@@ -117,7 +117,7 @@ Almost all code contributions to the p5.js repositories happen through pull requ
 
 ### Simple fix
 
-Simple fixes, such as a small typo fix, can be merged directly by anyone with merge access.  Check on the PR "Files Changed" tab to ensure  that the automated CI test passes.
+Simple fixes, such as a small typo fix, can be merged directly by anyone with merge access.  Check on the PR "Files Changed" tab to ensure  that the automated CI test passes.
 
 ![The "files changed" tab when viewing a pull request on GitHub](images/files-changed.png)
 
@@ -202,11 +202,11 @@ Next in `lint:samples` is `eslint-samples:source`, which is a custom written tas
 
 ```js
 grunt.registerTask('test', [
-  'build',
-  'connect:server',
-  'mochaChrome',
-  'mochaTest',
-  'nyc:report'
+  'build',
+  'connect:server',
+  'mochaChrome',
+  'mochaTest',
+  'nyc:report'
 ]);
 ```
 
@@ -214,14 +214,14 @@ First let's look at the `build` task under `test`.
 
 ```js
 grunt.registerTask('build', [
-  'browserify',
-  'browserify:min',
-  'uglify',
-  'browserify:test'
+  'browserify',
+  'browserify:min',
+  'uglify',
+  'browserify:test'
 ]);
 ```
 
-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).
@@ -302,7 +302,7 @@ Please see [release\_process.md](release_process.md).
 
 ## Tips & tricks
 
-Sometimes, the number of issues and PR that require review can get a bit overwhelming.  While we try to put in place processes that make things easier, there are some tips and tricks that you can utilize to help with reviewing issues and PRs.
+Sometimes, the number of issues and PR that require review can get a bit overwhelming.  While we try to put in place processes that make things easier, there are some tips and tricks that you can utilize to help with reviewing issues and PRs.
 
 
 ### Reply templates
diff --git a/contributor_docs/unit_testing.md b/contributor_docs/unit_testing.md
index 8ef4fae596..d45bfe4117 100644
--- a/contributor_docs/unit_testing.md
+++ b/contributor_docs/unit_testing.md
@@ -48,17 +48,17 @@ In the example below, `suite()` and `test()` are both built-in functions provide
 
 ```js
 suite('p5.prototype.keyIsPressed', function() {
-  test('keyIsPressed is a boolean', function() {
-    //write test here
-  });
+  test('keyIsPressed is a boolean', function() {
+    //write test here
+  });
 
-  test('keyIsPressed is true on key press', function() {
-    //write test here
-  });
+  test('keyIsPressed is true on key press', function() {
+    //write test here
+  });
 
-  test('keyIsPressed is false when no keys are pressed', function() {
-    //write test here
-  });
+  test('keyIsPressed is false when no keys are pressed', function() {
+    //write test here
+  });
 });
 ```
 
@@ -68,12 +68,12 @@ We have structured our tests above but we haven't written the tests yet. We will
 let myp5;
 
 setup(function(done) {
-  new p5(function(p) {
-    p.setup = function() {
-      myp5 = p;
-      done();
-    };
-  });
+  new p5(function(p) {
+    p.setup = function() {
+      myp5 = p;
+      done();
+    };
+  });
 });
 ```
 
@@ -83,8 +83,8 @@ Remember that, as previously mentioned, Mocha is a test runner but by itself doe
 
 ```js
 test('keyIsPressed is a boolean', function() {
-  //Asserts that value is a boolean.
-  assert.isBoolean(myp5.keyIsPressed);
+  //Asserts that value is a boolean.
+  assert.isBoolean(myp5.keyIsPressed);
 });
 ```
 
@@ -101,23 +101,23 @@ If you have added a new source code file in the `src` folder and would like to a
 
 ```js
 suite('module_name', function() {
-  let myp5;
-  let myID = 'myCanvasID';
-
-  setup(function(done) {
-    new p5(function(p) {
-      p.setup = function() {
-        let cnv = p.createCanvas(100, 100);
-        cnv.id(myID);
-        myp5 = p;
-        done();
-      };
-    });
-  });
-
-  teardown(function() {
-    myp5.remove();
-  });
+  let myp5;
+  let myID = 'myCanvasID';
+
+  setup(function(done) {
+    new p5(function(p) {
+      p.setup = function() {
+        let cnv = p.createCanvas(100, 100);
+        cnv.id(myID);
+        myp5 = p;
+        done();
+      };
+    });
+  });
+
+  teardown(function() {
+    myp5.remove();
+  });
 });
 ```
 
@@ -126,9 +126,9 @@ After adding a test file for a module to `test/unit`, you'll also need to add th
 ```js
 // test/unit/spec.js
 var spec = {
-  // ...
-  typography: ['attributes', 'loadFont', 'p5.Font', 'yourModule'],
-  // ...
+  // ...
+  typography: ['attributes', 'loadFont', 'p5.Font', 'yourModule'],
+  // ...
 };
 ```
 
@@ -136,31 +136,31 @@ To add actual tests, which are grouped into what is called a “suite” (repres
 
 ```js
 suite('module_name', function() {
-  let myp5;
-  let myID = 'myCanvasID';
-
-  setup(function(done) {
-    new p5(function(p) {
-      p.setup = function() {
-        let cnv = p.createCanvas(100, 100);
-        cnv.id(myID);
-        myp5 = p;
-        done();
-      };
-    });
-  });
-
-  teardown(function() {
+  let myp5;
+  let myID = 'myCanvasID';
+
+  setup(function(done) {
+    new p5(function(p) {
+      p.setup = function() {
+        let cnv = p.createCanvas(100, 100);
+        cnv.id(myID);
+        myp5 = p;
+        done();
+      };
+    });
+  });
+
+  teardown(function() {
     myp5.remove();
-  });
+  });
 
-  suite('p5.prototype.yourFunction', function() {
-    test('should [test something]', function() {
-      // Your test code and Chai assertions
-    });
-  });
+  suite('p5.prototype.yourFunction', function() {
+    test('should [test something]', function() {
+      // Your test code and Chai assertions
+    });
+  });
 
-  // More test suites as needed
+  // More test suites as needed
 });
 ```
 
diff --git a/contributor_docs/web_accessibility.md b/contributor_docs/web_accessibility.md
index 729cefc00d..61c7a56dae 100644
--- a/contributor_docs/web_accessibility.md
+++ b/contributor_docs/web_accessibility.md
@@ -1,6 +1,6 @@
 # p5.js Web Accessibility
 
-This document describes the structure of p5.js’ web accessibility features for contributors. 
+This document describes the structure of p5.js’ web accessibility features for contributors.
 
 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.
 
@@ -25,16 +25,16 @@ We’ll look at how the library-generated outputs work first. The following code
 
 ```js
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(400, 400);
 }
 
 function draw() {
-  background("#ccccff");
-  textOutput();
-  fill("orange");
-  ellipse(100, 100, 50);
-  fill("fuchsia");
-  rect(300, 300, 50, 50);
+  background("#ccccff");
+  textOutput();
+  fill("orange");
+  ellipse(100, 100, 50);
+  fill("fuchsia");
+  rect(300, 300, 50, 50);
 }
 ```
 
@@ -44,53 +44,53 @@ function draw() {
 
 > Your output is a, 400 by 400 pixels, lavender blue canvas containing the following 2 shapes:
 
-This description is followed by a list of shapes where the color, position, and area of each shape are described: 
+This description is followed by a list of shapes where the color, position, and area of each shape are described:
 
 > orange circle at top left covering 1% of the canvas.\
 > fuchsia square, at bottom right, covering 2% of the canvas.
 
-Each element can be selected to get more details. A table of elements is also provided. In this table, each element’s  shape, color, location, coordinates, and area are described:
+Each element can be selected to get more details. A table of elements is also provided. In this table, each element’s  shape, color, location, coordinates, and area are described:
 
 > orange circle location=top left area=1%\
-> fuchsia square    location = bottom right    area = 2%
+> fuchsia square    location = bottom right    area = 2%
 
 <details>
 <summary>This generates the following HTML:</summary>
 
 ```html
 <canvas id="defaultCanvas0" class="p5Canvas" style="width: 400px; height: 400px;" width="400" height="400">
-  <div id="defaultCanvas0accessibleOutput" role="region" aria-label="Canvas Outputs">
-    <div id="defaultCanvas0textOutput">
-      Text Output
-      <div id="defaultCanvas0textOutputSummary" aria-label="text output summary">
-        <p id="defaultCanvas0textOutput_summary">
-          Your output is a, 400 by 400 pixels, white canvas containing the following 2 shapes:
-        </p>
-        <ul id="defaultCanvas0textOutput_list">
-          <li>
-            <a href="#defaultCanvas0textOutputshape0">orange circle</a>, at top left, covering 1% of the canvas.
-          </li>
-          <li>
-            <a href="#defaultCanvas0textOutputshape1">fuchsia square</a>, at bottom right, covering 2% of the canvas.
-          </li>
-        </ul>
-      </div>
-      <table id="defaultCanvas0textOutput_shapeDetails" summary="text output shape details">
-        <tbody>
-          <tr id="defaultCanvas0textOutputshape0">
-            <th>orange circle</th>
-            <td>location = top left</td>
-            <td> area = 1%</td>
-          </tr>
-          <tr id="defaultCanvas0textOutputshape1">
-            <th>fuchsia square</th>
-            <td>location = bottom right</td>
-            <td> area = 2%</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <div id="defaultCanvas0accessibleOutput" role="region" aria-label="Canvas Outputs">
+    <div id="defaultCanvas0textOutput">
+      Text Output
+      <div id="defaultCanvas0textOutputSummary" aria-label="text output summary">
+        <p id="defaultCanvas0textOutput_summary">
+          Your output is a, 400 by 400 pixels, white canvas containing the following 2 shapes:
+        </p>
+        <ul id="defaultCanvas0textOutput_list">
+          <li>
+            <a href="#defaultCanvas0textOutputshape0">orange circle</a>, at top left, covering 1% of the canvas.
+          </li>
+          <li>
+            <a href="#defaultCanvas0textOutputshape1">fuchsia square</a>, at bottom right, covering 2% of the canvas.
+          </li>
+        </ul>
+      </div>
+      <table id="defaultCanvas0textOutput_shapeDetails" summary="text output shape details">
+        <tbody>
+          <tr id="defaultCanvas0textOutputshape0">
+            <th>orange circle</th>
+            <td>location = top left</td>
+            <td> area = 1%</td>
+          </tr>
+          <tr id="defaultCanvas0textOutputshape1">
+            <th>fuchsia square</th>
+            <td>location = bottom right</td>
+            <td> area = 2%</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 </canvas>
 ```
 
@@ -98,7 +98,7 @@ Each element can be selected to get more details. A table of elements is also pr
 
 `gridOutput()` lays out the content of the canvas in the form of a grid using an HTML table element. Each shape’s location in the grid is based on its spatial location on the canvas. A brief description of the canvas is available before the table output. This description includes the color of the background, size of the canvas, number of objects, and object types:
 
-> lavender blue canvas, 400 by 400 pixels, contains 2 shapes:  1 circle 1 square
+> lavender blue canvas, 400 by 400 pixels, contains 2 shapes:  1 circle 1 square
 
 Each shape’s description is placed in a cell of the table depending on its location on the canvas. Each description includes the color and type of shape:
 
@@ -117,36 +117,36 @@ The generated HTML is as follows:
 
 ```html
 <canvas id="defaultCanvas0" class="p5Canvas" style="width: 400px; height: 400px;" width="400" height="400">
-  <div id="defaultCanvas0accessibleOutput" role="region" aria-label="Canvas Outputs">
-    <div id="defaultCanvas0gridOutput">
-      Grid Output
-      <p id="defaultCanvas0gridOutput_summary" aria-label="grid output summary">
-     white canvas, 400 by 400 pixels, contains 2 shapes:  1 circle 1 square
-   </p>
-      <table id="defaultCanvas0gridOutput_map" summary="grid output content">
-        <tbody>
-          <tr></tr>
-          <tr></tr>
-          <tr>
-            <td><a href="#defaultCanvas0gridOutputshape0">orange circle</a></td>
-          </tr>
-          <tr></tr>
-          <tr></tr>
-          <tr></tr>
-          <tr></tr>
-          <tr></tr>
-          <tr>
-            <td><a href="#defaultCanvas0gridOutputshape1">fuchsia square</a></td>
-          </tr>
-          <tr></tr>
-        </tbody>
-      </table>
-      <ul id="defaultCanvas0gridOutput_shapeDetails" aria-label="grid output shape details">
-        <li id="defaultCanvas0gridOutputshape0">orange circle, location = top left, area = 1 %</li>
-        <li id="defaultCanvas0gridOutputshape1">fuchsia square, location = bottom right, area = 2 %</li>
-      </ul>
-    </div>
-  </div>
+  <div id="defaultCanvas0accessibleOutput" role="region" aria-label="Canvas Outputs">
+    <div id="defaultCanvas0gridOutput">
+      Grid Output
+      <p id="defaultCanvas0gridOutput_summary" aria-label="grid output summary">
+     white canvas, 400 by 400 pixels, contains 2 shapes:  1 circle 1 square
+   </p>
+      <table id="defaultCanvas0gridOutput_map" summary="grid output content">
+        <tbody>
+          <tr></tr>
+          <tr></tr>
+          <tr>
+            <td><a href="#defaultCanvas0gridOutputshape0">orange circle</a></td>
+          </tr>
+          <tr></tr>
+          <tr></tr>
+          <tr></tr>
+          <tr></tr>
+          <tr></tr>
+          <tr>
+            <td><a href="#defaultCanvas0gridOutputshape1">fuchsia square</a></td>
+          </tr>
+          <tr></tr>
+        </tbody>
+      </table>
+      <ul id="defaultCanvas0gridOutput_shapeDetails" aria-label="grid output shape details">
+        <li id="defaultCanvas0gridOutputshape0">orange circle, location = top left, area = 1 %</li>
+        <li id="defaultCanvas0gridOutputshape1">fuchsia square, location = bottom right, area = 2 %</li>
+      </ul>
+    </div>
+  </div>
 </canvas>
 ```
 
@@ -169,7 +169,7 @@ Although `textOutput()` and `gridOutput()` are located in [src/accessibility/out
 - `textOutput()`
 - `gridOutput()`
 
-Both methods activate the accessible output by setting `this._accessibleOutputs.text` or `this._accessibleOutputs.grid `to `true` and calling `this._createOutput('textOutput', 'Fallback')` or `this._createOutput('gridOutput', 'Fallback')` respectively. 
+Both methods activate the accessible output by setting `this._accessibleOutputs.text` or `this._accessibleOutputs.grid `to `true` and calling `this._createOutput('textOutput', 'Fallback')` or `this._createOutput('gridOutput', 'Fallback')` respectively.
 
 If `LABEL` is passed as a parameter to the method, it also activates the visible text output label by setting `this._accessibleOutputs.textLabel` as `true` and calls `this._createOutput('textOutput', 'Label')` or `this._createOutput('gridOutput', 'Label')`.
 
@@ -251,15 +251,15 @@ With example code:
 
 ```js
 function setup() {
-  background('pink');
+  background('pink');
 
-  fill('red');
-  noStroke();
-  circle(67, 67, 20);
-  circle(83, 67, 20);
-  triangle(91, 73, 75, 95, 59, 73);
+  fill('red');
+  noStroke();
+  circle(67, 67, 20);
+  circle(83, 67, 20);
+  triangle(91, 73, 75, 95, 59, 73);
 
-  describe('A pink square with a red heart in the bottom-right corner.', LABEL);
+  describe('A pink square with a red heart in the bottom-right corner.', LABEL);
 }
 ```
 
@@ -270,7 +270,7 @@ The page will output:
 
 ### describeElement()
 
-The `describeElement()` function creates a screen reader-accessible description for groups of shapes that create meaning together. For example, a custom-drawn “heart” shape made out of multiple lines of code. The first parameter should be a string with the name of the element, for example, “Heart”. The second parameter should be a string with the description of the element, for example, “A red heart in the bottom-right corner.” The third parameter is optional. If a user passes `LABEL` as a third parameter, an additional `<div>` element is inserted next to the `<canvas>` element. The new \<div> will contain a visible version of the same  description embedded in the `<canvas>` element.
+The `describeElement()` function creates a screen reader-accessible description for groups of shapes that create meaning together. For example, a custom-drawn “heart” shape made out of multiple lines of code. The first parameter should be a string with the name of the element, for example, “Heart”. The second parameter should be a string with the description of the element, for example, “A red heart in the bottom-right corner.” The third parameter is optional. If a user passes `LABEL` as a third parameter, an additional `<div>` element is inserted next to the `<canvas>` element. The new \<div> will contain a visible version of the same  description embedded in the `<canvas>` element.
 
 `describeElement()` is supported by several functions in [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js):
 
@@ -282,16 +282,16 @@ With example code:
 
 ```js
 function setup() {
-  background('pink');
-  noStroke();
+  background('pink');
+  noStroke();
 
-  describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);
-  fill('red');
-  circle(66.6, 66.6, 20);
-  circle(83.2, 66.6, 20);
-  triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
+  describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);
+  fill('red');
+  circle(66.6, 66.6, 20);
+  circle(83.2, 66.6, 20);
+  triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
 
-  describe('A red heart and yellow circle over a pink background.', LABEL);
+  describe('A red heart and yellow circle over a pink background.', LABEL);
 }
 ```
 
diff --git a/contributor_docs/webgl_contribution_guide.md b/contributor_docs/webgl_contribution_guide.md
index cbdc2b0011..3a2030e807 100644
--- a/contributor_docs/webgl_contribution_guide.md
+++ b/contributor_docs/webgl_contribution_guide.md
@@ -75,25 +75,25 @@ When adding a new test, if the feature is something that also works in 2D mode,
 
 ```js
 test('coplanar strokes match 2D', function() {
-  const getColors = function(mode) {
-    myp5.createCanvas(20, 20, mode);
-    myp5.pixelDensity(1);
-    myp5.background(255);
-    myp5.strokeCap(myp5.SQUARE);
-    myp5.strokeJoin(myp5.MITER);
-    if (mode === myp5.WEBGL) {
-      myp5.translate(-myp5.width/2, -myp5.height/2);
-    }
-    myp5.stroke('black');
-    myp5.strokeWeight(4);
-    myp5.fill('red');
-    myp5.rect(10, 10, 15, 15);
-    myp5.fill('blue');
-    myp5.rect(0, 0, 15, 15);
-    myp5.loadPixels();
-    return [...myp5.pixels];
-  };
-  assert.deepEqual(getColors(myp5.P2D), getColors(myp5.WEBGL));
+  const getColors = function(mode) {
+    myp5.createCanvas(20, 20, mode);
+    myp5.pixelDensity(1);
+    myp5.background(255);
+    myp5.strokeCap(myp5.SQUARE);
+    myp5.strokeJoin(myp5.MITER);
+    if (mode === myp5.WEBGL) {
+      myp5.translate(-myp5.width/2, -myp5.height/2);
+    }
+    myp5.stroke('black');
+    myp5.strokeWeight(4);
+    myp5.fill('red');
+    myp5.rect(10, 10, 15, 15);
+    myp5.fill('blue');
+    myp5.rect(0, 0, 15, 15);
+    myp5.loadPixels();
+    return [...myp5.pixels];
+  };
+  assert.deepEqual(getColors(myp5.P2D), getColors(myp5.WEBGL));
 });
 ```
 
@@ -103,22 +103,22 @@ If a feature is WebGL-only, rather than comparing pixels to 2D mode, we often ch
 
 ```js
 test('color interpolation', function() {
-  const renderer = myp5.createCanvas(256, 256, myp5.WEBGL);
-  // upper color: (200, 0, 0, 255);
-  // lower color: (0, 0, 200, 255);
-  // expected center color: (100, 0, 100, 255);
-  myp5.beginShape();
-  myp5.fill(200, 0, 0);
-  myp5.vertex(-128, -128);
-  myp5.fill(200, 0, 0);
-  myp5.vertex(128, -128);
-  myp5.fill(0, 0, 200);
-  myp5.vertex(128, 128);
-  myp5.fill(0, 0, 200);
-  myp5.vertex(-128, 128);
-  myp5.endShape(myp5.CLOSE);
-  assert.equal(renderer._useVertexColor, true);
-  assert.deepEqual(myp5.get(128, 128), [100, 0, 100, 255]);
+  const renderer = myp5.createCanvas(256, 256, myp5.WEBGL);
+  // upper color: (200, 0, 0, 255);
+  // lower color: (0, 0, 200, 255);
+  // expected center color: (100, 0, 100, 255);
+  myp5.beginShape();
+  myp5.fill(200, 0, 0);
+  myp5.vertex(-128, -128);
+  myp5.fill(200, 0, 0);
+  myp5.vertex(128, -128);
+  myp5.fill(0, 0, 200);
+  myp5.vertex(128, 128);
+  myp5.fill(0, 0, 200);
+  myp5.vertex(-128, 128);
+  myp5.endShape(myp5.CLOSE);
+  assert.equal(renderer._useVertexColor, true);
+  assert.deepEqual(myp5.get(128, 128), [100, 0, 100, 255]);
 });
 ```
 
@@ -138,20 +138,20 @@ let avgFrameRates = [];
 let frameRateSum = 0;
 const numSamples = 30;
 function setup() {
-  // ...
-  frameRateP = createP();
-  frameRateP.position(0, 0);
+  // ...
+  frameRateP = createP();
+  frameRateP.position(0, 0);
 }
 function draw() {
-  // ...
-  const rate = frameRate() / numSamples;
-  avgFrameRates.push(rate);
-  frameRateSum += rate;
-  if (avgFrameRates.length > numSamples) {
-    frameRateSum -= avgFrameRates.shift();
-  }
- 
-  frameRateP.html(round(frameRateSum) + ' avg fps');
+  // ...
+  const rate = frameRate() / numSamples;
+  avgFrameRates.push(rate);
+  frameRateSum += rate;
+  if (avgFrameRates.length > numSamples) {
+    frameRateSum -= avgFrameRates.shift();
+  }
+
+  frameRateP.html(round(frameRateSum) + ' avg fps');
 }
 ```
 
diff --git a/contributor_docs/zh/custom_p5_build.md b/contributor_docs/zh/archive/custom_p5_build.md
similarity index 100%
rename from contributor_docs/zh/custom_p5_build.md
rename to contributor_docs/zh/archive/custom_p5_build.md
diff --git a/contributor_docs/zh/internationalization.md b/contributor_docs/zh/archive/internationalization.md
similarity index 100%
rename from contributor_docs/zh/internationalization.md
rename to contributor_docs/zh/archive/internationalization.md
diff --git a/contributor_docs/zh/issue_labels.md b/contributor_docs/zh/archive/issue_labels.md
similarity index 100%
rename from contributor_docs/zh/issue_labels.md
rename to contributor_docs/zh/archive/issue_labels.md
diff --git a/contributor_docs/zh/supported_browsers.md b/contributor_docs/zh/archive/supported_browsers.md
similarity index 100%
rename from contributor_docs/zh/supported_browsers.md
rename to contributor_docs/zh/archive/supported_browsers.md
diff --git a/contributor_docs/zh/contributing_documentation.md b/contributor_docs/zh/contributing_documentation.md
deleted file mode 100644
index 2a4a4ecd39..0000000000
--- a/contributor_docs/zh/contributing_documentation.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# 贡献文档
-
-参考文献对于新手和有经验的程序员来说都是必不可少的。它向那些不太熟悉p5.js的人伸出友好之手以便帮助我们的社区变得更包容、更丰富。它还能帮助我们在测试和编写参考文献时找到代码本身的问题。
-
-有几种方法可以为参考文献做出贡献：
-
-## ☝️ Open issues
-如果您想要开始解决一个关于参考文献的问题，您可以打开开放的问题列表（open issues），并找到标记为“参考文献”（docmentaion）需求的问题。如果您注意到有错别字、缺失或损坏的文档、或者一个令人困惑的函数描述，可以[为它创建一个 issue](https://github.com/processing/p5.js/issues)！请附上需要修复的页面的链接，以便我们可以很容易地找到。
-
-## 🗯 为参考资料作出贡献
-仔细阅读[参考资料](http://p5js.org/reference/)，看看是否有错别字、损坏或混乱的文档。如果是简单的修复，您可以直接修改。如果是需要讨论的问题，请创建一个 [issue](https://github.com/processing/p5.js/issues/new)。
-* 这里是[为初次使用p5.js代码库进行设置](./README.md)的说明。
-* 参考文献是根据源代码中的内联文档（在`src/`文件夹中找到）建立的。
-* 这里是关于[如何更新或添加内联文档和例子](./inline_documentation.md)的信息。
-* 如果你发现[西班牙语文档](http://p5js.org/es)有错误，在[这里](https://github.com/processing/p5.js-website#internationalization-i18n-and-structure)能找到更新指示。
-* 社区维护的Typescript定义在[此处](https://github.com/p5-types/p5.ts)。
-
-## ✨ 制作示例
-虽然参考资料中通常列出函数非常简单的代码片段，但更长、更复杂的示例也是有用的。
-* 目前我们正在努力将[processing示例页](https://processing.org/examples/)中的示例转移到[p5.js示例页](http://p5js.org/examples)。如果您愿意帮忙，请看说明[这里](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md)。
-* 或者，您可以创建你自己的示例，并在您喜欢的地方独立发布。如果您想要在网上分享它们，请标记[@p5xjs](https://twitter.com/p5xjs)或发送电子邮件到[hello@p5js.org](mailto:hello@p5js.org)让我们知道，我们将广泛分享! 这个[嵌入p5.js指南](https://github.com/processing/p5.js/wiki/Embedding-p5.js)可能对您在网上发布你的示例很有用。
-* 如果您发现p5.js中的bug，请在[issues](https://github.com/processing/p5.js/issues)中记录下来。
-
-## 👯 制作教程
-* 如果您是p5.js的新手，您可以从这里开始。试着自己做一些东西，然后做一个教程来教别人做。
-* 目前，我们正在努力将教程从[processing教程页](https://processing.org/tutorials)转移到[p5.js学习页](http://p5js.org/learn)。如果您愿意帮忙，请看[这个](https://p5js.org/learn/tutorial-guide.html)教程制作教程。
-* 我们也欢迎不同主题的教程。你可以在任何地方，以任何格式发布这些教程。如果您想要在网上分享这些教程，请给[@p5xjs](https://twitter.com/p5xjs)打上标签，或者给[hello@p5js.org](mailto:hello@p5js.org)发邮件，让我们了解，以便我们会广泛地分享这些教程。我们非常鼓励针对特定受众或使用案例创建的教程（例如：记者、维权人士、诗人、孩子、老人、梦想家、不同语言的p5等等）。我们喜欢思考：还有谁没有在p5社区中感受到欢迎的氛围又或者没能融入p5社区？我们能否将学习作为对他们的一种邀请？我们应该用什么语言和听众们沟通，让他们感到被力解？请自由尝试您的形式。可以参考[Sharon De La Cruz关于代码俚语的演讲](https://www.youtube.com/watch?v=CFT6w9NKfCs)获得灵感。
-* 如果您发现p5.js中的bug，请在[issues](https://github.com/processing/p5.js/issues)中记录下来。
-
-## 👉 开始
-* 阅读[p5.js社区声明](http://p5js.org/community/)
-* 可选：查看[贡献者文档](./README.md)以了解版本库的概况，并学习如何构建代码(如果与您相关的话)。
-* 所有的讨论都发生在github issue上，所以您不需要加入slack/gitter/等等频道。
-* 在readme.md文件中把您的名字加入[贡献者名单](https://github.com/processing/p5.js#contributors)! 说明[在此](https://github.com/processing/p5.js/issues/2309)。
-* 当然，如果您更喜欢修复bug，可以随时点进任何一个[issue](https://github.com/processing/p5.js/issues)!
-
-欢迎！我们很高兴你在这里！
-❤️ p5.js社区
diff --git a/contributor_docs/zh/contributing_to_the_p5.js_reference.md b/contributor_docs/zh/contributing_to_the_p5.js_reference.md
index 58a95570b2..7d4a819135 100644
--- a/contributor_docs/zh/contributing_to_the_p5.js_reference.md
+++ b/contributor_docs/zh/contributing_to_the_p5.js_reference.md
@@ -11,57 +11,57 @@
 
 ```
 /**
- * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
- * in creative coding. The values returned oscillate between -1 and 1 as the
- * input angle increases. `sin()` takes into account the current
- * <a href="#/p5/angleMode">angleMode</a>.
- *
- * @method sin
- * @param  {Number} angle the angle.
- * @return {Number} sine of the angle.
- *
- * @example
- * <div>
- * <code>
- * function draw() {
- *   background(200);
- *
- *   let t = frameCount;
- *   let x = 50;
- *   let y = 30 * sin(t * 0.05) + 50;
- *   line(x, 50, x, y);
- *   circle(x, y, 20);
- *
- *   describe('A white ball on a string oscillates up and down.');
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * function draw() {
- *   let x = frameCount;
- *   let y = 30 * sin(x * 0.1) + 50;
- *   point(x, y);
- *
- *   describe('A series of black dots form a wave pattern.');
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * function draw() {
- *   let t = frameCount;
- *   let x = 30 * cos(t * 0.1) + 50;
- *   let y = 10 * sin(t * 0.2) + 50;
- *   point(x, y);
- *
- *   describe('A series of black dots form an infinity symbol.');
- * }
- * </code>
- * </div>
- */
+ * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
+ * in creative coding. The values returned oscillate between -1 and 1 as the
+ * input angle increases. `sin()` takes into account the current
+ * <a href="#/p5/angleMode">angleMode</a>.
+ *
+ * @method sin
+ * @param  {Number} angle the angle.
+ * @return {Number} sine of the angle.
+ *
+ * @example
+ * <div>
+ * <code>
+ * function draw() {
+ *   background(200);
+ *
+ *   let t = frameCount;
+ *   let x = 50;
+ *   let y = 30 * sin(t * 0.05) + 50;
+ *   line(x, 50, x, y);
+ *   circle(x, y, 20);
+ *
+ *   describe('A white ball on a string oscillates up and down.');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * function draw() {
+ *   let x = frameCount;
+ *   let y = 30 * sin(x * 0.1) + 50;
+ *   point(x, y);
+ *
+ *   describe('A series of black dots form a wave pattern.');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * function draw() {
+ *   let t = frameCount;
+ *   let x = 30 * cos(t * 0.1) + 50;
+ *   let y = 10 * sin(t * 0.2) + 50;
+ *   point(x, y);
+ *
+ *   describe('A series of black dots form an infinity symbol.');
+ * }
+ * </code>
+ * </div>
+ */
 ```
 
 实际定义函数的 JavaScript 代码往往紧随其后。参考注释始终以 `/**` 开始并以 `*/` 结束，两者之间的每一行都以 `*` 开头。
@@ -74,18 +74,18 @@
 
 ```
 /**
- * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
- * in creative coding. The values returned oscillate between -1 and 1 as the
- * input angle increases. `sin()` takes into account the current
- * <a href="#/p5/angleMode">angleMode</a>.
+ * Calculates the sine of an angle. `sin()` is useful for many geometric tasks
+ * in creative coding. The values returned oscillate between -1 and 1 as the
+ * input angle increases. `sin()` takes into account the current
+ * <a href="#/p5/angleMode">angleMode</a>.
 ```
 
 在注释的顶部是函数的文本描述。此描述可以包含 markdown 语法和 HTML。描述应该简洁明了，描述函数的功能，并在必要时描述一些有关其性能或反常行为的细节。
 
 ```
  * @method sin
- * @param  {Number} angle  the angle.
- * @return {Number} sine of the angle.
+ * @param  {Number} angle  the angle.
+ * @return {Number} sine of the angle.
 ```
 
 函数通常具有上述三个部分，每个部分以 `@` 符号开始，后跟以下关键字之一：
@@ -144,18 +144,18 @@
 
 ```
 /**
- * @method background
- * @param {String} colorstring color string, possible formats include: integer
- *                         rgb() or rgba(), percentage rgb() or rgba(),
- *                         3-digit hex, 6-digit hex
- * @param {Number} [a] alpha value
- */
+ * @method background
+ * @param {String} colorstring color string, possible formats include: integer
+ *                         rgb() or rgba(), percentage rgb() or rgba(),
+ *                         3-digit hex, 6-digit hex
+ * @param {Number} [a] alpha value
+ */
 
 /**
- * @method background
- * @param {Number} gray specifies a value between white and black
- * @param {Number} [a]
- */
+ * @method background
+ * @param {Number} gray specifies a value between white and black
+ * @param {Number} [a]
+ */
 ```
 
 
@@ -170,27 +170,27 @@
 
 ```
 /**
- * The system variable mouseX always contains the current horizontal
- * position of the mouse, relative to (0, 0) of the canvas. The value at
- * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
- * If touch is used instead of mouse input, mouseX will hold the x value
- * of the most recent touch point.
- *
- * @property {Number} mouseX
- * @readOnly
- *
- * @example
- * <div>
- * <code>
- * // Move the mouse across the canvas
- * function draw() {
- *   background(244, 248, 252);
- *   line(mouseX, 0, mouseX, 100);
- *   describe('horizontal black line moves left and right with mouse x-position');
- * }
- * </code>
- * </div>
- */
+ * The system variable mouseX always contains the current horizontal
+ * position of the mouse, relative to (0, 0) of the canvas. The value at
+ * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.
+ * If touch is used instead of mouse input, mouseX will hold the x value
+ * of the most recent touch point.
+ *
+ * @property {Number} mouseX
+ * @readOnly
+ *
+ * @example
+ * <div>
+ * <code>
+ * // Move the mouse across the canvas
+ * function draw() {
+ *   background(244, 248, 252);
+ *   line(mouseX, 0, mouseX, 100);
+ *   describe('horizontal black line moves left and right with mouse x-position');
+ * }
+ * </code>
+ * </div>
+ */
 ```
 
 块的开始包含变量的描述（在该例子中是 `mouseX`）。为了定义变量的名称，我们使用 `@property` 而不是 `@method`。`@property` 的语法与 `@param` 类似，用于定义类型及其名称。大多数 p5.js 变量都带有 `@readonly` 标签，用于内部指示该值不应由库用户直接覆盖。
@@ -206,20 +206,20 @@
 
 ```
  * @example
- * <div>
- * <code>
- * const c = color(255, 204, 0);
- * fill(c);
- * rect(15, 20, 35, 60);
- * // Sets 'redValue' to 255.
- * const redValue = red(c);
- * fill(redValue, 0, 0);
- * rect(50, 20, 35, 60);
- * describe(
- *   'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
- * );
- * </code>
- * </div>
+ * <div>
+ * <code>
+ * const c = color(255, 204, 0);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * // Sets 'redValue' to 255.
+ * const redValue = red(c);
+ * fill(redValue, 0, 0);
+ * rect(50, 20, 35, 60);
+ * describe(
+ *   'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
+ * );
+ * </code>
+ * </div>
 ```
 
 在 `@example` 标签之后，你应该开始一个 HTML `<div>` 标签，后跟一个 `<code>` 标签。在开放和闭合的 `<code>` 标签之间，你将插入相关示例代码。编写参考示例代码的基本原则是保持简单和简洁。示例应该有意义，并解释功能的工作原理，而不会太复杂。示例的画布应该是 100x100 像素，如果没有包含 `setup()` 函数，例如上面的示例，则代码将自动包装在一个默认的 100x100 像素灰色背景画布中创建的 `setup()` 函数中。我们不会在这里详细讨论示例代码的最佳实践和代码风格；请参阅参考样式指南。
@@ -234,7 +234,7 @@
 * describe('An ellipse created using an arc with its top right open.');
 * </code>
 * </div>
-* 
+*
 * <div>
 * <code>
 * arc(50, 50, 80, 80, 0, PI, OPEN);
@@ -261,8 +261,8 @@
 * @example
 * <div class='norender notest'><code>
 * function setup() {
-*   let c = createCanvas(100, 100);
-*   saveCanvas(c, 'myCanvas', 'jpg');
+*   let c = createCanvas(100, 100);
+*   saveCanvas(c, 'myCanvas', 'jpg');
 * }
 * </code></div>
 ```
@@ -280,26 +280,26 @@
 * <code>
 * let xoff = 0.0;
 * function draw() {
-*   background(204);
-*   xoff = xoff + 0.01;
-*   let n = noise(xoff) * width;
-*   line(n, 0, n, height);
-*   describe('A vertical line moves randomly from left to right.');
+*   background(204);
+*   xoff = xoff + 0.01;
+*   let n = noise(xoff) * width;
+*   line(n, 0, n, height);
+*   describe('A vertical line moves randomly from left to right.');
 * }
 * </code>
 * </div>
-* 
+*
 * <div>
 * <code>
 * let noiseScale = 0.02;
 * function draw() {
-*   background(0);
-*   for (let x = 0; x < width; x += 1) {
-*     let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
-*     stroke(noiseVal*255);
-*     line(x, mouseY + noiseVal * 80, x, height);
-*   }
-*   describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
+*   background(0);
+*   for (let x = 0; x < width; x += 1) {
+*     let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
+*     stroke(noiseVal*255);
+*     line(x, mouseY + noiseVal * 80, x, height);
+*   }
+*   describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
 * }
 * </code>
 * </div>
@@ -318,11 +318,11 @@
 
 ```
 /**
- * _start calls preload() setup() and draw()
- * 
- * @method _start
- * @private
- */
+ * _start calls preload() setup() and draw()
+ *
+ * @method _start
+ * @private
+ */
 p5.prototype._start = function () {
 ```
 
@@ -354,31 +354,31 @@ p5.js 遵循的约定是 `src/` 文件夹中的每个子文件夹将是一个 `@
 
 ```
 /**
- * A class to describe a color. Each `p5.Color` object stores the color mode
- * and level maxes that were active during its construction. These values are
- * used to interpret the arguments passed to the object's constructor. They
- * also determine output formatting such as when
- * <a href="#/p5/saturation">saturation()</a> is called.
- *
- * Color is stored internally as an array of ideal RGBA values in floating
- * point form, normalized from 0 to 1. These values are used to calculate the
- * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
- * are sent to the renderer.
- *
- * When different color representations are calculated, the results are cached
- * for performance. These values are normalized, floating-point numbers.
- *
- * <a href="#/p5/color">color()</a> is the recommended way to create an instance
- * of this class.
- *
- * @class p5.Color
- * @constructor
- * @param {p5} [pInst]                  pointer to p5 instance.
- *
- * @param {Number[]|String} vals        an array containing the color values
- *                                      for red, green, blue and alpha channel
- *                                      or CSS color.
- */
+ * A class to describe a color. Each `p5.Color` object stores the color mode
+ * and level maxes that were active during its construction. These values are
+ * used to interpret the arguments passed to the object's constructor. They
+ * also determine output formatting such as when
+ * <a href="#/p5/saturation">saturation()</a> is called.
+ *
+ * Color is stored internally as an array of ideal RGBA values in floating
+ * point form, normalized from 0 to 1. These values are used to calculate the
+ * closest screen colors, which are RGBA levels from 0 to 255. Screen colors
+ * are sent to the renderer.
+ *
+ * When different color representations are calculated, the results are cached
+ * for performance. These values are normalized, floating-point numbers.
+ *
+ * <a href="#/p5/color">color()</a> is the recommended way to create an instance
+ * of this class.
+ *
+ * @class p5.Color
+ * @constructor
+ * @param {p5} [pInst]                  pointer to p5 instance.
+ *
+ * @param {Number[]|String} vals        an array containing the color values
+ *                                      for red, green, blue and alpha channel
+ *                                      or CSS color.
+ */
 ```
 
 ## 生成和预览参考文献
diff --git a/contributor_docs/zh/design_principles.md b/contributor_docs/zh/design_principles.md
deleted file mode 100644
index 1ff5a8b714..0000000000
--- a/contributor_docs/zh/design_principles.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# p5.js的设计原则
-
-- **面向初学者** p5.js的API旨在对初学者友好，为使用最新的HTML5/canvas/DOM API创建交互式和可视化的网页内容提供了低门槛的方式。
-
-- **教育性** p5.js专注于支持教育使用的API和课程，包括完整的API参考和支持示例，以及教程和样例课程大纲，按照明确而引人入胜的顺序介绍核心创意编码原则。
-
-- **JavaScript及其社区** p5.js旨在通过模拟正确的JavaScript设计模式和用法，使Web开发实践对初学者更加易于理解，同时在必要时进行抽象化。作为一个开源库，p5.js还将广大的JavaScript社区纳入其创作、文档编写和传播的范围。
-
-- **Processing及其社区** p5.js是对Processing语言及其社区的直接回应，旨在使从Processing到JavaScript的过渡变得简单明了。支持Processing的API和社区是p5.js的首要任务，同时还扩展到包括在Web上进行创意编码的新可能性，并采用类似Processing的方法将该API暴露给初学者。
-
diff --git a/contributor_docs/zh/organization.md b/contributor_docs/zh/organization.md
deleted file mode 100644
index 2991b0c074..0000000000
--- a/contributor_docs/zh/organization.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# 组织贡献
-保持仓库的组织有助于清楚地了解哪些讨论和任务最为重要。这有助于从维护者到新的贡献者在不感到不知所措的情况下浏览仓库。为了帮助实现这一点，我们有一套指导方针，指导如何组织问题、工作和拉取请求。
-
-帮助组织工作是一种很好的贡献方式。如果一个错误报告缺少例如示例代码之类的信息，请随时参与并询问缺失的信息。如果一个分配了负责人的问题在60天内没有任何活动，对该问题进行评论以与负责人核实是否仍然愿意解决该问题可能会有所帮助。无论何时参与组织任务，请保持友善，并始终牢记社区准则。
-
-# 组织指导方针
-
-## 问题
-- **所有问题都应使用相关的问题模板**
-- **所有错误报告都应包含示例代码**
-  - 这可以是在问题正文中发布的代码，也可以是指向代码在线示例的链接，最好是在[在线编辑器](https://editor.p5js.org)中。
-- **所有问题都应具有至少2个标签**
-  - 这使得浏览问题变得更加容易。
-  - 根据使用的问题模板，很多情况下将自动设置区域标签。您可以根据需要添加其他标签。
-- **问题的分配采用先到先得的原则**
-  - 如果一个错误已经被复现，或者社区已经同意了某个功能请求/改进，那么该问题将可供分配。当这种情况发生时，第一个请求分配的贡献者可以说类似于“我想解决这个问题！”的话将被分配。
-  - 如果尚不清楚错误是否可以重现或功能请求/改进是否已经达成共识，请不要请求分配到一个问题。
-
-## 拉取请求
-- **所有拉取请求都应与一个问题相关联**
-  - 如果你想修复一个错误或添加一个功能，请首先打开一个问题，以便社区可以讨论它。
-  - 如果没有关联的问题就打开了拉取请求，请评论并要求贡献者打开一个问题。
-
-
-
-# 决策指南
-p5希望使其决策过程尽可能透明和水平。为此，p5使用非正式的共识寻求模型进行决策。这意味着我们更倾向于在任何决策上达成社区共识。如果这失败了，将进行投票。
-
-**管理人员**有权否决提案。当一个提案与使命/社区准则不一致，或者一个提案对项目来说具有重大的维护或实施挑战时，就可能发生这种情况。
-
-要提出变更，请打开一个问题。如果这是一个重大变更或需要进行重大设计考虑的变更，请在问题中添加“讨论”标签。感兴趣的社区成员将参与讨论。在经过了一段相当长的时间（除非紧急情况，一般为30天）之后，维护者将尝试确定是否存在重大兴趣以及是否达成了对最佳方法的共识。此时，维护者将要求进行投票、关闭问题或接受拉取请求。在讨论结束之前提交的拉取请求将被忽略。
-
-> 将来将自动化上述的组织和决策过程将是很好的事情。
-
-> 如果你有关于如何使用机器人或GitHub操作自动化上述任何内容的想法，请随时提出一个带有你的建议的问题！
-
-
-
-# 管理人员
-
-管理人员是对项目的某些领域特别参与、熟悉或反应迅速的贡献者。他们的角色是帮助为p5.js的其他贡献者提供背景和指导。如果您对贡献到特定领域有疑问，可以在问题或拉取请求中标记列出的管理人员。他们也可能对功能请求发表意见，并在社区的参与下指导该领域的整体方向。
-
-任何感兴趣的人都可以自愿成为管理人员！没有专业知识的特定要求，只要有积极学习和参与的兴趣。如果您熟悉这个项目的一个或多个部分，请打开一个问题，自愿担任管理人员！
-
-一旦添加，管理人员的用户名将保留在[自述文件的管理人员部分](https://github.com/processing/p5.js#stewards)中，直到他们要求被移除。如果一个管理人员在很长一段时间内没有回应，我们可能会联系他们询问他们的状态。你也可以随时休息一下，作为一个管理人员，然后回来！
diff --git a/contributor_docs/zh/repo_structure.md b/contributor_docs/zh/repo_structure.md
deleted file mode 100644
index 49ce6010be..0000000000
--- a/contributor_docs/zh/repo_structure.md
+++ /dev/null
@@ -1,30 +0,0 @@
-我们的代码存在的位置
-
-整个 p5.js 项目包含除了这个仓库之外的一些其他仓库：
-
-- **[p5.js](https://github.com/processing/p5.js)**：这个仓库包含了 p5.js 库的源代码。[用户面向的 p5.js 参考手册](https://p5js.org/reference/)也是从这个源代码中生成的[JSDoc](https://jsdoc.app/)注释。它由[Qianqian Ye](https://github.com/qianqianye)和一群[管理者](https://github.com/processing/p5.js#stewards)维护。
-- **[p5.js-website](https://github.com/processing/p5.js-website)**：这个仓库包含了[p5.js 网站](http://p5js.org)的大部分代码，不包括参考手册。它由[Qianqian Ye](https://github.com/qianqianye)、[Kenneth Lim](https://github.com/limzykenneth)和一群[管理者](https://github.com/processing/p5.js-website#stewards)维护。
-- **[p5.js-sound](https://github.com/processing/p5.js-sound)**：这个仓库包含了 p5.sound.js 库，由[Jason Sigal](https://github.com/therewasaguy)维护。
-- **[p5.js-web-editor](https://github.com/processing/p5.js-web-editor)**：这个仓库包含了[p5.js web 编辑器](https://editor.p5js.org)的源代码，由[Cassie Tarakajian](https://github.com/catarak)维护。
-- 其他未在上述列表中列出的附加库通常有自己的仓库和维护者，并且不直接由 p5.js 项目维护。
-
-## 仓库文件结构
-
-这里有很多文件！这里有一个简要的概述。可能会有些混乱，但您不需要理解仓库中的每个文件就可以开始。我们建议从一个区域开始（例如，修复一些内联文档），然后逐步扩大到探索更多。Luisa Pereira的[Looking Inside p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation)还提供了一个视频导览，介绍了p5.js工作流中使用的工具和文件。
-
-- 📁`contributor_docs/` 包含解释贡献者实践和原则的文件
-- 📁`docs/` 实际上并不包含文档！相反，它包含用于*生成* [在线参考手册](https://p5js.org/reference/) 的代码。
-- 📁`lib/` 包含一个空的示例和 p5.sound 附加库，该库定期通过从[p5.js-sound 仓库](https://github.com/processing/p5.js-sound)拉取请求进行更新。这也是编译为
-
-单个文件的 p5.js 库在使用 [Grunt](https://gruntjs.com/) 进行编译后放置的位置。在您提交拉取请求时，它不需要被检入 GitHub 仓库。
-- 📁`src/` 包含库的所有源代码，按主题组织成单独的模块。如果您正在更改 p5.js，则会在这里工作。大多数文件夹内都有自己的 readme.md 文件，以帮助您找到所需的内容。
-- 📁`tasks/` 包含执行与构建、部署和发布 p5.js 的新版本相关的自动化任务的脚本。
-- 📁`tests/` 包含单元测试，确保在进行更改时库继续正确运行。
-- 📁`utils/` 可能包含对仓库有用的其他文件，但通常您可以忽略此目录。
-
-## 其他信息
-- 📁[`contributor_docs/`](https://github.com/processing/p5.js/tree/main/contributor_docs) 文件夹中还有其他文件，您可以进行探索。它们与贡献到该项目的特定领域有关，无论是技术还是非技术性质。
-- [Looking Inside p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation) 是一个介绍 p5.js 开发工作流中使用的工具和文件的视频导览。
-- [The Coding Train](https://youtu.be/Rr3vLyP1Ods) 的[这个视频](https://youtu.be/Rr3vLyP1Ods)：train::rainbow: 提供了关于开始进行技术贡献到 p5.js 的概述。
-- p5.js [Docker 镜像](https://github.com/toolness/p5.js-docker) 可以在 [Docker](https://www.docker.com/) 中挂载并用于开发 p5.js，而无需手动安装像 [Node](https://nodejs.org/) 这样的要求，也不会以任何方式影响主机操作系统，除了安装 Docker 之外。
-- p5.js 库的构建过程会生成一个[JSON 数据文件](https://p5js.org/reference/data.json)，其中包含 p5.js 的公共 API，并可用于自动化工具，例如在编辑器中自动完成 p5.js 方法。该文件托管在 p5.js 网站上，但它不作为仓库的一部分包含在内。