diff --git a/.all-contributorsrc b/.all-contributorsrc
index 4f15318e69..5dc4f74288 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -5427,6 +5427,64 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "suhani6904",
+      "name": "suhani6904",
+      "avatar_url": "https://avatars.githubusercontent.com/u/113185177?v=4",
+      "profile": "https://github.com/suhani6904",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "dexterco",
+      "name": "Nabeel (Dexter)",
+      "avatar_url": "https://avatars.githubusercontent.com/u/63152089?v=4",
+      "profile": "https://github.com/dexterco",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "umangutkarsh",
+      "name": "Umang Utkarsh",
+      "avatar_url": "https://avatars.githubusercontent.com/u/95426993?v=4",
+      "profile": "https://github.com/umangutkarsh",
+      "contributions": [
+        "doc",
+        "translation"
+      ]
+    },
+    {
+      "login": "aditya123473892",
+      "name": "aditya123473892",
+      "avatar_url": "https://avatars.githubusercontent.com/u/117269123?v=4",
+      "profile": "https://github.com/aditya123473892",
+      "contributions": [
+        "code",
+        "bug",
+        "doc"
+      ]
+    },
+    {
+      "login": "haarsh157",
+      "name": "Harsh Range",
+      "avatar_url": "https://avatars.githubusercontent.com/u/115213858?v=4",
+      "profile": "https://github.com/haarsh157",
+      "contributions": [
+        "code",
+        "bug"
+      ]
+    },
+    {
+      "login": "sudhanshuv1",
+      "name": "Sudhanshu Tiwari",
+      "avatar_url": "https://avatars.githubusercontent.com/u/148856416?v=4",
+      "profile": "https://github.com/sudhanshuv1",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoType": "github",
diff --git a/README.md b/README.md
index 993fb077fc..d508aae667 100644
--- a/README.md
+++ b/README.md
@@ -927,6 +927,14 @@ We recognize all types of contributions. This project follows the [all-contribut
     </tr>
     <tr>
       <td align="center" valign="top" width="16.66%"><a href="https://github.com/vishwassrivastava"><img src="https://avatars.githubusercontent.com/u/84739867?v=4?s=120" width="120px;" alt="Vishwas Srivastava"/><br /><sub><b>Vishwas Srivastava</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=vishwassrivastava" title="Code">💻</a></td>
+      <td align="center" valign="top" width="16.66%"><a href="https://github.com/suhani6904"><img src="https://avatars.githubusercontent.com/u/113185177?v=4?s=120" width="120px;" alt="suhani6904"/><br /><sub><b>suhani6904</b></sub></a><br /><a href="#translation-suhani6904" title="Translation">🌍</a></td>
+      <td align="center" valign="top" width="16.66%"><a href="https://github.com/dexterco"><img src="https://avatars.githubusercontent.com/u/63152089?v=4?s=120" width="120px;" alt="Nabeel (Dexter)"/><br /><sub><b>Nabeel (Dexter)</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=dexterco" title="Code">💻</a></td>
+      <td align="center" valign="top" width="16.66%"><a href="https://github.com/umangutkarsh"><img src="https://avatars.githubusercontent.com/u/95426993?v=4?s=120" width="120px;" alt="Umang Utkarsh"/><br /><sub><b>Umang Utkarsh</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=umangutkarsh" title="Documentation">📖</a> <a href="#translation-umangutkarsh" title="Translation">🌍</a></td>
+      <td align="center" valign="top" width="16.66%"><a href="https://github.com/aditya123473892"><img src="https://avatars.githubusercontent.com/u/117269123?v=4?s=120" width="120px;" alt="aditya123473892"/><br /><sub><b>aditya123473892</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=aditya123473892" title="Code">💻</a> <a href="https://github.com/processing/p5.js/issues?q=author%3Aaditya123473892" title="Bug reports">🐛</a> <a href="https://github.com/processing/p5.js/commits?author=aditya123473892" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="16.66%"><a href="https://github.com/haarsh157"><img src="https://avatars.githubusercontent.com/u/115213858?v=4?s=120" width="120px;" alt="Harsh Range"/><br /><sub><b>Harsh Range</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=haarsh157" title="Code">💻</a> <a href="https://github.com/processing/p5.js/issues?q=author%3Ahaarsh157" title="Bug reports">🐛</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="16.66%"><a href="https://github.com/sudhanshuv1"><img src="https://avatars.githubusercontent.com/u/148856416?v=4?s=120" width="120px;" alt="Sudhanshu Tiwari"/><br /><sub><b>Sudhanshu Tiwari</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=sudhanshuv1" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>
diff --git a/contributor_docs/README.md b/contributor_docs/README.md
index 4d69c6efdf..52f7849367 100644
--- a/contributor_docs/README.md
+++ b/contributor_docs/README.md
@@ -39,7 +39,7 @@ Most of the time we will stick with this workflow quite strictly and, especially
 **We see contributing to p5.js as a learning opportunity** and we don't measure sucess by only looking at the volume of contributions we received. There is no time limit on how long it takes you to complete a contribution, so take your time and work at your own pace (we may check in after a long period of inactivity). Ask for help from any of the stewards or maintainers if you need them and we'll try our best to support you.
 
 ## Non-source code contribution
-There are many more ways to contribute to p5.js through non-source code contribution than can be exhaustively listed here, some of the ways may also involve working with some of the p5.js repositories (such as adding example, writing tutorial for the website, etc). Depending on what the planned contribution is, we may be able to support you in different ways so do reach out to us via any channel available to you (email, social media, [Discourse forum](https://discourse.processing.org/c/p5js/10), Discord, etc).
+There are many more ways to contribute to p5.js through non-source code contribution than can be exhaustively listed here, some of the ways may also involve working with some of the p5.js repositories (such as adding examples, writing tutorials for the website, etc.). Depending on what the planned contribution is, we may be able to support you in different ways so do reach out to us via any channel available to you (email, social media, [Discourse forum](https://discourse.processing.org/c/p5js/10), Discord, etc).
 
 ## [Stewards and maintainers](./steward_guidelines.md)
 For information related to area stewards or general maintenance of p5.js GitHub repository, please check out the [steward guidelines](./steward_guidelines.md).
diff --git a/contributor_docs/contributor_guidelines.md b/contributor_docs/contributor_guidelines.md
index 600e1f5cb6..a51f93103a 100644
--- a/contributor_docs/contributor_guidelines.md
+++ b/contributor_docs/contributor_guidelines.md
@@ -3,7 +3,7 @@ Welcome to the contributor guidelines! This document is for new contributors loo
 
 If you are looking to contribute outside of the p5.js repositories (writing tutorials, planning classes, organizing events), please have a look at the other relevant pages instead. Stewards or maintainers may find the [steward guidelines](./steward_guidelines.md) more helpful regarding reviewing issues and pull requests.
 
-This is a fairly long and comprehensive document but we will try to deliniate all steps and points as clearly as possible. Do utilize the table of contents, the browser search functionality (`Ctrl + f` or `Cmd + f`) to find sections relevant to you. Feel free to skip sections if they are not relevant to your planned contributions as well.
+This is a fairly long and comprehensive document but we will try to delineate all steps and points as clearly as possible. Do utilize the table of contents, and the browser search functionality (`Ctrl + f` or `Cmd + f`) to find sections relevant to you. Feel free to skip sections if they are not relevant to your planned contributions as well.
 
 # Table of Contents
 - [All about issues](#all-about-issues)
@@ -15,7 +15,7 @@ This is a fairly long and comprehensive document but we will try to deliniate al
 		- [Discussion](#discussion)
 - [Working on p5.js codebase](#working-on-p5js-codebase)
 	- [Quick Get Started For Developers](#quick-get-started-for-developers)
-	- [Using the Github edit functionality](#using-the-github-edit-functionality)
+	- [Using the GitHub edit functionality](#using-the-github-edit-functionality)
 	- [Forking p5.js and working from your fork](#forking-p5js-and-working-from-your-fork)
 	- [Codebase breakdown](#codebase-breakdown)
 	- [Build setup](#build-setup)
@@ -37,51 +37,51 @@ This is a fairly long and comprehensive document but we will try to deliniate al
 # All about issues
 The majority of the activity on p5.js' GitHub repositories (repo for short) happens in issues and issues will most likely be the place to start your contribution process as well.
 
-## What are issues?
-Issue is the generic name for a post on GitHub that aims to describe, well, an issue. This "issue" can be a bug report, a request to add new feature, a discussion, a question, an announcement, or anything that works as a post. Comments can be added below each issue by anyone with a GitHub account, including bots! It is the place where contributors dicuss topics related to the development of the project in the repo.
+## What are the issues?
+Issue is the generic name for a post on GitHub that aims to describe, well, an issue. This "issue" can be a bug report, a request to add a new feature, a discussion, a question, an announcement, or anything that works as a post. Comments can be added below each issue by anyone with a GitHub account, including bots! It is the place where contributors discuss topics related to the development of the project in the repo.
 
-While an issue can be opened for a wide variety of reasons, for p5.js' repos we usually only use issues to discuss p5.js source code development related topics. Topics such as debugging your own code, inviting collaborators to your project, or other unrelated topics should be discuss either on the [forum](https://discourse.processing.com) or on other platforms.
+While an issue can be opened for a wide variety of reasons, for p5.js' repos we usually only use issues to discuss p5.js source code development-related topics. Topics such as debugging your own code, inviting collaborators to your project, or other unrelated topics should be discussed either on the [forum](https://discourse.processing.com) or on other platforms.
 
-We have created easy to use issue templates to aid you in deciding whether a topic should be a GitHub issue or it should be posted somewhere else!
+We have created easy-to-use issue templates to aid you in deciding whether a topic should be a GitHub issue or it should be posted somewhere else!
 
 ## Issue templates
-p5.js' issue templates not only makes it easier for stewards and maintainers to understand and review issues, it also makes it simpler for you to file the relevant issue and receive a reply faster. Although they are called templates, from your perspective, it will just be like filling in a simple form where all the different fields of the form are the potentially important information that issue reviewers will need to properly diagnose your issue.
+p5.js' issue templates not only make it easier for stewards and maintainers to understand and review issues, it also make it simpler for you to file the relevant issue and receive a reply faster. Although they are called templates, from your perspective, it will just be like filling in a simple form where all the different fields of the form are the potentially important information that issue reviewers will need to properly diagnose your issue.
 
-To file a new issue, simply go to the "Issues" tab on the p5.js repo and click on the "New issue" button (usually in green and on the right side). Once you have clicked that, you will be presented with several different options, each of which either correspond to a relevant issue template or redirect you to the relevant place to file your question. You should choose the most relevant option out of all that are presented to ensure your issue can receive the right attention promptly. We will cover the issue templates that applies to p5.js below, for other repos, please check their respective contributor documentation.
+To file a new issue, simply go to the "Issues" tab on the p5.js repo and click on the "New issue" button (usually in green and on the right side). Once you have clicked that, you will be presented with several different options, each of which either correspond to a relevant issue template or redirect you to the relevant place to file your question. You should choose the most relevant option out of all that is presented to ensure your issue can receive the right attention promptly. We will cover the issue templates that apply to p5.js below, for other reports, please check their respective contributor documentation.
 
 ### "Found a bug"
-When you encounter possible incorrect behaviour in p5.js or something not behaving as described in the documentation, this is the template you should use. Please note that if you are trying to debug your own code or figure out why your sketch is not behaving as you expected and you think it may be a problem with your code, you should ask on the [forum](https://discourse.processing.org) instead. If it is later determined your problem did stem from p5.js, you can always open an issue and use this template then.
+When you encounter possible incorrect behavior in p5.js or something not behaving as described in the documentation, this is the template you should use. Please note that if you are trying to debug your own code or figure out why your sketch is not behaving as you expected and you think it may be a problem with your code, you should ask on the [forum](https://discourse.processing.org) instead. If it is later determined your problem did stem from p5.js, you can always open an issue and use this template then.
 
-There are few fields for you to fill in for this template:
+There are a few fields for you to fill in for this template:
 1. "Most appropriate sub-area of p5.js?" - This helps the appropriate stewards identify and respond to your issue. This will automatically tag the issue with the relevant [labels](./issue_labels.md).
 2. "p5.js version" - You can find the p5.js version number in either the `<script>` tag link or on the very first line of the p5.js/p5.min.js file. It will look something similar to `1.4.2` (three numbers separated by periods).
-3. "Web browser and version" - In the address bar, on Chrome enter "chrome://version", on Firefox enter "about:support". On Safari, use "About Safari" under the top bar "Safari" menu item. This helps us isolate different behaviours between browsers.
-4. "Operating System" - You should include OS version number if possible, eg. `macOS 12.5`. Some bugs can stem from OS behaviours as well.
-5. "Steps to reproduce this" - This is arguably the most important information to share. You should list out detailed steps for replicating the bug you are seeing. Sharing a basic sample code that demonstrate the issue can go a long way for anyone to replicate the bug you are facing and start formulating a solution.
+3. "Web browser and version" - In the address bar, on Chrome enter "chrome://version", on Firefox enter "about:support". On Safari, use "About Safari" under the top bar "Safari" menu item. This helps us isolate different behaviors between browsers.
+4. "Operating System" - You should include the OS version number if possible, eg. `macOS 12.5`. Some bugs can stem from OS behaviors as well.
+5. "Steps to reproduce this" - This is arguably the most important information to share. You should list out detailed steps for replicating the bug you are seeing. Sharing a basic sample code that demonstrates the issue can go a long way for anyone to replicate the bug you are facing and start formulating a solution.
 
-As alluded to above, many of the different fields in this template is aimed at replicating the bug. The more information you can provide us about your sketch's environment and how others can replicate what you are seeing, the easier it is for anyone to understand your issue and start looking into solutions. **Be as detailed as you can and avoid generic statements**, eg. do not say "image() function does not work" but rather be more specific such as "image() function does not display the loaded GIF image at the right size". A helpful way to describe the bug you are facing is to describe two things: 1. what you expect the sample code you share to do (expected bahaviour); 2. what the sample code is actually doing (actual behaviour).
+As alluded to above, many of the different fields in this template are aimed at replicating the bug. The more information you can provide us about your sketch's environment and how others can replicate what you are seeing, the easier it is for anyone to understand your issue and start looking into solutions. **Be as detailed as you can and avoid generic statements**, eg. do not say "image() function does not work" but rather be more specific such as "image() function does not display the loaded GIF image at the right size". A helpful way to describe the bug you are facing is to describe two things: 1. what you expect the sample code you share to do (expected behavior); and 2. what the sample code is actually doing (actual behavior).
 
-If you wish to contribute a fix to the bug you just reported, you can indicate so in the description. If you can provide a simple suggestion as to how you would fix the bug you just described, it would be very helpful for the issue reviewer to know how much support you would need to contribute the fix. For bug reports to be accepted for fixing, they must be approved by at least 1 area steward or maintainer before work can begin on a pull request. Any pull requests filed before the issue has been approved for fixing will be closed until approval is given to the issue. **You should not file a pull request (or start working on code changes) without a corresponding issue or before an issue has been approved for implementation**, that is because there is no guarantee that the proposal will be accepted, and you won't have done work that isn't going to be merged in the first place.
+If you wish to contribute a fix to the bug you just reported, you can indicate so in the description. If you can provide a simple suggestion as to how you would fix the bug you just described, it would be very helpful for the issue reviewer to know how much support you would need to contribute to the fix. For bug reports to be accepted for fixing, they must be approved by at least 1 area steward or maintainer before work can begin on a pull request. Any pull requests filed before the issue has been approved for fixing will be closed until approval is given to the issue. **You should not file a pull request (or start working on code changes) without a corresponding issue or before an issue has been approved for implementation**, that is because there is no guarantee that the proposal will be accepted, and you won't have done work that isn't going to be merged in the first place.
 
 ### "Existing Feature Enhancement"
-This template should be used if you wish to modify or otherwise add functionalities to existing features of p5.js (functions, constants, rendering, etc). For example if you want to add a new way to define a color to the `color()` function and other functions that accept colors, this is the template to use.
+This template should be used if you wish to modify or otherwise add functionalities to existing features of p5.js (functions, constants, rendering, etc). For example, if you want to add a new way to define a color to the `color()` function and other functions that accept colors, this is the template to use.
 
 There are a few fields for this template that you should fill in.
-1. "Increasing Access" - This non-optional field is where you insert a statement about how adding the proposed feature enchancement will help p5.js [increase access](./access.md) for people historically marginalized in the field of creative arts or technology. **No proposals will be accepted without this**, although you can fill in "Not sure" and offer other members of the community to provide this argument if they can think of how it addresses accessibility of p5.js.
+1. "Increasing Access" - This non-optional field is where you insert a statement about how adding the proposed feature enhancement will help p5.js [increase access](./access.md) for people historically marginalized in the field of creative arts or technology. **No proposals will be accepted without this**, although you can fill in "Not sure" and offer other members of the community to provide this argument if they can think of how it addresses the accessibility of p5.js.
 2. "Most appropriate sub-area of p5.js?" - This helps the appropriate stewards identify and respond to your issue. This will automatically tag the issue with the relevant [labels](./issue_labels.md).
-3. "Feature enhancement details" - This is where you describe your proposal for the feature enchancement. A good feature enchancement proposal often includes a clear use case: what, when, how, and why this feature enchancement is needed.
+3. "Feature enhancement details" - This is where you describe your proposal for the feature enhancement. A good feature enhancement proposal often includes a clear use case: what, when, how, and why this feature enhancement is needed.
 
-For feature enchancement proposals to be accepted they must be approved by at least 1 area steward or maintainer before work can begin on a pull request. Any pull requests filed before a proposal has been approved will be closed until approval is given to the issue. **You should not file a pull request (or start working on code changes) without a corresponding issue or before an issue has been approved for implementation**, that is because there is no guarantee that the proposal will be accepted, and you won't have done work that isn't going to be merged in the first place.
+For feature enhancement proposals to be accepted they must be approved by at least 1 area steward or maintainer before work can begin on a pull request. Any pull requests filed before a proposal has been approved will be closed until approval is given to the issue. **You should not file a pull request (or start working on code changes) without a corresponding issue or before an issue has been approved for implementation**, that is because there is no guarantee that the proposal will be accepted, and you won't have done work that isn't going to be merged in the first place.
 
 ### "New Feature Request"
-This template should be used if you wish to propose new feature to be added to p5.js. For example to add support for drawing native HTML `<table>` elements with a new `createTable` function. Some proposals may overlap with existing feature enhancement proposals, in these cases you should just choose whichever template you feel is most appropriate.
+This template should be used if you wish to propose a new feature to be added to p5.js. For example to add support for drawing native HTML `<table>` elements with a new `createTable` function. Some proposals may overlap with existing feature enhancement proposals, in these cases you should just choose whichever template you feel is most appropriate.
 
-Accordingly, the template form fields are nearly identical to the field of the "Existing Feature Enchancement". As such please see the [previous section](#existing-feature-enchancement) for details about how to fill in each field.
+Accordingly, the template form fields are nearly identical to the field of the "Existing Feature Enhancement". As such please see the [previous section](#existing-feature-enchancement) for details about how to fill in each field.
 
-For new feature request proposals to be accepted they must be approved by at least 2 area stewards or maintainers before work can begin on a pull request. Any pull requests filed before a proposal has been approved will be closed until approvals are given to the issue. **You should not file a pull request (or start working on code changes) without a corresponding issue or before an issue has been approved for implementation**, that is because there is no guarantee that the proposal will be accepted, and you won't have done work that isn't going to be merged in the first place.
+For new feature request proposals to be accepted, they must be approved by at least 2 area stewards or maintainers before work can begin on a pull request. Any pull requests filed before a proposal has been approved will be closed until approvals are given to the issue. **You should not file a pull request (or start working on code changes) without a corresponding issue or before an issue has been approved for implementation**, that is because there is no guarantee that the proposal will be accepted, and you won't have done work that isn't going to be merged in the first place.
 
 ### "Discussion"
-This template is used when the issue you are filing does not fit into any of the above in any way. This should be relatively rare in practice. For example, a discussion about whether to adopt specific Web API feature in p5.js should be filed as a [new feature request](#new-feature-request) instead; a discussion about adding additional color mode to the various color functions should be filed as a [feature enchancement](#existing-feature-enchancement) instead; an announcement about a local creative coding event that you are organizing should be posted on the forum and/or contacting the Processing Foundation if you are looking for support or publicity; etc.
+This template is used when the issue you are filing does not fit into any of the above in any way. This should be relatively rare in practice. For example, a discussion about whether to adopt a specific Web API feature in p5.js should be filed as a [new feature request](#new-feature-request) instead; a discussion about adding additional color mode to the various color functions should be filed as a [feature enchancement](#existing-feature-enchancement) instead; an announcement about a local creative coding event that you are organizing should be posted on the forum and/or contacting the Processing Foundation if you are looking for support or publicity; etc.
 
 When opening a discussion issue, you can use the "Labels" panel on the side panels to add additional relevant labels so you can signpost your issue to the relevant area. The template itself is just the bare minimum text field so you can just post whatever topic you want to discuss here.
 
@@ -89,12 +89,12 @@ When opening a discussion issue, you can use the "Labels" panel on the side pane
 # Working on p5.js codebase
 Now that your issue has been discussed, an implementation approved by stewards, and you are willing to make the code changes, you are ready to start working on the codebase.
 
-Similarly, if you have come across an issue or joined in discussions of an issue and an implementation has been approved by stewards but neither the original issue author nor other members of the community has indicated they are willing to work on the issue, you may volunteer for submit a contribution here and have the stewards assign the issue to you.
+Similarly, if you have come across an issue or joined in discussions of an issue and implementation has been approved by stewards but neither the original issue author nor other members of the community have indicated they are willing to work on the issue, you may volunteer for submit a contribution here and have the stewards assign the issue to you.
 
-You should not "jump the queue" by filing a PR for an issue that either someone else has indicated willingness to submit a contribution or has already been assigned to someone else. We will always prioritise "first assigned first serve" order for accepting code contribution for an issue, if you file a PR for an issue while someone else is still working on the same issue, your PR will be closed. If you see that it has been a few months since last activity on an issue with an assigned individual, you can check in with them by leaving a polite comment on the issue asking for progress and if they need help with the implementation. We generally allow for fairly long time frame for people to work on their contributions as we understand that most people will often be working on a volunteer basis or it simply takes more time for them to work on the feature; similarly, you should work at your own pace and be confident that there is no hard time limit on how long you can spend working on something. That being said, if you are having trouble with any aspect of your code contribution, do not hesitate to ask for help in the issue, the stewards and maintainers, as well as members of our community, will do their best to guide you!
+You should not "jump the queue" by filing a PR for an issue that either someone else has indicated willingness to submit a contribution or has already been assigned to someone else. We will always prioritize "first assigned first serve" orders for accepting code contributions for an issue, if you file a PR for an issue while someone else is still working on the same issue, your PR will be closed. If you see that it has been a few months since the last activity on an issue with an assigned individual, you can check in with them by leaving a polite comment on the issue asking for progress and if they need help with the implementation. We generally allow for a fairly long time frame for people to work on their contributions as we understand that most people will often be working on a volunteer basis or it simply takes more time for them to work on the feature; similarly, you should work at your own pace and be confident that there is no hard time limit on how long you can spend working on something. That being said, if you are having trouble with any aspect of your code contribution, do not hesitate to ask for help with the issue, the stewards and maintainers, as well as members of our community, will do their best to guide you!
 
 ## Quick Get Started For Developers
-If you want to work/contribute to p5.js'🌸 codebase as a developer, either directly for improving p5.js or for improving it's sub projects like [Friendly Error Systems](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md), you can follow the following steps directly :
+If you want to work/contribute to p5.js'🌸 codebase as a developer, either directly for improving p5.js or for improving it's sub-projects like [Friendly Error Systems](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md), you can follow the following steps directly :
 
 1. Create a fork of p5.js.
 2. Clone your locally created fork.
@@ -103,29 +103,30 @@ If you want to work/contribute to p5.js'🌸 codebase as a developer, either dir
    [More information on Configuring a remote repository for a fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork)
 4. Make sure your machine has [NodeJs](https://nodejs.org/en/download) installed, check it with the        following command : 
    `node -v`
-5. Run : `npm ci`
+5. Run: `npm ci`
 6. Create a git branch of the `main` branch having a descriptive branch name using :
    `git checkout -b [branch_name]`
 7. As you start making changes to the codebase, frequently run : 
     `npm test`
-  (it takes time, but it ensures that existing behaviours are not being broken)
+  (it takes time, but it ensures that existing behaviors are not being broken)
 8. Once it is done, you can commit the changes and create a [Pull Request](https://p5js.org/contributor-docs/#/./contributor_guidelines?id=pull-requests). 
 
-## Using the Github edit functionality
+## Using the GitHub edit functionality
 When viewing a file on the Github web interface, near the top of the content of the file you are viewing will be a pencil icon button. This button is a convenient edit feature provided by Github that simplifies many of the processes we will be covering below and can be used to make quick and simple edits to the file you are viewing.
 
-However, it is not recommended to use this feature other than for very simple changes. One of the main reason for this is that for more complex changes to the source code, it should be built and tested locally before being filed as a PR. Using a local development environment is also often much more fluent for most as compared to the basic editing environment provided by this edit functionality.
+However, it is not recommended to use this feature other than for very simple changes. One of the main reasons for this is that for more complex changes to the source code, it should be built and tested locally before being filed as a PR. Using a local development environment is also often much more fluent for most as compared to the basic editing environment provided by this edit functionality.
 
 ## Forking p5.js and working from your fork
-The first step is to fork the p5.js repository. Forking has a specific meaning in open source but for our purpose it means creating a copy of the repository and storing it in your own GitHub account. To fork a repo, simply click on the "Fork" button near the top of the page and GitHub will make a copy of the repo in your account.
+The first step is to fork the p5.js repository. Forking has a specific meaning in open source but for our purpose, it means creating a copy of the repository and storing it in your own GitHub account. To fork a repo, simply click on the "Fork" button near the top of the page and GitHub will make a copy of the repo in your account.
 
 Working from your fork of the p5.js repository is necessary because you will likely not have direct write access to the official p5.js repository and working on a fork allows you to make changes and later submit them back to the official repository.
 
-At this point you should be minimally familiar with working with the command line, git, node.js, and have a local development environment setup.
+At this point, you should be minimally familiar with working with the command line, git, and node.js, and have a local development environment setup.
 
 Once the fork is created, navigate to your fork's page and copy the git URL by clicking the green "Code" button. It should look something like `https://github.com/limzykenneth/p5.js.git`.
 
-Next go to the command line in your local environment and close this git repository. "Clone" simply means download a copy of the repo to your local machine. Run the following command in a folder where you want to store the p5.js source code folder.
+Next, go to the command line in your local environment and close this git repository. "Clone" simply means download a copy of the repo to your local machine. Run the following command in a folder where you want to store the p5.js source code folder.
+
 
 ```
 git clone [git_url]
@@ -134,47 +135,47 @@ git clone [git_url]
 Replace `[git_url]` with the URL you just copied above. This can take several minutes depending on the speed of your internet connection, a good time to make some coffee! Once the process finished, you can open up the downloaded folder named `p5.js` in your preferred text editor and start looking around.
 
 ## Codebase breakdown
-Some of the key files and folders you will be in the p5.js folder is as below:
+Some of the key files and folders you will be in the p5.js folder are as below:
 
-* `src` - Where all the code that eventually get combined into the final p5.js and p5.min.js files lives
+* `src` - Where all the code that eventually gets combined into the final p5.js and p5.min.js files lives
 * [`test`](./unit_testing.md) - Where unit tests and code for testing all documentation examples lives
 * `tasks` - Where detailed and custom build code lives
 * `Gruntfile.js` - This is the main build configuration file
 * `contributor_docs` - Where the documentation and all other contributor documentation lives
 
-The other files and folders are either configurations or other kinds of support files, in most cases you shouldn't need to make any modification to them.
+The other files and folders are either configurations or other kinds of support files, in most cases, you shouldn't need to make any modifications to them.
 
 ## Build setup
-Before you do anything, you'll need to setup the local project folder so that you can build and run tests for p5.js. Assuming you have node.js installed (with `npm`),
+Before you do anything, you'll need to set up the local project folder so that you can build and run tests for p5.js. Assuming you have node.js installed (with `npm`),
 
 ```
 npm ci
 ```
 
-This will likely take awhile as npm downloads all dependencies required but once it's done, that's it, you are all setup, pretty simple right?
+This will likely take a while as npm downloads all dependencies required but once it's done, that's it, you are all set up pretty simple right?
 
 ## Git workflow
-Now you are ready to make the changes you need to make, for more details about the different parts of the repository and how you can make relevant changes, see subsections below. To start with, run `npm test` to try building p5.js from scratch and run all unit tests, this should complete with no errors.
+Now you are ready to make the changes you need to make, for more details about the different parts of the repository and how you can make relevant changes, see the subsections below. To start with, run the `npm test` to try building p5.js from scratch and run all unit tests, this should complete with no errors.
 
-Next, it is recommended that you make a branch off the `main` branch before starting your work. Run `git checkout -b [branch_name]` while you are on the `main` branch, replacing `[branch_name]` with something descriptive, and you will be on a separate branch now. A branch in git is as the name implies, a branched version of the repo that you can add commits to without affecting the `main` or other branches. Branches enables you to work on multiple features at once (by using multiple isolated branches) and have confidence that if you messed up a branch it won't affect the `main` branch.
+Next, it is recommended that you make a branch off the `main` branch before starting your work. Run `git checkout -b [branch_name]` while you are on the `main` branch, replacing `[branch_name]` with something descriptive, and you will be on a separate branch now. A branch in git is as the name implies, a branched version of the repo that you can add commits to without affecting the `main` or other branches. Branches enable you to work on multiple features at once (by using multiple isolated branches) and have confidence that if you mess up a branch it won't affect the `main` branch.
 
-As you make your changes, it is recommended to frequently run `npm test`, especially if you are working on the source code. Running this will take some time but it ensures that changes you make are not breaking existing behaviours. You should run `npm test` before moving onto committing the changes as described below.
+As you make your changes, it is recommended to frequently run the `npm test`, especially if you are working on the source code. Running this will take some time but it ensures that the changes you make are not breaking existing behaviors. You should run the `npm test` before moving on committing the changes as described below.
 
-Once you have made your changes to the codebase, you will need to commit it to git. A commit is a collection of changes saved in the git repository, it essentially record the current state of the files in the repo at the time of commit. A question that may arise is how often should you commit to git? In general it is preferred that you aim to commit often rather than lump multiple big changes into one commit. A good guideline is to commit whenever you have completed a subtask that can be described in a sentence.
+Once you have made your changes to the codebase, you will need to commit it to git. A commit is a collection of changes saved in the git repository, it essentially records the current state of the files in the repo at the time of commit. A question that may arise is how often should you commit to git. In general, it is preferred that you aim to commit often rather than lump multiple big changes into one commit. A good guideline is to commit whenever you have completed a subtask that can be described in a sentence.
 
 To commit all current changes, follow the following:
 
-1. Run `git status` and check that it only list files that you have changed. If there are files listed that you have not changed, you will need to either restore them to the original or make sure they are intended changes. Running `git diff` can also show you more detailed changes for each files. You should not commit any file changes that you don't intend to change for your PR.
+1. Run `git status` and check that it only lists files that you have changed. If there are files listed that you have not changed, you will need to either restore them to the original or make sure they are intended changes. Running `git diff` can also show you more detailed changes for each file. You should not commit any file changes that you don't intend to change for your PR.
 2. Run `git add .` to stage all changes for committing into git.
-3. Run `git commit -m [your_commit_message]` to commit the changes into git. `[your_commit_message]` should be replaced with a relevant commit message that is descriptive of the changes, avoid generic statements. For example, instead of saying `Documentation fix 1`, say `Add documentation example to circle() function`.
+3. Run `git commit -m [your_commit_message]` to commit the changes into git. `[your_commit_message]` should be replaced with a relevant commit message that is descriptive of the changes, avoiding generic statements. For example, instead of saying `Documentation fix 1`, say `Add documentation example to circle() function`.
 
-Repeat the above steps for all commits you will be making while making sure to run `npm test` periodically to make sure things are working.
+Repeat the above steps for all commits you will be making while making sure to run the `npm test` periodically to make sure things are working.
 
 ### Source code
-If you are going to work on the source code, a good place to start, if you know which of p5.js feature you are going to work on, is to visit the documentation and at the bottom of each documented functionality of p5.js will be a link to its source code.
+If you are going to work on the source code, a good place to start, if you know which of the p5.js feature you are going to work on, is to visit the documentation and at the bottom of each documented functionality of p5.js will be a link to its source code.
 
 ### Unit tests
-If you are going to work on unit tests, please see [here](./unit_testing.md). Note that for any feature enchancement, new features, and some bug fix, unit tests covering the new implementations should be included in the PR.
+If you are going to work on unit tests, please see [here](./unit_testing.md). Note that for any feature enhancements, new features, and some bug fixes, unit tests covering the new implementations should be included in the PR.
 
 ### Inline documentation
 If you are going to work on the inline documentation, please see [here](./inline_documentation.md).
@@ -193,7 +194,7 @@ While working on any features of p5.js, it is important to keep in mind the [des
 
 ---
 # Pull requests
-Now that you have made the changes you need to make, `npm test` does not error, and you have commited the changes, you can start preparing a pull requests to get your new commits merged into the official p5.js repository. A pull request more formally is a request to a repo (in this case the official p5.js repo) to pull or merge changes from another repo (in this case your forked p5.js repo) into its commit history.
+Now that you have made the changes you need to make, the `npm test` does not error, and you have committed the changes, you can start preparing a pull requests to get your new commits merged into the official p5.js repository. A pull request more formally is a request to a repo (in this case the official p5.js repo) to pull or merge changes from another repo (in this case your forked p5.js repo) into its commit history.
 
 ## Creating a pull request
 The first step here is to push your new commits to your fork of p5.js, think of it as uploading the changes to your fork.
@@ -207,24 +208,24 @@ Once the push is complete, you may see a link in the terminal that lets you open
 ### Pull request information
 Before filing the pull request, you will need to fill out the pull request template. First of all the pull request title should briefly describe what the changes are, again avoid generic statements here.
 
-Next, in the template there is this line `Resolves #[Add issue number here]` which you should replace `[Add issue number here]` with the issue number of the issue you are addressing/fixing [above](#all-about-issues) (eg. `Resolves #1234`). This will make sure the issue is automaticaly closed after this PR is merged. If you do not wish to automatically close the issue after this PR is merged (maybe because there are more changes coming in a separate PR), change `Resovles` to `Addresses`.
+Next, in the template, there is this line `Resolves #[Add issue number here]` which you should replace `[Add issue number here]` with the issue number of the issue you are addressing/fixing [above](#all-about-issues) (eg. `Resolves #1234`). This will make sure the issue is automatically closed after this PR is merged. If you do not wish to automatically close the issue after this PR is merged (maybe because there are more changes coming in a separate PR), change `Resovles` to `Addresses`.
 
-For "Changes", you should give a clear description of the changes you have made in this PR. Include any implementation details and decisions you made here that are relevant to whomever will review this PR.
+For "Changes", you should give a clear description of the changes you have made in this PR. Include any implementation details and decisions you made here that are relevant to whoever will review this PR.
 
-"Screenshots of the change" is optional depending on circumstances and should be included when making changes related to how p5.js renders visuals on the canvas. Note that this is not a screenshot of the text editor but screenshot of an example sketch's behaviour after your changes.
+"Screenshots of the change" are optional depending on circumstances and should be included when making changes related to how p5.js renders visuals on the canvas. Note that this is not a screenshot of the text editor but a screenshot of an example sketch's behavior after your changes.
 
-"PR Checklist" contains some relevant checklist item that you should tick by replacing `[ ]` with `[x]` wherever relevant to your changes.
+"PR Checklist" contains some relevant checklist items that you should tick by replacing `[ ]` with `[x]` wherever relevant to your changes.
 
 Once done, click on "Create pull request".
 
 ### Rebase and resolve conflicts
 You should now inspect the opened pull request and pay attention to a few things:
 
-1. The number of commits should match the number of commits you have made, meaning if you have commited 2 times while working on this PR, it should only show two commits in the "Commits" tab.
+1. The number of commits should match the number of commits you have made, meaning if you have committed 2 times while working on this PR, it should only show two commits in the "Commits" tab.
 2. The "Files changed" tab should show you the changes you have made as compared with the p5.js repo and nothing more.
 3. Near the bottom, it should say "This branch has no conflicts with the base branch" and not "This branch has conflicts that must be resolved".
 
-If any of the above is not true (there are more commits than you expected or there are conflicts), you may need to rebase or help resolve conflicts. Conflicts here means that you have made changes to a file that also recently have changes applied to it and git is not sure which set of changes to keep or leave out. If you are not confident in resolving these issue, let a steward know and we'll guide you through the process. Basic instruction is as below.
+If any of the above is not true (there are more commits than you expected or there are conflicts), you may need to rebase or help resolve conflicts. Conflicts here mean that you have made changes to a file that also recently had changes applied to it and git is not sure which set of changes to keep or leave out. If you are not confident in resolving these issues, let a steward know and we'll guide you through the process. Basic instruction is as below.
 
 1. Run `git remote add upstream https://github.com/processing/p5.js`
 2. Run `git fetch upstream`
@@ -240,10 +241,10 @@ If any of the above is not true (there are more commits than you expected or the
 The checklist above may clear out after these steps but if not, we'll guide you through any fix necessary.
 
 ## Discuss and amend
-Now that your PR is opened, a steward or maintainer will review your PR. It may take several days before a steward is able to reply to your PR so be patient and why not checkout some of the other open issues in the meantime!
+Now that your PR is opened, a steward or maintainer will review your PR. It may take several days before a steward is able to reply to your PR so be patient and why not check out some of the other open issues in the meantime?
 
-Once a steward has reviewed your PR, one of two things may happen: 1. Your PR is approved and merged, hurray! 2. The steward may ask some question regarding the PR or request some changes to the PR. If it's the latter, don't panic, it's perfectly normal and the stewards are always here to help you complete your contribution!
+Once a steward has reviewed your PR, one of two things may happen: 1. Your PR is approved and merged, hurray! 2. The steward may ask some questions regarding the PR or request some changes to the PR. If it's the latter, don't panic, it's perfectly normal and the stewards are always here to help you complete your contribution!
 
 If changes are requested of your PR and you are able to make those changes, follow the [same process as before](#git-workflow) but just continue from your local copy of the repo and relevant branch, make those changes, commit them into git, and push them to your forked remote repo. Once you have pushed additional commits to your forked remote repo, you will see that the new commits automatically show up in the PR. Leave a comment in the PR to let the reviewer know you have made the changes requested and if no additional changes are needed, your PR will be merged!
 
----
\ No newline at end of file
+---
diff --git a/contributor_docs/images/caps.svg b/contributor_docs/images/caps.svg
new file mode 100644
index 0000000000..29da5f48de
--- /dev/null
+++ b/contributor_docs/images/caps.svg
@@ -0,0 +1,16 @@
+<svg width="375" height="75" viewBox="0 0 375 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="375" height="75" fill="white"/>
+<text fill="#FF3232" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="12" letter-spacing="0em"><tspan x="10.7833" y="61.8636">Bounding Quad</tspan></text>
+<text fill="#32C8FF" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="12" letter-spacing="0em"><tspan x="120.071" y="61.8636">EXTEND</tspan></text>
+<text fill="#32C8FF" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="12" letter-spacing="0em"><tspan x="212.498" y="61.8636">ROUND</tspan></text>
+<text fill="#32C8FF" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="12" letter-spacing="0em"><tspan x="301.273" y="61.8636">SQUARE</tspan></text>
+<rect x="19.5189" y="11.6742" width="57.0448" height="31.3388" fill="#D9D9D9" stroke="black"/>
+<rect x="77.0637" y="11.1742" width="15.3145" height="32.3388" fill="#FF3232"/>
+<rect x="109.611" y="11.6742" width="57.0448" height="31.3388" fill="#D9D9D9" stroke="black"/>
+<rect x="167.156" y="11.1742" width="15.3145" height="32.3388" fill="#32C8FF"/>
+<rect x="290.433" y="11.6742" width="57.0448" height="31.3388" fill="#D9D9D9" stroke="black"/>
+<rect x="347.977" y="11.1742" width="15.3145" height="32.3388" fill="#32C8FF" fill-opacity="0.2"/>
+<rect x="199.703" y="11.6742" width="57.0448" height="31.3388" fill="#D9D9D9" stroke="black"/>
+<rect x="257.247" y="11.1742" width="15.9527" height="32.3388" fill="#32C8FF" fill-opacity="0.2"/>
+<path d="M257.247 43.2963C261.478 43.2963 265.536 41.6155 268.528 38.6238C271.519 35.6321 273.2 31.5745 273.2 27.3436C273.2 23.1127 271.519 19.0551 268.528 16.0634C265.536 13.0717 261.478 11.391 257.247 11.391L257.247 27.3436L257.247 43.2963Z" fill="#32C8FF"/>
+</svg>
diff --git a/contributor_docs/images/flags.svg b/contributor_docs/images/flags.svg
new file mode 100644
index 0000000000..1954abb75e
--- /dev/null
+++ b/contributor_docs/images/flags.svg
@@ -0,0 +1,45 @@
+<svg width="375" height="115" viewBox="0 0 375 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="375" height="115" fill="white"/>
+<rect x="268.983" y="51.8931" width="47.4062" height="28.0285" transform="rotate(-45 268.983 51.8931)" fill="black" fill-opacity="0.05"/>
+<rect x="269.69" y="51.8931" width="46.4062" height="27.0285" transform="rotate(-45 269.69 51.8931)" stroke="black" stroke-opacity="0.5"/>
+<rect x="336.025" y="71.7123" width="47.4062" height="28.0285" transform="rotate(-135 336.025 71.7123)" fill="black" fill-opacity="0.05"/>
+<rect x="336.025" y="71.0052" width="46.4062" height="27.0285" transform="rotate(-135 336.025 71.0052)" stroke="black" stroke-opacity="0.5"/>
+<rect x="302.514" y="19.0487" width="14" height="14" transform="rotate(-45 302.514 19.0487)" fill="black" fill-opacity="0.2" stroke="black"/>
+<rect x="303.211" y="38.1911" width="13.0143" height="13.0143" transform="rotate(-45 303.211 38.1911)" fill="black" fill-opacity="0.2" stroke="black"/>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="292.416" y="18.9173">-1</tspan></text>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="297.526" y="40.7365">1</tspan></text>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="325.377" y="18.9173">-3</tspan></text>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="322.323" y="40.7365">3</tspan></text>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="308.804" y="6.54545">-2</tspan></text>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="310.795" y="56.6461">2</tspan></text>
+<circle cx="312.414" cy="29.0503" r="2.0002" fill="#FF3232"/>
+<path d="M297.299 44.1999C297.299 43.6476 296.852 43.1999 296.299 43.1999H287.299C286.747 43.1999 286.299 43.6476 286.299 44.1999C286.299 44.7521 286.747 45.1999 287.299 45.1999H295.299V53.1999C295.299 53.7521 295.747 54.1999 296.299 54.1999C296.852 54.1999 297.299 53.7521 297.299 53.1999V44.1999ZM279.516 62.3979L297.006 44.907L295.592 43.4927L278.101 60.9837L279.516 62.3979Z" fill="#32C8FF"/>
+<path d="M346.325 60.7748C346.877 60.7748 347.325 60.3271 347.325 59.7748V50.7748C347.325 50.2225 346.877 49.7748 346.325 49.7748C345.772 49.7748 345.325 50.2225 345.325 50.7748V58.7748H337.325C336.772 58.7748 336.325 59.2225 336.325 59.7748C336.325 60.3271 336.772 60.7748 337.325 60.7748H346.325ZM328.615 43.4791L345.618 60.4819L347.032 59.0677L330.029 42.0649L328.615 43.4791Z" fill="#FF32FF"/>
+<rect x="162.124" y="27.1768" width="47.4062" height="28.0285" fill="black" fill-opacity="0.05"/>
+<rect x="162.624" y="27.6768" width="46.4062" height="27.0285" stroke="black" stroke-opacity="0.5"/>
+<rect x="210.031" y="27.6768" width="13" height="27.0285" fill="black" fill-opacity="0.2" stroke="black"/>
+<circle cx="209.531" cy="41.1911" r="2.0002" fill="#FF3232"/>
+<circle cx="216.864" cy="41.1788" r="0.937478" fill="#FF32FF"/>
+<path d="M203.841 41.8982C204.232 41.5076 204.232 40.8745 203.841 40.484L197.478 34.12C197.087 33.7295 196.454 33.7295 196.063 34.12C195.673 34.5105 195.673 35.1437 196.063 35.5342L201.72 41.1911L196.063 46.8479C195.673 47.2384 195.673 47.8716 196.063 48.2621C196.454 48.6527 197.087 48.6527 197.478 48.2621L203.841 41.8982ZM180.644 42.1911L203.134 42.1911L203.134 40.1911L180.644 40.1911L180.644 42.1911Z" fill="#32C8FF"/>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="205.057" y="22.9173">-1</tspan></text>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="208.667" y="64.3006">1</tspan></text>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="218.312" y="22.9173">-2</tspan></text>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="221.302" y="64.3006">2</tspan></text>
+<rect x="39.7315" y="27.6645" width="71.0259" height="27.0285" fill="black" fill-opacity="0.2" stroke="black"/>
+<circle cx="39.2315" cy="41.1788" r="2.0002" fill="#FF3232"/>
+<circle cx="111.257" cy="41.1788" r="2.0002" fill="#FF3232"/>
+<path d="M35.4174 41.8859C35.8079 41.4954 35.8079 40.8622 35.4174 40.4717L29.0535 34.1077C28.6629 33.7172 28.0298 33.7172 27.6392 34.1077C27.2487 34.4982 27.2487 35.1314 27.6392 35.5219L33.2961 41.1788L27.6392 46.8356C27.2487 47.2262 27.2487 47.8593 27.6392 48.2498C28.0298 48.6404 28.6629 48.6404 29.0535 48.2498L35.4174 41.8859ZM12.2195 42.1788L34.7103 42.1788L34.7103 40.1788L12.2195 40.1788L12.2195 42.1788Z" fill="#32C8FF"/>
+<path d="M138.976 41.8859C139.367 41.4954 139.367 40.8622 138.976 40.4717L132.613 34.1077C132.222 33.7172 131.589 33.7172 131.198 34.1077C130.808 34.4982 130.808 35.1314 131.198 35.5219L136.855 41.1788L131.198 46.8356C130.808 47.2262 130.808 47.8593 131.198 48.2498C131.589 48.6404 132.222 48.6404 132.613 48.2498L138.976 41.8859ZM115.779 42.1788L138.269 42.1788L138.269 40.1788L115.779 40.1788L115.779 42.1788Z" fill="#FF32FF"/>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="35.9947" y="24.9173">-1</tspan></text>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="106.039" y="24.9173">-2</tspan></text>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="37.1046" y="62.5315">1</tspan></text>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="7" letter-spacing="0em"><tspan x="108.029" y="62.5315">2</tspan></text>
+<text fill="#969696" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="12" letter-spacing="0em"><tspan x="53.5991" y="105.972">Segment</tspan></text>
+<text fill="#32C8FF" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="8" letter-spacing="0em"><tspan x="6.62343" y="74.6214">Tangent In</tspan></text>
+<text fill="#32C8FF" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="8" letter-spacing="0em"><tspan x="6.62343" y="74.6214">Tangent In</tspan></text>
+<text fill="#FF32FF" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="8" letter-spacing="0em"><tspan x="101.599" y="74.6214">Tangent Out</tspan></text>
+<text fill="#FF3232" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="8" letter-spacing="0em"><tspan x="183.937" y="76.6214">Center Point</tspan></text>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="8" letter-spacing="0em"><tspan x="305.239" y="76.6214">Side</tspan></text>
+<text fill="#969696" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="12" letter-spacing="0em"><tspan x="181.892" y="105.972">Cap</tspan></text>
+<text fill="#969696" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="12" letter-spacing="0em"><tspan x="298.65" y="105.972">Join</tspan></text>
+</svg>
diff --git a/contributor_docs/images/joins.svg b/contributor_docs/images/joins.svg
new file mode 100644
index 0000000000..e46d48ad5b
--- /dev/null
+++ b/contributor_docs/images/joins.svg
@@ -0,0 +1,21 @@
+<svg width="375" height="100" viewBox="0 0 375 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="375" height="100" fill="white"/>
+<rect x="11.7061" y="51.8931" width="46.4062" height="27.0285" transform="rotate(-45 11.7061 51.8931)" fill="black" fill-opacity="0.1" stroke="black"/>
+<rect x="78.0415" y="71.0052" width="46.4062" height="27.0285" transform="rotate(-135 78.0415 71.0052)" fill="black" fill-opacity="0.1" stroke="black"/>
+<rect x="44.5202" y="18.3719" width="14.0143" height="14.0143" transform="rotate(-45 44.5202 18.3719)" fill="#FF3232"/>
+<rect x="101.548" y="51.8931" width="46.4062" height="27.0285" transform="rotate(-45 101.548 51.8931)" fill="black" fill-opacity="0.1" stroke="black"/>
+<rect x="167.884" y="71.0052" width="46.4062" height="27.0285" transform="rotate(-135 167.884 71.0052)" fill="black" fill-opacity="0.1" stroke="black"/>
+<rect x="134.362" y="18.3719" width="14.0143" height="14.0143" transform="rotate(-45 134.362 18.3719)" fill="#32C8FF"/>
+<rect x="191.96" y="51.8931" width="46.4062" height="27.0285" transform="rotate(-45 191.96 51.8931)" fill="black" fill-opacity="0.1" stroke="black"/>
+<rect x="258.295" y="71.0052" width="46.4062" height="27.0285" transform="rotate(-135 258.295 71.0052)" fill="black" fill-opacity="0.1" stroke="black"/>
+<rect x="224.774" y="18.3719" width="14.0143" height="14.0143" transform="rotate(-45 224.774 18.3719)" fill="#32C8FF" fill-opacity="0.2"/>
+<rect x="282.371" y="51.8931" width="46.4062" height="27.0285" transform="rotate(-45 282.371 51.8931)" fill="black" fill-opacity="0.1" stroke="black"/>
+<rect x="348.707" y="71.0052" width="46.4062" height="27.0285" transform="rotate(-135 348.707 71.0052)" fill="black" fill-opacity="0.1" stroke="black"/>
+<rect x="315.186" y="18.3719" width="14.0143" height="14.0143" transform="rotate(-45 315.186 18.3719)" fill="#32C8FF" fill-opacity="0.2"/>
+<path d="M244.583 18.382C243.283 17.0819 241.74 16.0507 240.041 15.3471C238.343 14.6436 236.522 14.2815 234.683 14.2815C232.845 14.2815 231.024 14.6436 229.326 15.3472C227.627 16.0507 226.084 17.082 224.784 18.382L234.684 28.2815L244.583 18.382Z" fill="#32C8FF"/>
+<path d="M325.012 28.2814L315.008 18.4311H334.862L325.012 28.2814Z" fill="#32C8FF"/>
+<text fill="#FF3232" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="12" letter-spacing="0em"><tspan x="10.7833" y="90.8636">Bounding Quad</tspan></text>
+<text fill="#32C8FF" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="12" letter-spacing="0em"><tspan x="126.073" y="90.8636">MITER</tspan></text>
+<text fill="#32C8FF" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="12" letter-spacing="0em"><tspan x="212.498" y="90.8636">ROUND</tspan></text>
+<text fill="#32C8FF" xml:space="preserve" style="white-space: pre" font-family="sans-serif" font-size="12" letter-spacing="0em"><tspan x="306.591" y="90.8636">BEVEL</tspan></text>
+</svg>
diff --git a/contributor_docs/images/line-diagram.svg b/contributor_docs/images/line-diagram.svg
new file mode 100644
index 0000000000..31d25794a7
--- /dev/null
+++ b/contributor_docs/images/line-diagram.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200" viewBox="0 0 400 200">
+  
+<path d="M 70.5182338664399,166.88611612420254 L 150.51823386643989,91.88611612420256 L 109.4817661335601,48.11388387579744 L 29.481766133560104,123.11388387579744Z" stroke="rgba(50, 50, 255, 1)" stroke-width="2" fill="rgba(50, 50, 255, 0.2)"/><path d="M 130,100 L 270,100 L 270,40 L 130,40Z" stroke="rgba(50, 50, 255, 1)" stroke-width="2" fill="rgba(50, 50, 255, 0.2)"/><path d="M 249.48176613356011,91.88611612420256 L 329.4817661335601,166.88611612420254 L 370.5182338664399,123.11388387579744 L 290.5182338664399,48.11388387579744Z" stroke="rgba(50, 50, 255, 1)" stroke-width="2" fill="rgba(50, 50, 255, 0.2)"/><path d="M 150.51823386643989,91.88611612420256 A 30,30,0,0,1,130,100 L 130,40 A 30,30,0,0,0,109.4817661335601,48.11388387579744 Z" stroke="rgba(255, 50, 255, 1)" stroke-width="2" fill="rgba(255, 50, 255, 0.2)"/><path d="M 270,100 A 30,30,0,0,1,249.48176613356011,91.88611612420256 L 290.5182338664399,48.11388387579744 A 30,30,0,0,0,270,40 Z" stroke="rgba(255, 50, 255, 1)" stroke-width="2" fill="rgba(255, 50, 255, 0.2)"/><path d="M 70.5182338664399,166.88611612420254 A 30,30,0,0,1,29.481766133560104,123.11388387579744 Z" stroke="rgba(50, 200, 255, 1)" stroke-width="2" fill="rgba(50, 200, 255, 0.2)"/><path d="M 329.4817661335601,166.88611612420254 A 30,30,0,0,0,370.5182338664399,123.11388387579744 Z" stroke="rgba(50, 200, 255, 1)" stroke-width="2" fill="rgba(50, 200, 255, 0.2)"/><path d="M 50,145 L 130,70 L 270,70 L 350,145" fill="none" stroke="rgba(255, 50, 50, 1)" stroke-width="2"/><text x="80" y="190" font-family="sans-serif" font-size="16" fill="rgb(50, 200, 255)" text-anchor="middle">Cap</text><text x="200" y="32" font-family="sans-serif" font-size="16" fill="rgb(50, 50, 255)" text-anchor="middle">Segment</text><text x="310" y="50" font-family="sans-serif" font-size="16" fill="rgb(255, 50, 255)" text-anchor="middle">Join</text><text x="200" y="125" font-family="sans-serif" font-size="16" fill="rgb(255, 50, 50)" text-anchor="middle">Center Line</text></svg>
\ No newline at end of file
diff --git a/contributor_docs/webgl_contribution_guide.md b/contributor_docs/webgl_contribution_guide.md
new file mode 100644
index 0000000000..cbdc2b0011
--- /dev/null
+++ b/contributor_docs/webgl_contribution_guide.md
@@ -0,0 +1,161 @@
+# WebGL Contribution Guide
+
+If you're reading this page, you're probably interested in helping work on WebGL mode. Thank you, we're grateful for your help! This page exists to help explain how we structure WebGL contributions and to offer some tips for making changes.
+
+
+## Resources
+
+- Read our [p5.js WebGL architecture overview](webgl_mode_architecture.md) to understand how WebGL mode differs from 2D mode. This will be a valuable reference for some implementation specifics for shaders, strokes, and more.
+- Read our [contributor guidelines](https://p5js.org/contributor-docs/#/./contributor_guidelines) for information on how to create issues, set up the codebase, and test changes.
+- It can be helpful to know a bit about the browser's WebGL API, which is what p5.js's WebGL mode is built on top of:
+  - [WebGL fundamentals](https://webglfundamentals.org/) goes over many core rendering concepts
+  - [The Book of Shaders](https://thebookofshaders.com/) explains many techniques used in WebGL shaders
+
+
+## Planning
+
+We organize open issues [in a GitHub Project](https://github.com/orgs/processing/projects/5), where we divide them up into a few types:
+
+- **System-level changes** are longer-term goals with far-reaching implications in the code. These require the most discussion and planning before jumping into implementation.
+- **Bugs with no solution yet** are bug reports that need some debugging to narrow down the cause. These are not yet ready to be fixed: once the cause is found, then we can discuss the best way to fix it.
+- **Bugs with solutions but no PR** are bugs where we have decided how to fix it and are free for someone to write code for.
+- **Minor enhancements** are issues for new features that have an obvious spot within the current architecture without needing to discuss how to fit them in. Once agreed that these are worth doing, they are free to write code for.
+- **2D features** are ones that already exist in p5.js but not within WebGL mode. The expected behavior of the feature, once implemented, is to match 2D mode. We may need to discuss the best implementation, but the user requirements for these are clear.
+- **Features that don't work in all contexts** are ones that exist in WebGL mode but do not work in all the ways one can use WebGL mode. For example, some p5.js methods work with both 2D coordinates and 3D coordinates, but others break if you use 3D coordinates. These are generally free to begin working on.
+- **Feature requests** are all other code change requests. These need a bit of discussion to make sure they are things that fit into WebGL mode's roadmap.
+- **Documentation** issues are ones that don't need a code change but instead need better documentation of p5.js's behavior.
+
+
+## Where to Put Code
+
+Everything related to WebGL is in the `src/webgl` subdirectory. Within that directory, top-level p5.js functions are split into files based on subject area: commands to set light go in `lighting.js`; commands to set materials go in `materials.js`.
+
+When implementing user-facing classes, we generally try to have one file per class. These files may occasionally have a few other internal utility classes. For example, `p5.Framebuffer.js` includes the class `p5.Framebuffer`, and also additionally consists of a few framebuffer-specific subclasses of other main classes. Further framebuffer-specific subclasses can go in this file, too.
+
+`p5.RendererGL` is a large class that handles a lot of behavior. For this reason, rather than having one large class file, its functionality is split into many files based on what subject area it is. Here is a description of the files we split `p5.RendererGL` across, and what to put in each one:
+
+
+#### `p5.RendererGL.js`
+
+Initialization and core functionality.
+
+
+#### `p5.RendererGL.Immediate.js`
+
+Functionality related to **immediate mode** drawing (shapes that will not get stored and reused, such as `beginShape()` and `endShape()`)
+
+
+#### `p5.RendererGL.Retained.js`
+
+Functionality related to **retained mode** drawing (shapes that have been stored for reuse, such as `sphere()`)
+
+
+#### `material.js`
+
+Management of blend modes
+
+
+#### `3d_primitives.js`
+
+User-facing functions that draw shapes, such as `triangle()`. These define the geometry of the shapes. The rendering of those shapes then happens in `p5.RendererGL.Retained.js` or `p5.RendererGL.Immediate.js`, treating the geometry input as a generic shape.
+
+
+#### `Text.js`
+
+Functionality and utility classes for text rendering.
+
+
+## Testing WebGL Changes
+
+### Testing Consistency
+
+There are a lot of ways one can use the functions in p5.js. It's hard to manually verify all of it, so we add unit tests where we can. That way, when we make new changes, we can be more confident that we didn't break anything if all the unit tests still pass.
+
+When adding a new test, if the feature is something that also works in 2D mode, one of the best ways to check for consistency is to check that the resulting pixels are the same in both modes. Here's one example of that in a unit test:
+
+```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));
+});
+```
+
+This doesn't always work because you can't turn off antialiasing in 2D mode, and antialiasing in WebGL mode will often be slightly different. It can work for straight lines in the x and y axes, though!
+
+If a feature is WebGL-only, rather than comparing pixels to 2D mode, we often check a few pixels to ensure their color is what we expect. One day, we might turn this into a more robust system that compares against full image snapshots of our expected results rather than a few pixels, but for now, here is an example of a pixel color check:
+
+```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]);
+});
+```
+
+
+### Performance Testing
+
+While not the #1 concern of p5.js, we try to make sure changes don't cause a large hit to performance. Typically, this is done by creating two test sketches: one with your change and one without the change. We then compare the frame rates of both.
+
+Some advice on how to measure performance:
+
+- Disable friendly errors with `p5.disableFriendlyErrors = true` at the top of your sketch (or just test `p5.min.js`, which does not include the friendly error system)
+- Display the average frame rate to get a clear sense of the steady state frame rate:
+
+```js
+let frameRateP;
+let avgFrameRates = [];
+let frameRateSum = 0;
+const numSamples = 30;
+function setup() {
+  // ...
+  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');
+}
+```
+
+Here are cases we try to test since they stress different parts of the rendering pipeline:
+
+- A few very complicated shapes (e.g., a large 3D model or a long curve)
+- Many simple shapes (e.g., `line()` called many times in a for loop)
diff --git a/contributor_docs/webgl_mode_architecture.md b/contributor_docs/webgl_mode_architecture.md
index 3a50eca920..4cff1152dc 100644
--- a/contributor_docs/webgl_mode_architecture.md
+++ b/contributor_docs/webgl_mode_architecture.md
@@ -1,179 +1,263 @@
-# p5.js WEBGL mode architecture
+# p5.js WebGL Mode Architecture
 
-This document describes the structure of the p5.js WEBGL mode for p5.js contributors and maintainers—and any other interested parties. If you're interested in using 3D graphics in your sketches, [view this tutorial](https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5) instead.
+This document is intended for contributors and library makers who want to extend the WebGL codebase. If you are looking for help using WebGL mode in your sketches, consider reading the WebGL tutorials [on the p5.js Learn page](https://p5js.org/learn/) instead.
 
-## Overview of Structure and Objects
 
-The core objects in the WEBGL architecture are the p5.Renderer.GL, p5.Shader, p5.Texture, and p5.Geometry.
-A single instance of p5.Renderer.GL manages its own p5.Shaders, p5.Textures, and p5.Geometry—a goal for this is to allow offscreen rendering using WebGL, but that hasn’t been tested yet.
-Shaders and textures are associated with a specific GL context via the renderer.
+## What is WebGL mode?
 
-### p5.RendererGL
-The p5.RendererGL object is the renderer for WEBGL / 3D Mode in p5.js.
-Derived from p5.Renderer, it provides additional functionality not available in 2D mode, such as: `box()`, `cone()`, use of shaders, accelerated texture rendering, and lighting.
+There are two renderers that p5.js can run in, 2D and WebGL mode. WebGL mode in p5.js allows the user to make use of the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) built into the web browser for rendering high-performance 2D and 3D graphics. The key difference between 2D mode and WebGL mode is that the latter provides more direct access to the computer's GPU, allowing it to performantly render shapes in 3D or perform other graphics and image processing tasks. 
 
-* Manages—creates and caches—shaders (p5.Shader objects) and textures (p5.Texture objects)
-* Prepares coordinates of shapes to be used as attribute arrays by shaders.
-* Selects the correct shader for use when stroke, fill, texture, and various lighting methods are called, then supplies the appropriate uniforms to those shaders.
-* Maintains data about lighting: a count of how many various types of lights are used and their parameters.
-* Caches geometry for 3D primitives (in retained mode), with the exception of shapes created with begin/endShape, which are dynamically generated and pushed to GL every time one is drawn (in immediate mode).
+We keep track of the progress of WebGL issues in [a GitHub Project.](https://github.com/orgs/processing/projects/20)
 
-The renderer manages choosing an appropriate p5.Shader for the current drawing conditions.
 
-### p5.Shader
-The p5.Shader class provides access to the uniforms and attributes of a GL program. 
+## Goals of WebGL mode
 
-* Compiles and links the vertex and fragment shader components
-* Provides an API for accessing and setting shader attributes and uniforms
-* Binds textures the shader needs before a shape is rendered
-* Provides the bindShader() method for use in the render before a shape is drawn, then unbindShader() after the shape is drawn.
+When evaluating a new feature, we consider whether it aligns with the goals of p5.js and WebGL mode:
 
-There are four default shaders, as documented in the Shader section.
+1. **Features should be beginner friendly:** It should provide a **beginner-friendly introduction to WebGL** and the features it offers. This means that we should offer simple APIs for 3D shapes, cameras, lighting, and shaders. We can still support advanced features, but only if they do not interfere with the simplicity of core features.
+2. **Improving feature parity with 2D mode:** It should be a **frictionless transition from 2D mode,** making 3D and WebGL "click" more easily for users. This means that we try to create features that work in 2D mode and also in WebGL mode. Since WebGL also has 3D and shader features, this means WebGL mode aims to have a superset of 2D mode's features.
+3. **Simplicity and Extensibility are paramount:** It should **have a small core and be extensible for libraries.** Keeping WebGL mode small makes it easier to optimize core features and reduce bug surface area. Extension provides an avenue to include more advanced features via libraries.
+4. **Improve p5.js performance:** It should **run as fast as possible without interfering with the previous goals.** Good performance keeps sketches accessible to a wide variety of viewers and devices. When designing new APIs, we try to ensure the design has a performant implementation. However, we give preference to simplicity and parity with 2D mode.
 
-### p5.Texture
-The p5.Texture object manages GL state for a texture based on a `p5.Image`, `p5.MediaElement`, `p5.Element`, or `ImageData`.
 
-* Internally handles processing image data based on type, so that the p5.Renderer implementation doesn’t have to make special exceptions in its own methods when handling textures
-* Updates conditionally every frame by making a best guess at whether or not image data has changed. Tries not to upload the texture if no change has been made, to help performance.
+## Design Differences with 2D Mode
 
-### p5.Geometry
-Shapes rendered in retain mode are stored as p5.Geometry objects in a cache in the p5.Renderer object. 
-The renderer maps strings to p5.Geometry objects based on the shape drawn and its parameters (for example, geometry for a box created with `box(70, 80, 90, 10, 20)` is mapped from `'box|70|80|90|10|20’`). Calls to functions that have retained geometry create a p5.Geometry object on the first pass and store it in a geometry hash using the aforementioned string ID. Later calls look for that ID in the hash, and if it is found use that to reference the existing object rather than creating a new one.
+The browser's 2D and WebGL canvas context APIs offer very different levels of abstraction, with WebGL being generally lower-level and 2D being higher-level. This motivates some fundamental design differences between p5.js's WebGL and 2D modes.
+
+- **WebGL mode creates more deeply nested data structures.** 2D mode generally passes commands to the browser, leading to relatively shallow call stacks. In contrast, WebGL mode is responsible for breaking down shapes into triangles, rendering them, and often caching them for future reuse. The more complicated rendering logic necessitates splitting code into a number of classes like `p5.Texture`, `p5.RenderBuffer`, and `p5.DataArray` to keep implementations readable and maintainable.
+- **WebGL mode offers more customization.** For example, while 2D mode does not control how curves get rendered, WebGL is responsible for converting them into triangles. While it picks a sensible default, the `curveDetail()` API lets users control how many line segments to use, as we cannot predict the best balance of quality and performance for every use case.
+- **WebGL mode must balance high- and low-level APIs.** Since finer-grained control is available with the browser WebGL API, p5.js's WebGL mode is able to offer users some of that control where 2D mode cannot. We then are faced with the task of picking the right level of abstraction for users. Too high, and they are unable to take advantage of some of what the browser has to offer; too low, and we pass too much of the work of managing complexity and performance onto the user.
+
+
+## Drawing Shapes
+
+### Creating Shapes: Fills, Strokes, and 3D Geometry
+
+Everything drawn by p5.js, both in 2D and WebGL, consists of fills and strokes. Sometimes, we only draw one or the other, but every shape must be ready to draw either component.
+
+All shapes in webGL are composed of triangles. When a user calls a function like `circle()`, `beginShape(),` or `vertex()`, the renderer must [break the shape down into a series of points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). The points are connected into lines, and the lines into triangles. For example, `circle()` uses trigonometry to figure out where to place points along a circle. `curveVertex()` and `bezierVertex()` create look-up tables to turn any Bezier curve into points.
+
+
+#### Fills
+
+To create fills, the outline of a shape needs to be filled in with triangles. Some drawing functions like `beginShape(TRIANGLE_STRIP)` already provide triangles for fills. If the shape being drawn is not already made using triangles, we use the library [libtess](https://github.com/brendankenny/libtess.js/) to break it down: in [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), we run polygon outlines through `_processVertices()`. After libtess turns them into triangles, they are in a format where a shader can draw them to the screen.
+
+
+#### Strokes
+
+Despite their name, strokes also need to be filled in to support strokes of varying widths and styles. The lines along the outline of a shape need to expand out from their centers to form shapes with area. Expansion of strokes creates three types of shapes: joins, caps, and segments, illustrated below.
+
+<img alt="Illustration of the segment, join, and cap shapes created by a stroke." src="images/line-diagram.svg" width="600" />
+<!-- Generated via https://codepen.io/davepvm/pen/ZEVdppQ -->
+
+Where two line segments connect, we add a join. 
+
+- A miter join extends the edges of the rectangles until they intersect at a point. 
+- A bevel join connects the corners of the rectangles with a straight line. 
+- A round join connects the corners with a circular arc. 
+
+We support switching join styles without having to recompute line triangles. To do this, we make each line join a quad, composed of two triangles. The quad extent bounds all possible join styles. We use a shader to only display pixels within the quad that are present in the selected join style. We illustrate how each style fits into the quad below.
+
+<img alt="The bounding quad of a stroke join and how each join style fits into it. The bounding quad is a square. Miter joins fill the whole square. Round joins round off one corner of the square. Bevel joins cut the square in half in a straight line." src="images/joins.svg" width="600" />
+
+We use a similar strategy for stroke caps, present at the disconnected ends of lines. Each cap is a quad that bounds round, square, and extended cap styles. The line shader determines which pixels it needs to draw within those bounds. Below, we illustrate how each style fits into the quad.
+
+<img alt="The bounding quad of a stroke cap and how each style fits into it. The bounding quad is a rectangle. The extend cap fills the whole rectangle. The round cap places a semicircle inside the rectangle. The square cap leaves the rectangle empty." src="images/caps.svg" width="600" />
+
+3D shapes can also have strokes, but stroke shapes are calculated in 2D. This means they can change based on the camera's perspective. We want to avoid as much recalculation as possible, so we store all the information about the line that is not camera-dependent:
+
+- We include the **center points of the line** in model space, shown below in red.
+- We include the **direction of the line**, its tangent, at the start and end of each shape, shown in blue and pink, respectively. This helps us compute the shape of joins where two lines connect.
+- We include **a flag that uniquely identifies each corner of the shape.** Combined with the tangent and the normal (a 90-degree rotation of the tangent), it helps determine in what direction to expand the line to give it thickness.
+
+To draw the line, we combine that information with camera intrinsics in a shader to produce the final line positions in screen space.
+
+<img alt="The information stored about lines, and the final shapes that they turn into." src="images/flags.svg" width="600" />
+
+
+### Rendering Shapes: Immediate and Retained Modes
+
+There are two routes that p5.js uses to draw shapes onto the screen: **immediate mode** and **retained mode.**
+
+**Immediate mode** is optimized for shapes that change every frame. If you were drawing a curve that changes each frame, its shape data would be different every time you drew it. Because of this, immediate mode fits it best. It indicates to p5.js that it does not need to spend time storing the shape for reuse, and it saves graphics memory from being filled up with all the shape variations over time. The following functions use this mode:
+
+- `vertex()`, `curveVertex()`, `bezierVertex()`, and `quadraticVertex()`, called between `beginShape()` and `endShape()`
+- `rect()` when using rounded corners
+- `bezier()`
+- `curve()`
+- `line()`
+- `image()`
+
+Retained mode is optimized for shapes that you will need to keep redrawing and don’t change shape. Once a shape is made of triangles and has been sent to the GPU to draw, retained mode keeps it there. It can then be drawn again without having to spend time re-triangulating it or sending it to the GPU again. The saved shape data is kept in a p5.Geometry object. p5.Geometry stores triangle data and keeps track of its uploaded buffers on the GPU. Calling `freeGeometry()` clears the GPU data to make space. Drawing it again after that will re-upload the data. Many 3D shape drawing functions in p5.js, such as `sphere()` or `cone()`, use this internally.
+
+You can use buildGeometry() to make a p5.Geometry out of immediate mode commands. You call it with a function that runs a series of any p5.js shape drawing functions. It runs the function, collects the shapes into a new p5.Geometry, and returns it. The p5.Geometry can then be drawn and redrawn efficiently in the future.
+
+
+## Materials, Lights, and Shaders
+
+Every shape we draw uses a single shader for its fills, and a single shader for its strokes. There are a few default shaders that one can pick from in p5.js. You can also write and use your own shader instead of the default ones.
+
+The default shaders work with p5.js's lighting and materials system. The user can specify what lights are in the scene with a shape and how each object reacts to light, including color and shininess. This information is given to the shader for each object being drawn. Custom shaders can also access the same lighting and material information, allowing users and library makers to extend the default rendering behavior.
+
+
+### Shaders
+
+P5 has a few shaders built in:
+
+- **Color Shader:** for drawing flat colors, activated by using `fill()` or `stroke()`.
+- **Lighting Shader:** for drawing 2D and 3D shapes with complex lighting and textures. Activated by calling `lights()`, `ambientLight()`, `directionalLight()`, `pointLight()`, and `spotLight()`. Each adds a light to the lighting list. All added lights contribute to the shading of the shape. If you do not use lights, the shape will be drawn using the color shader, which only uses the fill color.
+- **Normal/Debug Shader:** for drawing 2D and 3D shapes using the surface normal as a color. It is activated by calling `normalMaterial()`.
+
+
+### Lights
+
+Users can set `ambientLight()`, `directionalLight()`, `pointLight()`, and `spotLight()`. Each adds a light to the lighting list. All added lights contribute to the shading of the shape. They all have a color, and some have a few other parameters, such as position or direction.
+
+For all but `ambientLight()`, each light added contributes to the view-independent lighting of shapes and the view-dependent reflections. The reflection of each light, by default, matches the color of that light. If desired, one can change the color of all reflections by setting `specularColor()`.
+
+If you do not use lights, the shape will be drawn using the **color shader,** which only uses the fill color.
+
+
+### Materials
+
+Each 3D object has a few material properties that can be set by the user:
+
+- **Fill color:** This is the color you see when there are no lights. Set it with `fill()`. If done before drawing the shape, it applies to the whole shape. If called before a `vertex()` between `beginShape()`/`endShape()`, it will apply only to that vertex. A texture, if present from a call to `texture()`, will override the fill. When there are lights, this color will be mixed with the diffuse component of the light. The diffuse component describes the bright and dark areas of the surface due to light being directly cast on it.
+- **Specular material:** This is the color that gets mixed with the specular component of the light. The specular component describes the reflected highlights seen on the shape's surface. Set this parameter with `specularMaterial()`. If unspecified, the shape will have no reflections.
+- **Shininess:** Set with `shininess()`, this is how sharp the specular reflections are.
+- **Ambient material:** This is the color that gets mixed with the ambient light. Ambient light describes constant omnidirectional light on the shape. Set this parameter with `ambientMaterial()`. If unspecified, it will be the same as the fill color.
+- **Emissive material**: Set with `emissiveMaterial()`, this adds a constant color to the lighting of the shape, as if it were producing its own light of that color.
+
+
+### Shader Implementation
+
+The lighting and material parameters get turned into shader attributes and uniforms. If you reference them in a custom shader, p5.js will supply them automatically.
+
+While advanced shader writers can take advantage of these properties, it can be unclear for new users. In the Future Goals section, we describe some plans for improving the API. We may want to improve it before publicly documenting and supporting it.
+
+
+#### Global
+
+For all objects in all contexts, the following global uniforms are available:
+
+- `uniform mat4 uModelViewMatrix`: A matrix to convert object-space positions into camera-space
+- `uniform mat4 uProjectionMatrix`: A matrix to convert camera-space positions into screen space
+- `uniform mat3 uNormalMatrix`: A matrix to convert object-space normals into camera-space
+
+Additionally, these per-vertex properties are available as attributes:
+
+- `attribute vec3 aPosition`: The position of the vertex in object space
+- `attribute vec3 aNormal`: For fills, a direction pointing outward from the surface
+- `attribute vec2 aTexCoord`: For fills, a coordinate between 0 and 1 in x and y referring to a location on a texture image
+- `attribute vec3 aVertexColor`: For fills, an optional per-vertex color
+
+
+#### Lights
+
+- `uniform bool uUseLighting`: Whether or not lights have been provided
+
+If `uUseLighting` has been set, further lighting information will be passed in:
+
+
+##### Ambient lights
+
+- `uniform int uAmbientLightCount`: How many ambient lights are present, up to a maximum of 5
+- `uniform vec3 uAmbientColor[5]`: Ambient light colors
+
+
+##### Directional lights
+
+- `uniform int uDirectionalLightCount`: How many directional lights are present, up to a maximum of 5
+- `uniform vec3 uLightingDirection[5]`: Light directions
+- `uniform vec3 uDirectionalDiffuseColors[5]`: Light diffuse colors
+- `uniform vec3 uDirectionalSpecularColors[5]`: Light specular colors
+
+
+##### Point lights
+
+- `uniform int uPointLightCount`: How many point lights are present, up to a maximum of 5
+- `uniform vec3 uPointLightLocation[5]`: Locations of point lights
+- `uniform vec3 uPointLightDiffuseColors[5]`: Diffuse colors of point lights
+- `uniform vec3 uPointLightSpecularColors[5]`: Specular colors of point lights
+
+
+##### Spot lights
+
+- `uniform int uSpotLightCount`: How many spot lights are present, up to a maximum of 5
+- `uniform float uSpotLightAngle[5]`: Spot light cone radii
+- `uniform float uSpotLightConc[5]`: Concentration (focus) of each spot light
+- `uniform vec3 uSpotLightDiffuseColors[5]`: Light diffuse colors
+- `uniform vec3 uSpotLightSpecularColors[5]`: Light specular colors
+- `uniform vec3 uSpotLightLocation[5]`: Spot light locations
+- `uniform vec3 uSpotLightDirection[5]`: Spot light directions
+
+
+#### Materials
+
+##### Fill color
+
+- `uniform vec4 uMaterialColor`: shape fill color
+- `uniform bool uUseVertexColor`: Whether there are per-vertex colors that override the shape fill color
+- `attribute vec4 aVertexColor`: Per-vertex fill color
+- `uniform bool isTexture`: Whether a texture is specified
+- `uniform sampler2D uSampler`: A texture
+- `uniform vec4 uTint`: A tint multiplier for the texture
+
+
+##### Specular reflections
+
+- `uniform bool uSpecular`: Whether to show reflections
+- `uniform float uShininess`: The shininess of the material
+- `uniform vec4 uSpecularMatColor`: The material color to blend with specular light
+
+
+##### Ambient color
+
+- `uniform bool uHasSetAmbient`: Whether an ambient color has been set or if it should default to the fill color
+- `uniform vec4 uAmbientMatColor`: The material color to blend with ambient light
+
+
+#### Other shader inputs
+
+##### Lines
+
+The default line shader is automatically supplied with these global properties in uniforms:
+
+- `uniform vec4 uViewport`: A vector containing `[minX, minY, maxX, maxY]` of the screen rectangle
+- `uniform int uPerspective`: A boolean specifying whether to apply perspective projection to line thickness
+- `uniform int uStrokeJoin`: An enum representing the join style. 0, 1, and 2 represent `ROUND`, `MITER`, `BEVEL`.
+- `uniform int uStrokeCap`: An enum representing the cap style. 0, 1, and 2 represent `ROUND`, `PROJECT`, `SQUARE`.
+
+It also has the following per-vertex attributes:
+
+- `attribute vec3 aTangentIn`: The 3D direction at the start of the line segment
+- `attribute vec3 aTangentOut`: The 3D direction at the end of the line segment
+- `attribute float aSide`: An enum representing what part of the stroke shape the point is on. See the Strokes section for details.
+
+
+##### Points
+
+- `uniform float uPointSize`: The radius of the point being drawn
+
+
+## Classes
+
+The entrypoint to most WebGL code is through **p5.RendererGL**. Top-level p5.js functions are passed to the current renderer. Both 2D and WebGL modes have renderer classes that conform to this common interface. Immediate mode and retained mode functions are split up into **p5.RendererGL.Immediate.js** and **p5.RendererGL.Retained.js**.
+
+Within the renderer, references to models are stored in the **retainedMode.geometry** map. Each value is an object storing the buffers of a **p5.Geometry**. When calling model(yourGeometry) for the first time, the renderer adds an entry in the map. It then stores references to the geometry's GPU resources there. If you draw a p5.Geometry to the main canvas and also to a WebGL p5.Graphics, it will have entries in two renderers.
+
+Each material is represented by a **p5.Shader.** You set the current shader in the renderer via the shader(yourShader) function. This class handles compiling shader source code and setting shader uniforms.
+
+When setting a shader uniform, if the uniform type is an image, then the renderer creates a p5.Texture for it. Each p5.Image, p5.Graphics, p5.MediaElement, or p5.Framebuffer asset will get one. It is what keeps track of the image data's representation on the GPU. Before using the asset in a shader, p5.js will send new data to the GPU if necessary. For images, this happens when a user has manually updated the pixels of an image. This happens every frame for assets with data that may have changed each frame, such as a video or a p5.Graphics.
+
+Textures corresponding to **p5.Framebuffer** objects are unique. Framebuffers are like graphics: they represent surfaces that can be drawn to. Unlike p5.Graphics, framebuffers live entirely on the GPU. If one uses a p5.Graphics as a texture in a shader, the data needs to be transferred to and from the CPU. This can often be a performance bottleneck. In contrast, when drawing to a framebuffer, you draw directly to its GPU texture. Because of this, no extra data transfer is necessary. WebGL mode tries to use p5.Framebuffers over p5.Graphics where possible for this reason.
+
+
+## Future Goals
+
+Currently, WebGL mode is functional for a variety of tasks, but many users and library makers want to extend it in new directions. We aim to create a set of building blocks for users and library makers from which they can craft extensions. A block can be considered "done" when it has an extensible API we can confidently commit to supporting. A major milestone for WebGL mode will be when we have a sufficient set of such blocks for an ecosystem of libraries. The main areas currently lacking in extension support are geometry and materials.
+
+- **Extend p5.Geometry to support richer content.** One can create geometry, but many tasks a user might want to accomplish are not yet supported with a stable API. One might want to efficiently update geometry, which is necessary to support animated gltf models. One might want to group multiple materials in one object, if they are present in an imported model. One might want to add custom vertex attributes for a shader to work with. These tasks are currently unsupported.
+- **Enable less brittle custom shaders.** To create a shader that integrates p5.js's lighting and materials system, a user is currently forced to create shaders from scratch. These shaders often copy and paste parts of default shaders. This may break between versions if internal naming or structure changes. To be less brittle, libraries should be able to import and reuse default pieces. This lets libraries reuse positioning logic or augment positioning logic but reuse shading logic. There is currently [an issue open for this task.](https://github.com/processing/p5.js/issues/6144)
+- **Improve performance.** WebGL mode tries to strike a balance between features and performance. One method is to introduce APIs to tune output quality, like how `curveDetail()` allows faster but lower-quality curves. Line rendering is one of the common performance bottlenecks in its present state, and it could benefit from having lower fidelity but higher performance options. Another method is to introduce new types of objects and rendering methods that are optimized for different usage patterns, like how `endShape(shouldClose, count)` now supports WebGL 2 instanced rendering for more efficient drawing of many shapes.
 
-* Stores vertices, normals, faces, line vertices, line normals, and texture coordinates for the geometry primitives
-* Provides methods for computing the faces, normals, line vertices, and line normals for a set of vertices
-
-## Immediate Mode
-All attributes for drawing with Immediate Mode are stored in an object in the renderer, used to draw to the GL drawing context, and then discarded.
-
-## Geometry: Retain and Immediate Mode
-Retained geometry is used for 3D primitives, while immediate mode is used for shapes created with begin/endShape.
-
-|Functions with retained geometry| Functions with immediate mode geometry |
-|--------------------------------|----------------------------------------|
-|plane()                         | bezier()                               |
-|box()                           | curve()                                |
-|sphere()                        | line()                                 |
-|cylinder()                      | beginShape()                           |
-|cone()                          | vertex()                               |
-|ellipsoid()                     | endShape()                             |
-|torus()                         | point()                                |
-|triangle()                      | curveVertex()                          |
-|arc()                           | bezierVertex()                         |
-|point()                         | quadraticVertex()                      |
-|ellipse()                       |
-|rect()                          |
-|quad()                          |
-|text()                          |
-
-
-
-
-
-
-## Texture Management
-A p5.Renderer.GL instances manages an array of p5.Textures objects on an as-needed basis.
-Textures are created for images and videos used with the `texture()` method or as uniforms provided to custom shaders.
-
-When the renderer needs a texture, it first checks if one has already been created for a given image/video, then provides that to a shader for rendering. A new texture is only created if an existing one cannot be found for the image/video.
-
-## Shaders
-
-### Types of Shaders
-
-#### Color Shader
-Provides flat shading of objects, based on the current fill color.
-
-#### Light Shader (for lighting AND textures)
-Accounts for:
-* Lighting parameters set by `ambientLight()`, `directionalLight()`, `pointLight()`, `spotLight()` and `specularColor()`
-* Material parameters set by `ambientMaterial()`, `emissiveMaterial()` and `specularMaterial()`
-* Texture parameters, set by `texture()`
-
-#### Normal Shader
-The normal shader is set when `normalMaterial()` is in use. It uses the surface’s normal vector to determine a fragment color.
-
-### Shader Parameters
-
-#### Standard Model View & Camera Uniforms
-|Parameter                        |Line Shader|TexLight Shader|Color Shader|Normal Shader|Point Shader|
-|---------------------------------|-----------|---------------|------------|-------------|------------|
-|`uniform mat4 uModelViewMatrix;` |x          |x              |x           |x            |x           |
-|`uniform mat4 uProjectionMatrix;`|x          |x              |x           |x            |x           |
-|`uniform vec4 uViewPort;`        |x          |               |            |             |            |
-|`uniform vec4 uPerspective;`     |x          |               |            |             |            |
-
-
-#### Geometry Attributes and Uniforms
-|Parameter                        |Line Shader|TexLight Shader|Color Shader|Normal Shader|Point Shader|
-|---------------------------------|-----------|---------------|------------|-------------|------------|
-|`attribute vec3 aPosition;`      |x          |x              |x           |x            |x           |
-|`attribute vec3 aNormal;`        |           |x              |            |x            |            | 
-|`attribute vec2 aTexCoord;`      |           |x              |            |x            |            |
-|`uniform mat3 uNormalMatrix;`    |           |x              |            |x            |            |
-|`attribute vec4 aDirection;`     |x          |               |            |             |            |
-|`uniform float uStrokeWeight;`   |x          |               |            |             |            |
-
-#### Material Colors
-|Parameter                        |Line Shader|TexLight Shader|Color Shader|Normal Shader|Point Shader|
-|---------------------------------|-----------|---------------|------------|-------------|------------|
-|`uniform vec4 uMaterialColor;`   |x          |x              |            |             |x           |
-|`attribute vec4 aVertexColor;`   |           |               |x           |             |            |
-
-#### Light Parameters
-
-|Parameter                                      |Line Shader|TexLight Shader|Color Shader|Normal Shader|Point Shader|
-|-----------------------------------------------|-----------|---------------|------------|-------------|------------|
-|`uniform int uAmbientLightCount;`              |           |x              |            |             |            |
-|`uniform int uDirectionalLightCount;`          |           |x              |            |             |            |
-|`uniform int uPointLightCount;`                |           |x              |            |             |            |
-|`uniform int uSpotLightCount;`                 |           |x              |            |             |            |
-|`uniform vec3 uAmbientColor[8];`               |           |x              |            |             |            |
-|`uniform vec3 uLightingDirection[8];`          |           |x              |            |             |            |
-|`uniform vec3 uDirectionalDiffuseColors[8];`   |           |x              |            |             |            |
-|`uniform vec3 uDirectionalSpecularColors[8];`  |           |x              |            |             |            |
-|`uniform vec3 uPointLightLocation[8];`         |           |x              |            |             |            |
-|`uniform vec3 uPointLightDiffuseColors[8];`    |           |x              |            |             |            |
-|`uniform vec3 uPointLightSpecularColors[8];`   |           |x              |            |             |            |
-|`uniform float uSpotLightAngle[8];`            |           |x              |            |             |            |
-|`uniform float uSpotLightConc[8];`             |           |x              |            |             |            |
-|`uniform vec3 uSpotLightDiffuseColors[8];`     |           |x              |            |             |            |
-|`uniform vec3 uSpotLightSpecularColors[8];`    |           |x              |            |             |            |
-|`uniform vec3 uSpotLightLocation[8];`          |           |x              |            |             |            |
-|`uniform vec3 uSpotLightDirection[8];`         |           |x              |            |             |            |
-|`uniform bool uSpecular;`                      |           |x              |            |             |            |
-|`uniform bool uEmissive;`                      |           |x              |            |             |            |
-|`uniform int  uShininess;`                     |           |x              |            |             |            |
-|`uniform bool uUseLighting;`                   |           |x              |            |             |            |
-|`uniform float uConstantAttenuation;`          |           |x              |            |             |            |
-|`uniform float uLinearAttenuation;`            |           |x              |            |             |            |
-|`uniform float uQuadraticAttenuation;`         |           |x              |            |             |            |
-
-#### Texture Parameters
-
-|Parameter                             |Line Shader|TexLight Shader|Color Shader|Normal Shader|Point Shader|
-|--------------------------------------|-----------|---------------|------------|-------------|------------|
-|`uniform sampler2D uSampler;`         |           |x              |            |             |            |
-|`uniform bool isTexture;`             |           |x              |            |             |            |
-
-#### General Parameters
-
-|Parameter                             |Line Shader|TexLight Shader|Color Shader|Normal Shader|Point Shader|
-|--------------------------------------|-----------|---------------|------------|-------------|------------|
-|`uniform float uResolution;`          |           |               |x           |             |            |
-|`uniform float uPointSize;`           |           |               |x           |             |x           |
-
-#### Varying Parameters
-
-|Parameter                             |Line Shader|TexLight Shader|Color Shader|Normal Shader|Point Shader|
-|--------------------------------------|-----------|---------------|------------|-------------|------------|
-|`varying vec3 vVertexNormal;`         |           |x              |            |             |            |
-|`varying vec2 vVertTexCoord;`         |           |x              |            |             |            |
-|`varying vec3 vLightWeighting;`       |           |x              |            |             |            |
-|`varying highp vec2 vVertTexCoord;`   |           |               |            |x            |            |
-|`varying vec4 vColor;`                |           |               |x           |             |            |
-|`varying float vStrokeWeight`         |           |               |            |             |x           |
-
-## Next Steps
-
-Coming soon!
diff --git a/docs/yuidoc-p5-theme/assets/js/render.js b/docs/yuidoc-p5-theme/assets/js/render.js
index 8af9c9f8d5..aaac07bbb6 100644
--- a/docs/yuidoc-p5-theme/assets/js/render.js
+++ b/docs/yuidoc-p5-theme/assets/js/render.js
@@ -194,7 +194,7 @@ var renderCode = function(exampleName) {
 
       var s = function( p ) {
         var fxns = ['setup', 'draw', 'preload', 'mousePressed', 'mouseReleased',
-          'mouseMoved', 'mouseDragged', 'mouseClicked', 'mouseWheel',
+          'mouseMoved', 'mouseDragged', 'mouseClicked','doubleClicked','mouseWheel',
           'touchStarted', 'touchMoved', 'touchEnded',
           'keyPressed', 'keyReleased', 'keyTyped'];
         var _found = [];
diff --git a/src/accessibility/outputs.js b/src/accessibility/outputs.js
index dc6e51801f..0351528b53 100644
--- a/src/accessibility/outputs.js
+++ b/src/accessibility/outputs.js
@@ -300,7 +300,8 @@ p5.prototype._createOutput = function(type, display) {
     this.ingredients = {
       shapes: {},
       colors: { background: 'white', fill: 'white', stroke: 'black' },
-      pShapes: ''
+      pShapes: '',
+      pBackground: ''
     };
   }
   //if there is no dummyDOM create it
@@ -396,7 +397,10 @@ p5.prototype._createOutput = function(type, display) {
 p5.prototype._updateAccsOutput = function() {
   let cnvId = this.canvas.id;
   //if the shapes are not the same as before
-  if (JSON.stringify(this.ingredients.shapes) !== this.ingredients.pShapes) {
+  if (
+    JSON.stringify(this.ingredients.shapes) !== this.ingredients.pShapes ||
+    this.ingredients.colors.background !== this.ingredients.pBackground
+  ) {
     //save current shapes as string in pShapes
     this.ingredients.pShapes = JSON.stringify(this.ingredients.shapes);
     if (this._accessibleOutputs.text) {
@@ -419,6 +423,7 @@ p5.prototype._updateAccsOutput = function() {
 p5.prototype._accsBackground = function(args) {
   //save current shapes as string in pShapes
   this.ingredients.pShapes = JSON.stringify(this.ingredients.shapes);
+  this.ingredients.pBackground = this.ingredients.colors.background;
   //empty shapes JSON
   this.ingredients.shapes = {};
   //update background different
@@ -543,7 +548,8 @@ p5.prototype._getPos = function (x, y) {
     this.drawingContext.getTransform();
   const { x: transformedX, y: transformedY } = untransformedPosition
     .matrixTransform(currentTransform);
-  const { width: canvasWidth, height: canvasHeight } = this;
+  const canvasWidth = this.width * this._pixelDensity;
+  const canvasHeight = this.height * this._pixelDensity;
   if (transformedX < 0.4 * canvasWidth) {
     if (transformedY < 0.4 * canvasHeight) {
       return 'top left';
diff --git a/src/color/setting.js b/src/color/setting.js
index 0dc35c6283..457e686dd0 100644
--- a/src/color/setting.js
+++ b/src/color/setting.js
@@ -441,10 +441,10 @@ p5.prototype.background = function(...args) {
  * </code>
  * </div>
  *
- * @param {Number} r normalized red value.
- * @param {Number} g normalized green value.
- * @param {Number} b normalized blue value.
- * @param {Number} a normalized alpha value.
+ * @param {Number} [r] normalized red value.
+ * @param {Number} [g] normalized green value.
+ * @param {Number} [b] normalized blue value.
+ * @param {Number} [a] normalized alpha value.
  */
 p5.prototype.clear = function(...args) {
   const _r = args[0] || 0;
diff --git a/src/core/p5.Graphics.js b/src/core/p5.Graphics.js
index 2de8fe011b..9fa18e6090 100644
--- a/src/core/p5.Graphics.js
+++ b/src/core/p5.Graphics.js
@@ -204,6 +204,7 @@ p5.Graphics = class extends p5.Element {
    * createFramebuffer function.</a>
    *
    * @method createFramebuffer
+   * @return {p5.Framebuffer}
    */
   createFramebuffer(options) {
     return new p5.Framebuffer(this, options);
diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js
index 2a9690fcdf..45ffd403ae 100644
--- a/src/core/p5.Renderer2D.js
+++ b/src/core/p5.Renderer2D.js
@@ -1329,7 +1329,7 @@ class Renderer2D extends p5.Renderer {
     }
 
     this.drawingContext.font = `${this._textStyle || 'normal'} ${this._textSize ||
-      12}px ${font || 'sans-serif'}`;
+      12}px "${font || 'sans-serif'}"`;
 
     this.drawingContext.textAlign = this._textAlign;
     if (this._textBaseline === constants.CENTER) {
diff --git a/src/core/rendering.js b/src/core/rendering.js
index 0dd33f2732..dffc6a38f5 100644
--- a/src/core/rendering.js
+++ b/src/core/rendering.js
@@ -326,16 +326,16 @@ p5.prototype.createGraphics = function(w, h, ...args) {
  *
  * @method createFramebuffer
  * @param {Object} [options] An optional object with configuration
+ * @return {p5.Framebuffer}
  *
  * @example
  * <div>
  * <code>
- * let prev, next, cam;
+ * let prev, next;
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
  *   prev = createFramebuffer({ format: FLOAT });
  *   next = createFramebuffer({ format: FLOAT });
- *   cam = createCamera();
  *   noStroke();
  * }
  *
@@ -349,12 +349,11 @@ p5.prototype.createGraphics = function(w, h, ...args) {
  *   background(255);
  *
  *   push();
- *   // Draw the previous texture farther away, but scaled
- *   // up to fill the screen, plus a bit extra scale so it grows
- *   translate(0, 0, -200);
- *   scale(1.001 * (200 + cam.eyeZ) / cam.eyeZ);
  *   tint(255, 253);
  *   image(prev, -width/2, -height/2);
+ *   // Make sure the image plane doesn't block you from seeing any part
+ *   // of the scene
+ *   clearDepth();
  *   pop();
  *
  *   push();
@@ -379,6 +378,76 @@ p5.prototype.createFramebuffer = function(options) {
   return new p5.Framebuffer(this, options);
 };
 
+/**
+ * This makes the canvas forget how far from the camera everything that has
+ * been drawn was. Use this if you want to make sure the next thing you draw
+ * will not draw behind anything that is already on the canvas.
+ *
+ * This is useful for things like feedback effects, where you want the previous
+ * frame to act like a background for the next frame, and not like a plane in
+ * 3D space in the scene.
+ *
+ * This method is only available in WebGL mode. Since 2D mode does not have
+ * 3D depth, anything you draw will always go on top of the previous content on
+ * the canvas anyway.
+ *
+ * @method clearDepth
+ * @param {Number} [depth] The value, between 0 and 1, to reset the depth to, where
+ * 0 corresponds to a value as close as possible to the camera before getting
+ * clipped, and 1 corresponds to a value as far away from the camera as possible.
+ * The default value is 1.
+ *
+ * @example
+ * <div>
+ * <code>
+ * let prev, next;
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   prev = createFramebuffer({ format: FLOAT });
+ *   next = createFramebuffer({ format: FLOAT });
+ *   noStroke();
+ * }
+ *
+ * function draw() {
+ *   // Swap prev and next so that we can use the previous
+ *   // frame as a texture when drawing the current frame
+ *   [prev, next] = [next, prev];
+ *
+ *   // Draw to the framebuffer
+ *   next.begin();
+ *   background(255);
+ *
+ *   push();
+ *   tint(255, 253);
+ *   image(prev, -width/2, -height/2);
+ *   // Make sure the image plane doesn't block you from seeing any part
+ *   // of the scene
+ *   clearDepth();
+ *   pop();
+ *
+ *   push();
+ *   normalMaterial();
+ *   translate(25*sin(frameCount * 0.014), 25*sin(frameCount * 0.02), 0);
+ *   rotateX(frameCount * 0.01);
+ *   rotateY(frameCount * 0.01);
+ *   box(12);
+ *   pop();
+ *   next.end();
+ *
+ *   image(next, -width/2, -height/2);
+ * }
+ * </code>
+ * </div>
+ *
+ * @alt
+ * A red, green, and blue box (using normalMaterial) moves and rotates around
+ * the canvas, leaving a trail behind it that slowly grows and fades away.
+ */
+p5.prototype.clearDepth = function(depth) {
+  this._assert3d('clearDepth');
+  this._renderer.clearDepth(depth);
+};
+
 /**
  * Blends the pixels in the display window according to the defined mode.
  * There is a choice of the following modes to blend the source pixels (A)
diff --git a/src/core/shape/vertex.js b/src/core/shape/vertex.js
index b08d5830cf..f0e1815632 100644
--- a/src/core/shape/vertex.js
+++ b/src/core/shape/vertex.js
@@ -647,12 +647,12 @@ p5.prototype.endContour = function() {
  *
  *   // gl_InstanceID represents a numeric value for each instance
  *   // using gl_InstanceID allows us to move each instance separately
- *   // here we move each instance horizontally by id * 40
- *   float xOffset = float(gl_InstanceID) * 40.0;
+ *   // here we move each instance horizontally by id * 23
+ *   float xOffset = float(gl_InstanceID) * 23.0;
  *
  *   // apply the offset to the final position
- *   gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4 -
- *     vec4(xOffset, 0.0, 0.0, 0.0);
+ *   gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -
+ *     vec4(xOffset, 0.0, 0.0, 0.0));
  * }
  * `;
  * let fs = `#version 300 es
diff --git a/src/core/transform.js b/src/core/transform.js
index 1fe7987a09..4ed2e0118e 100644
--- a/src/core/transform.js
+++ b/src/core/transform.js
@@ -275,6 +275,8 @@ p5.prototype.rotate = function(angle, axis) {
  * <code>
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  * }
  * function draw() {
  *   background(255);
@@ -311,6 +313,8 @@ p5.prototype.rotateX = function(angle) {
  * <code>
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  * }
  * function draw() {
  *   background(255);
@@ -349,6 +353,8 @@ p5.prototype.rotateY = function(angle) {
  * <code>
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  * }
  * function draw() {
  *   background(255);
diff --git a/src/math/random.js b/src/math/random.js
index 4b9d519203..5a5ef7de60 100644
--- a/src/math/random.js
+++ b/src/math/random.js
@@ -108,7 +108,7 @@ p5.prototype.randomSeed = function(seed) {
  * strokeWeight(5);
  * point(x, y);
  *
- * describe('A black dot appears in a random posiiton on a gray square.');
+ * describe('A black dot appears in a random position on a gray square.');
  * </code>
  * </div>
  *
diff --git a/src/math/trigonometry.js b/src/math/trigonometry.js
index c22f0e4d80..303cdeba92 100644
--- a/src/math/trigonometry.js
+++ b/src/math/trigonometry.js
@@ -42,7 +42,7 @@ p5.prototype._angleMode = constants.RADIANS;
  *
  * <div>
  * <code>
- * let a = PI;
+ * let a = PI + QUARTER_PI;
  * let c = cos(a);
  * let ac = acos(c);
  * text(`${round(a, 3)}`, 35, 25);
diff --git a/src/utilities/array_functions.js b/src/utilities/array_functions.js
index acab0fff82..58e482bb6a 100644
--- a/src/utilities/array_functions.js
+++ b/src/utilities/array_functions.js
@@ -340,5 +340,39 @@ p5.prototype.subset = function(list, start, count) {
     return list.slice(start, list.length);
   }
 };
+/*
+* @method range 
+* @param  {Integer} start    Starting index for the iterator 
+* @param  {Integer} end      limit for the iterator 
+* @param  {Integer} step     the interval to increase in every step 
+* @return  [Symbol.iterator]: {Integer} 
+* 
+* @example 
+* <div class = 'norender'><code> 
+* for(let x of range(width, 50)) { 
+*  circle(x, height / 2, 50); 
+* } 
+* </code></div> 
+*/ 
+p5.prototype.range = function(...args) { 
+  let end;
+  let start = 0;
+  let step = 1; 
+  if(args.length == 1) {
+    end = args[0]; 
+  } else if(args.length == 2) { 
+    start = args[0]; 
+    end = args[1]; 
+  } else if(args.length == 3) { 
+    start = args[0]; 
+    end = args[1]; 
+    step = args[2]; 
+  } else throw new Error("Invalid arguments"); 
+  return { 
+    *[Symbol.iterator] () { 
+      for(let i = start; i < end; i += step) yield i;
+    }
+  }
+};
 
 export default p5;
diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js
index 83bcef7468..f5bd16fd17 100644
--- a/src/webgl/3d_primitives.js
+++ b/src/webgl/3d_primitives.js
@@ -283,6 +283,8 @@ p5.prototype.plane = function(width, height, detailX, detailY) {
  * // with width, height and depth of 50
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   describe('a white box rotating in 3D space');
  * }
  *
@@ -1026,6 +1028,8 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) {
  * // with ring radius 30 and tube radius 15
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   describe('a rotating white torus');
  * }
  *
@@ -1045,6 +1049,8 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) {
  * let detailX;
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   detailX = createSlider(3, 24, 3);
  *   detailX.position(10, height + 5);
  *   detailX.style('width', '80px');
@@ -1068,6 +1074,8 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) {
  * let detailY;
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   detailY = createSlider(3, 16, 3);
  *   detailY.position(10, height + 5);
  *   detailY.style('width', '80px');
diff --git a/src/webgl/interaction.js b/src/webgl/interaction.js
index 828fdd32a2..bc1df2badc 100644
--- a/src/webgl/interaction.js
+++ b/src/webgl/interaction.js
@@ -45,6 +45,8 @@ import * as constants from '../core/constants';
  *   describe(
  *     'Camera orbits around a box when mouse is hold-clicked & then moved.'
  *   );
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  * }
  * function draw() {
  *   background(200);
@@ -221,7 +223,7 @@ p5.prototype.orbitControl = function(
       if (pointersInCanvas) this._renderer.executeZoom = true;
     } else {
       // quit zoom when you stop wheeling.
-      this._renderer.zoomFlag = false;
+      this._renderer.executeZoom = false;
     }
     if (this.mouseIsPressed) {
       if (this.mouseButton === this.LEFT) {
@@ -396,6 +398,7 @@ p5.prototype.orbitControl = function(
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
  *   camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   normalMaterial();
  *   debugMode();
  *   describe(
@@ -426,6 +429,7 @@ p5.prototype.orbitControl = function(
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
  *   camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   normalMaterial();
  *   debugMode(GRID);
  *   describe('a 3D box is centered on a grid in a 3D sketch.');
@@ -447,6 +451,7 @@ p5.prototype.orbitControl = function(
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
  *   camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   normalMaterial();
  *   debugMode(AXES);
  *   describe(
@@ -472,6 +477,7 @@ p5.prototype.orbitControl = function(
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
  *   camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   normalMaterial();
  *   debugMode(GRID, 100, 10, 0, 0, 0);
  *   describe('a 3D box is centered on a grid in a 3D sketch');
@@ -493,6 +499,7 @@ p5.prototype.orbitControl = function(
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
  *   camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   normalMaterial();
  *   debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);
  *   describe(
@@ -601,6 +608,7 @@ p5.prototype.debugMode = function(...args) {
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
  *   camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   normalMaterial();
  *   debugMode();
  *   describe(
@@ -678,24 +686,7 @@ p5.prototype._grid = function(size, numDivs, xOff, yOff, zOff) {
       this._renderer.curStrokeColor[1] * 255,
       this._renderer.curStrokeColor[2] * 255
     );
-    this._renderer.uMVMatrix.set(
-      this._renderer._curCamera.cameraMatrix.mat4[0],
-      this._renderer._curCamera.cameraMatrix.mat4[1],
-      this._renderer._curCamera.cameraMatrix.mat4[2],
-      this._renderer._curCamera.cameraMatrix.mat4[3],
-      this._renderer._curCamera.cameraMatrix.mat4[4],
-      this._renderer._curCamera.cameraMatrix.mat4[5],
-      this._renderer._curCamera.cameraMatrix.mat4[6],
-      this._renderer._curCamera.cameraMatrix.mat4[7],
-      this._renderer._curCamera.cameraMatrix.mat4[8],
-      this._renderer._curCamera.cameraMatrix.mat4[9],
-      this._renderer._curCamera.cameraMatrix.mat4[10],
-      this._renderer._curCamera.cameraMatrix.mat4[11],
-      this._renderer._curCamera.cameraMatrix.mat4[12],
-      this._renderer._curCamera.cameraMatrix.mat4[13],
-      this._renderer._curCamera.cameraMatrix.mat4[14],
-      this._renderer._curCamera.cameraMatrix.mat4[15]
-    );
+    this._renderer.uMVMatrix.set(this._renderer._curCamera.cameraMatrix);
 
     // Lines along X axis
     for (let q = 0; q <= numDivs; q++) {
@@ -742,24 +733,7 @@ p5.prototype._axesIcon = function(size, xOff, yOff, zOff) {
 
   return function() {
     this.push();
-    this._renderer.uMVMatrix.set(
-      this._renderer._curCamera.cameraMatrix.mat4[0],
-      this._renderer._curCamera.cameraMatrix.mat4[1],
-      this._renderer._curCamera.cameraMatrix.mat4[2],
-      this._renderer._curCamera.cameraMatrix.mat4[3],
-      this._renderer._curCamera.cameraMatrix.mat4[4],
-      this._renderer._curCamera.cameraMatrix.mat4[5],
-      this._renderer._curCamera.cameraMatrix.mat4[6],
-      this._renderer._curCamera.cameraMatrix.mat4[7],
-      this._renderer._curCamera.cameraMatrix.mat4[8],
-      this._renderer._curCamera.cameraMatrix.mat4[9],
-      this._renderer._curCamera.cameraMatrix.mat4[10],
-      this._renderer._curCamera.cameraMatrix.mat4[11],
-      this._renderer._curCamera.cameraMatrix.mat4[12],
-      this._renderer._curCamera.cameraMatrix.mat4[13],
-      this._renderer._curCamera.cameraMatrix.mat4[14],
-      this._renderer._curCamera.cameraMatrix.mat4[15]
-    );
+    this._renderer.uMVMatrix.set(this._renderer._curCamera.cameraMatrix);
 
     // X axis
     this.strokeWeight(2);
diff --git a/src/webgl/light.js b/src/webgl/light.js
index fcfd9e60d5..81f052c3d1 100644
--- a/src/webgl/light.js
+++ b/src/webgl/light.js
@@ -519,28 +519,34 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
  * <div class="notest">
  * <code>
  * let img;
+ *
  * function preload() {
  *   img = loadImage('assets/outdoor_image.jpg');
  * }
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0);
+ *   perspective(PI/3, 1, 5, 500);
  * }
  * function draw() {
  *   background(220);
- *   imageMode(CENTER);
+ *
  *   push();
- *   translate(0, 0, -200);
- *   scale(2);
- *   image(img, 0, 0, width, height);
+ *   camera(0, 0, 1, 0, 0, 0, 0, 1, 0);
+ *   ortho(-1, 1, -1, 1, 0, 1);
+ *   noLights();
+ *   noStroke();
+ *   texture(img);
+ *   plane(2);
  *   pop();
+ *
  *   ambientLight(50);
  *   imageLight(img);
  *   specularMaterial(20);
  *   noStroke();
- *   scale(2);
  *   rotateX(frameCount * 0.005);
  *   rotateY(frameCount * 0.005);
- *   box(25);
+ *   box(50);
  * }
  * </code>
  * </div>
@@ -551,6 +557,7 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
  * <code>
  * let img;
  * let slider;
+ *
  * function preload() {
  *   img = loadImage('assets/outdoor_spheremap.jpg');
  * }
@@ -558,22 +565,27 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
  *   createCanvas(100, 100, WEBGL);
  *   slider = createSlider(0, 400, 100, 1);
  *   slider.position(0, height);
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0);
+ *   perspective(PI/3, 1, 5, 500);
  * }
  * function draw() {
  *   background(220);
- *   imageMode(CENTER);
+ *
  *   push();
- *   translate(0, 0, -200);
- *   scale(2);
- *   image(img, 0, 0, width, height);
+ *   camera(0, 0, 1, 0, 0, 0, 0, 1, 0);
+ *   ortho(-1, 1, -1, 1, 0, 1);
+ *   noLights();
+ *   noStroke();
+ *   texture(img);
+ *   plane(2);
  *   pop();
+ *
  *   ambientLight(50);
  *   imageLight(img);
  *   specularMaterial(20);
  *   shininess(slider.value());
  *   noStroke();
- *   scale(2);
- *   sphere(15);
+ *   sphere(30);
  * }
  * </code>
  * </div>
@@ -604,6 +616,8 @@ p5.prototype.imageLight = function(img){
  * <code>
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   describe('the light is partially ambient and partially directional');
  * }
  * function draw() {
diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js
index 64d64105e5..a661c357b0 100644
--- a/src/webgl/p5.Camera.js
+++ b/src/webgl/p5.Camera.js
@@ -26,7 +26,7 @@ import p5 from '../core/main';
  * to view the position of your camera.
  *
  * If no parameters are given, the following default is used:
- * camera(0, 0, (height/2) / tan(PI/6), 0, 0, 0, 0, 1, 0)
+ * camera(0, 0, 800, 0, 0, 0, 0, 1, 0)
  * @method camera
  * @constructor
  * @for p5
@@ -45,6 +45,7 @@ import p5 from '../core/main';
  * <code>
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   describe('a square moving closer and then away from the camera.');
  * }
  * function draw() {
@@ -72,6 +73,7 @@ import p5 from '../core/main';
  *
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
+ *   perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   //create sliders
  *   for (var i = 0; i < 6; i++) {
  *     if (i === 2) {
@@ -154,6 +156,7 @@ p5.prototype.camera = function (...args) {
  * //drag the mouse to look around!
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
  *   perspective(PI / 3.0, width / height, 0.1, 500);
  *   describe(
  *     'two colored 3D boxes move back and forth, rotating as mouse is dragged.'
@@ -164,16 +167,16 @@ p5.prototype.camera = function (...args) {
  *   orbitControl();
  *   normalMaterial();
  *
- *   translate(0, 0, 550);
  *   rotateX(-0.3);
  *   rotateY(-0.2);
+ *   translate(0, 0, -50);
  *
  *   push();
- *   translate(-15, 0, sin(frameCount / 30) * 95);
+ *   translate(-15, 0, sin(frameCount / 30) * 65);
  *   box(30);
  *   pop();
  *   push();
- *   translate(15, 0, sin(frameCount / 30 + PI) * 95);
+ *   translate(15, 0, sin(frameCount / 30 + PI) * 65);
  *   box(30);
  *   pop();
  * }
@@ -202,7 +205,7 @@ p5.prototype.perspective = function (...args) {
  * maximum z values.
  *
  * If no parameters are given, the following default is used:
- * ortho(-width/2, width/2, -height/2, height/2).
+ * ortho(-width/2, width/2, -height/2, height/2, 0, max(width, height)).
  * @method  ortho
  * @for p5
  * @param  {Number} [left]   camera frustum left plane
@@ -219,6 +222,7 @@ p5.prototype.perspective = function (...args) {
  * //there's no vanishing point
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
  *   ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);
  *   describe(
  *     'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'
@@ -229,7 +233,6 @@ p5.prototype.perspective = function (...args) {
  *   orbitControl();
  *   normalMaterial();
  *
- *   translate(0,0,500);
  *   rotateX(0.2);
  *   rotateY(-0.2);
  *   push();
@@ -271,7 +274,7 @@ p5.prototype.ortho = function (...args) {
  *
  * If no parameters are given, the following default is used:
  * frustum(-width/20, width/20, height/20, -height/20, eyeZ/10, eyeZ*10),
- * where eyeZ is equal to ((height/2) / tan(PI/6)).
+ * where eyeZ is equal to 800.
  * @method frustum
  * @for p5
  * @param  {Number} [left]   camera frustum left plane
@@ -287,6 +290,7 @@ p5.prototype.ortho = function (...args) {
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
  *   setAttributes('antialias', true);
+ *   camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
  *   frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);
  *   describe(
  *     'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'
@@ -296,7 +300,7 @@ p5.prototype.ortho = function (...args) {
  *   background(200);
  *   orbitControl();
  *   normalMaterial();
- *   translate(0,0,700);
+ *
  *   rotateY(-0.2);
  *   rotateX(-0.3);
  *   push();
@@ -353,6 +357,8 @@ p5.prototype.frustum = function (...args) {
  *   createCanvas(100, 100, WEBGL);
  *   background(0);
  *   camera = createCamera();
+ *   camera.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   camera.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   describe('An example that creates a camera and moves it around the box.');
  * }
  *
@@ -417,7 +423,7 @@ p5.prototype.createCamera = function () {
  * <a href="#/p5.Camera/setPosition">setPosition()</a>
  * method sets the camera's position in world-space.
  *
- * The camera object propreties
+ * The camera object properties
  * <code>eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ</code>
  * which describes camera position, orientation, and projection
  * are also accessible via the camera object generated using
@@ -435,6 +441,8 @@ p5.prototype.createCamera = function () {
  *   createCanvas(100, 100, WEBGL);
  *   normalMaterial();
  *   cam = createCamera();
+ *   cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   // set initial pan angle
  *   cam.pan(-0.8);
  *   describe(
@@ -486,7 +494,7 @@ p5.Camera = class Camera {
     this.yScale = 1;
   }
   /**
- * camera position value on x axis
+ * camera position value on x axis. default value is 0
  * @property {Number} eyeX
  * @readonly
  * @example
@@ -515,7 +523,7 @@ p5.Camera = class Camera {
  */
 
   /**
- * camera position value on y axis
+ * camera position value on y axis. default value is 0
  * @property {Number} eyeY
  * @readonly
  * @example
@@ -543,7 +551,7 @@ p5.Camera = class Camera {
  */
 
   /**
- * camera position value on z axis
+ * camera position value on z axis. default value is 800
  * @property {Number} eyeZ
  * @readonly
  * @example
@@ -751,6 +759,7 @@ p5.Camera = class Camera {
  *   createCanvas(100, 100, WEBGL);
  *   // create a camera
  *   cam = createCamera();
+ *   cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
  *   // give it a perspective projection
  *   cam.perspective(PI / 3.0, width / height, 0.1, 500);
  * }
@@ -760,16 +769,16 @@ p5.Camera = class Camera {
  *   orbitControl();
  *   normalMaterial();
  *
- *   translate(0, 0, 550);
  *   rotateX(-0.3);
  *   rotateY(-0.2);
+ *   translate(0, 0, -50);
  *
  *   push();
- *   translate(-15, 0, sin(frameCount / 30) * 95);
+ *   translate(-15, 0, sin(frameCount / 30) * 65);
  *   box(30);
  *   pop();
  *   push();
- *   translate(15, 0, sin(frameCount / 30 + PI) * 95);
+ *   translate(15, 0, sin(frameCount / 30 + PI) * 65);
  *   box(30);
  *   pop();
  * }
@@ -831,24 +840,7 @@ p5.Camera = class Camera {
     /* eslint-enable indent */
 
     if (this._isActive()) {
-      this._renderer.uPMatrix.set(
-        this.projMatrix.mat4[0],
-        this.projMatrix.mat4[1],
-        this.projMatrix.mat4[2],
-        this.projMatrix.mat4[3],
-        this.projMatrix.mat4[4],
-        this.projMatrix.mat4[5],
-        this.projMatrix.mat4[6],
-        this.projMatrix.mat4[7],
-        this.projMatrix.mat4[8],
-        this.projMatrix.mat4[9],
-        this.projMatrix.mat4[10],
-        this.projMatrix.mat4[11],
-        this.projMatrix.mat4[12],
-        this.projMatrix.mat4[13],
-        this.projMatrix.mat4[14],
-        this.projMatrix.mat4[15]
-      );
+      this._renderer.uPMatrix.set(this.projMatrix);
     }
   }
 
@@ -871,6 +863,7 @@ p5.Camera = class Camera {
  *   createCanvas(100, 100, WEBGL);
  *   // create a camera
  *   cam = createCamera();
+ *   cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
  *   // give it an orthographic projection
  *   cam.ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);
  * }
@@ -878,7 +871,7 @@ p5.Camera = class Camera {
  *   background(200);
  *   orbitControl();
  *   normalMaterial();
- *   translate(0,0,500);
+ *
  *   rotateX(0.2);
  *   rotateY(-0.2);
  *   push();
@@ -902,7 +895,7 @@ p5.Camera = class Camera {
     if (top === undefined) top = +this._renderer.height / 2;
     if (near === undefined) near = 0;
     if (far === undefined)
-      far = Math.max(this._renderer.width, this._renderer.height);
+      far = Math.max(this._renderer.width, this._renderer.height)+800;
 
     this.cameraNear = near;
     this.cameraFar = far;
@@ -929,24 +922,7 @@ p5.Camera = class Camera {
     /* eslint-enable indent */
 
     if (this._isActive()) {
-      this._renderer.uPMatrix.set(
-        this.projMatrix.mat4[0],
-        this.projMatrix.mat4[1],
-        this.projMatrix.mat4[2],
-        this.projMatrix.mat4[3],
-        this.projMatrix.mat4[4],
-        this.projMatrix.mat4[5],
-        this.projMatrix.mat4[6],
-        this.projMatrix.mat4[7],
-        this.projMatrix.mat4[8],
-        this.projMatrix.mat4[9],
-        this.projMatrix.mat4[10],
-        this.projMatrix.mat4[11],
-        this.projMatrix.mat4[12],
-        this.projMatrix.mat4[13],
-        this.projMatrix.mat4[14],
-        this.projMatrix.mat4[15]
-      );
+      this._renderer.uPMatrix.set(this.projMatrix);
     }
 
     this.cameraType = 'custom';
@@ -969,6 +945,7 @@ p5.Camera = class Camera {
  *   setAttributes('antialias', true);
  *   // create a camera
  *   cam = createCamera();
+ *   cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
  *   // set its frustum
  *   cam.frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);
  * }
@@ -977,7 +954,7 @@ p5.Camera = class Camera {
  *   background(200);
  *   orbitControl();
  *   normalMaterial();
- *   translate(0,0,700);
+ *
  *   rotateY(-0.2);
  *   rotateX(-0.3);
  *   push();
@@ -1027,24 +1004,7 @@ p5.Camera = class Camera {
     /* eslint-enable indent */
 
     if (this._isActive()) {
-      this._renderer.uPMatrix.set(
-        this.projMatrix.mat4[0],
-        this.projMatrix.mat4[1],
-        this.projMatrix.mat4[2],
-        this.projMatrix.mat4[3],
-        this.projMatrix.mat4[4],
-        this.projMatrix.mat4[5],
-        this.projMatrix.mat4[6],
-        this.projMatrix.mat4[7],
-        this.projMatrix.mat4[8],
-        this.projMatrix.mat4[9],
-        this.projMatrix.mat4[10],
-        this.projMatrix.mat4[11],
-        this.projMatrix.mat4[12],
-        this.projMatrix.mat4[13],
-        this.projMatrix.mat4[14],
-        this.projMatrix.mat4[15]
-      );
+      this._renderer.uPMatrix.set(this.projMatrix);
     }
 
     this.cameraType = 'custom';
@@ -1115,6 +1075,8 @@ p5.Camera = class Camera {
  *   createCanvas(100, 100, WEBGL);
  *   normalMaterial();
  *   cam = createCamera();
+ *   cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   // set initial pan angle
  *   cam.pan(-0.8);
  * }
@@ -1173,6 +1135,8 @@ p5.Camera = class Camera {
  *   createCanvas(100, 100, WEBGL);
  *   normalMaterial();
  *   cam = createCamera();
+ *   cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   // set initial tilt
  *   cam.tilt(-0.8);
  * }
@@ -1231,6 +1195,8 @@ p5.Camera = class Camera {
  *   createCanvas(100, 100, WEBGL);
  *   normalMaterial();
  *   cam = createCamera();
+ *   cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  * }
  *
  * function draw() {
@@ -1333,6 +1299,7 @@ p5.Camera = class Camera {
  *   createCanvas(100, 100, WEBGL);
  *   // create a camera
  *   cam = createCamera();
+ *   cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   // create sliders
  *   for (var i = 0; i < 6; i++) {
  *     if (i === 2) {
@@ -1424,24 +1391,7 @@ p5.Camera = class Camera {
     this.cameraMatrix.translate([tx, ty, tz]);
 
     if (this._isActive()) {
-      this._renderer.uMVMatrix.set(
-        this.cameraMatrix.mat4[0],
-        this.cameraMatrix.mat4[1],
-        this.cameraMatrix.mat4[2],
-        this.cameraMatrix.mat4[3],
-        this.cameraMatrix.mat4[4],
-        this.cameraMatrix.mat4[5],
-        this.cameraMatrix.mat4[6],
-        this.cameraMatrix.mat4[7],
-        this.cameraMatrix.mat4[8],
-        this.cameraMatrix.mat4[9],
-        this.cameraMatrix.mat4[10],
-        this.cameraMatrix.mat4[11],
-        this.cameraMatrix.mat4[12],
-        this.cameraMatrix.mat4[13],
-        this.cameraMatrix.mat4[14],
-        this.cameraMatrix.mat4[15]
-      );
+      this._renderer.uMVMatrix.set(this.cameraMatrix);
     }
     return this;
   }
@@ -1463,6 +1413,8 @@ p5.Camera = class Camera {
  *   createCanvas(100, 100, WEBGL);
  *   normalMaterial();
  *   cam = createCamera();
+ *   cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  * }
  *
  * function draw() {
@@ -1536,6 +1488,8 @@ p5.Camera = class Camera {
  *   createCanvas(100, 100, WEBGL);
  *   normalMaterial();
  *   cam = createCamera();
+ *   cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  * }
  *
  * function draw() {
@@ -1600,8 +1554,11 @@ p5.Camera = class Camera {
  *   // Set the initial state to initialCamera and set it to the camera
  *   // used for drawing. Then set cam to be the active camera.
  *   cam = createCamera();
+ *   cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   initialCam = createCamera();
  *   initialCam.camera(100, 100, 100, 0, 0, 0, 0, 0, -1);
+ *   initialCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   cam.set(initialCam);
  *
  *   setCamera(cam);
@@ -1678,11 +1635,17 @@ p5.Camera = class Camera {
  *
  *   // camera for slerp.
  *   cam = createCamera();
+ *   cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   // cam0 is looking at the cube from the front.
+ *   cam0 = createCamera();
+ *   cam0.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   cam0.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   // cam1 is pointing straight to the right in the cube
  *   // at the same position as cam0 by doing a pan(-PI/2).
- *   cam0 = createCamera();
  *   cam1 = createCamera();
+ *   cam1.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   cam1.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   cam1.pan(-PI/2);
  *
  *   // we only use cam.
@@ -1720,9 +1683,18 @@ p5.Camera = class Camera {
  *   createCanvas(100, 100, WEBGL);
  *   strokeWeight(3);
  *
- *   cam = createCamera(); // main camera
- *   lastCam = createCamera(); // Camera for recording loc info before reset
- *   initialCam = createCamera(); // Camera for recording the initial state
+ *   // main camera
+ *   cam = createCamera();
+ *   cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+ *   // Camera for recording loc info before reset
+ *   lastCam = createCamera();
+ *   lastCam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   lastCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+ *   // Camera for recording the initial state
+ *   initialCam = createCamera();
+ *   initialCam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   initialCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *
  *   setCamera(cam); // set main camera
  * }
@@ -2110,9 +2082,9 @@ p5.Camera = class Camera {
     // up vector. normalized camera's up vector.
     const up = new p5.Vector(this.upX, this.upY, this.upZ).normalize(); // y-axis
     // side vector. Right when viewed from the front
-    const side = new p5.Vector.cross(up, front).normalize(); // x-axis
+    const side = p5.Vector.cross(up, front).normalize(); // x-axis
     // vertical vector. normalized vector of projection of front vector.
-    const vertical = new p5.Vector.cross(side, up); // z-axis
+    const vertical = p5.Vector.cross(side, up); // z-axis
 
     // update camRadius
     camRadius *= Math.pow(10, dRadius);
@@ -2180,9 +2152,9 @@ p5.Camera = class Camera {
     // up vector. camera's up vector.
     const up = new p5.Vector(this.upX, this.upY, this.upZ);
     // side vector. Right when viewed from the front. (like x-axis)
-    const side = new p5.Vector.cross(up, front).normalize();
+    const side = p5.Vector.cross(up, front).normalize();
     // down vector. Bottom when viewed from the front. (like y-axis)
-    const down = new p5.Vector.cross(front, side);
+    const down = p5.Vector.cross(front, side);
 
     // side vector and down vector are no longer used as-is.
     // Create a vector representing the direction of rotation
@@ -2195,7 +2167,7 @@ p5.Camera = class Camera {
     const rotAngle = Math.sqrt(dx*dx + dy*dy);
     // The vector that is orthogonal to both the front vector and
     // the rotation direction vector is the rotation axis vector.
-    const axis = new p5.Vector.cross(front, side);
+    const axis = p5.Vector.cross(front, side);
 
     // update camRadius
     camRadius *= Math.pow(10, dRadius);
@@ -2265,10 +2237,12 @@ p5.Camera = class Camera {
  *   normalMaterial();
  *
  *   cam1 = createCamera();
+ *   cam1.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
+ *   cam1.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
  *   cam2 = createCamera();
  *   cam2.setPosition(30, 0, 50);
  *   cam2.lookAt(0, 0, 0);
- *   cam2.ortho();
+ *   cam2.ortho(-50, 50, -50, 50, 0, 200);
  *
  *   // set variable for previously active camera:
  *   currentCamera = 1;
@@ -2281,10 +2255,6 @@ p5.Camera = class Camera {
  * function draw() {
  *   background(200);
  *
- *   // camera 1:
- *   cam1.lookAt(0, 0, 0);
- *   cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);
- *
  *   // every 100 frames, switch between the two cameras
  *   if (frameCount % 100 === 0) {
  *     if (currentCamera === 1) {
@@ -2296,6 +2266,10 @@ p5.Camera = class Camera {
  *     }
  *   }
  *
+ *   // camera 1:
+ *   cam1.lookAt(0, 0, 0);
+ *   cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);
+ *
  *   drawBoxes();
  * }
  *
@@ -2327,24 +2301,7 @@ p5.prototype.setCamera = function (cam) {
   this._renderer._curCamera = cam;
 
   // set the projection matrix (which is not normally updated each frame)
-  this._renderer.uPMatrix.set(
-    cam.projMatrix.mat4[0],
-    cam.projMatrix.mat4[1],
-    cam.projMatrix.mat4[2],
-    cam.projMatrix.mat4[3],
-    cam.projMatrix.mat4[4],
-    cam.projMatrix.mat4[5],
-    cam.projMatrix.mat4[6],
-    cam.projMatrix.mat4[7],
-    cam.projMatrix.mat4[8],
-    cam.projMatrix.mat4[9],
-    cam.projMatrix.mat4[10],
-    cam.projMatrix.mat4[11],
-    cam.projMatrix.mat4[12],
-    cam.projMatrix.mat4[13],
-    cam.projMatrix.mat4[14],
-    cam.projMatrix.mat4[15]
-  );
+  this._renderer.uPMatrix.set(cam.projMatrix);
 };
 
 export default p5.Camera;
diff --git a/src/webgl/p5.Framebuffer.js b/src/webgl/p5.Framebuffer.js
index 7003a12fc1..55585a5e17 100644
--- a/src/webgl/p5.Framebuffer.js
+++ b/src/webgl/p5.Framebuffer.js
@@ -843,22 +843,7 @@ class Framebuffer {
     // it only sets the camera.
     this.target.setCamera(this.defaultCamera);
     this.target._renderer.uMVMatrix.set(
-      this.target._renderer._curCamera.cameraMatrix.mat4[0],
-      this.target._renderer._curCamera.cameraMatrix.mat4[1],
-      this.target._renderer._curCamera.cameraMatrix.mat4[2],
-      this.target._renderer._curCamera.cameraMatrix.mat4[3],
-      this.target._renderer._curCamera.cameraMatrix.mat4[4],
-      this.target._renderer._curCamera.cameraMatrix.mat4[5],
-      this.target._renderer._curCamera.cameraMatrix.mat4[6],
-      this.target._renderer._curCamera.cameraMatrix.mat4[7],
-      this.target._renderer._curCamera.cameraMatrix.mat4[8],
-      this.target._renderer._curCamera.cameraMatrix.mat4[9],
-      this.target._renderer._curCamera.cameraMatrix.mat4[10],
-      this.target._renderer._curCamera.cameraMatrix.mat4[11],
-      this.target._renderer._curCamera.cameraMatrix.mat4[12],
-      this.target._renderer._curCamera.cameraMatrix.mat4[13],
-      this.target._renderer._curCamera.cameraMatrix.mat4[14],
-      this.target._renderer._curCamera.cameraMatrix.mat4[15]
+      this.target._renderer._curCamera.cameraMatrix
     );
   }
 
diff --git a/src/webgl/p5.Matrix.js b/src/webgl/p5.Matrix.js
index 8b288c6ed7..9e2a096f5d 100644
--- a/src/webgl/p5.Matrix.js
+++ b/src/webgl/p5.Matrix.js
@@ -48,8 +48,10 @@ p5.Matrix = class {
   }
 
   /**
- * Sets the x, y, and z component of the vector using two or three separate
- * variables, the data from a p5.Matrix, or the values from a float array.
+ * Replace the entire contents of a 4x4 matrix.
+ * If providing an array or a p5.Matrix, the values will be copied without
+ * referencing the source object.
+ * Can also provide 16 numbers as individual arguments.
  *
  * @method set
  * @param {p5.Matrix|Float32Array|Number[]} [inMatrix] the input p5.Matrix or
@@ -63,29 +65,21 @@ p5.Matrix = class {
  * @chainable
  */
   set(inMatrix) {
+    let refArray = arguments;
     if (inMatrix instanceof p5.Matrix) {
-      this.mat4 = inMatrix.mat4;
-      return this;
+      refArray = inMatrix.mat4;
     } else if (isMatrixArray(inMatrix)) {
-      this.mat4 = inMatrix;
+      refArray = inMatrix;
+    }
+    if (refArray.length !== 16) {
+      p5._friendlyError(
+        `Expected 16 values but received ${refArray.length}.`,
+        'p5.Matrix.set'
+      );
       return this;
-    } else if (arguments.length === 16) {
-      this.mat4[0] = arguments[0];
-      this.mat4[1] = arguments[1];
-      this.mat4[2] = arguments[2];
-      this.mat4[3] = arguments[3];
-      this.mat4[4] = arguments[4];
-      this.mat4[5] = arguments[5];
-      this.mat4[6] = arguments[6];
-      this.mat4[7] = arguments[7];
-      this.mat4[8] = arguments[8];
-      this.mat4[9] = arguments[9];
-      this.mat4[10] = arguments[10];
-      this.mat4[11] = arguments[11];
-      this.mat4[12] = arguments[12];
-      this.mat4[13] = arguments[13];
-      this.mat4[14] = arguments[14];
-      this.mat4[15] = arguments[15];
+    }
+    for (let i = 0; i < 16; i++) {
+      this.mat4[i] = refArray[i];
     }
     return this;
   }
diff --git a/src/webgl/p5.RendererGL.Immediate.js b/src/webgl/p5.RendererGL.Immediate.js
index 2409dae3d6..673fe0521e 100644
--- a/src/webgl/p5.RendererGL.Immediate.js
+++ b/src/webgl/p5.RendererGL.Immediate.js
@@ -167,13 +167,14 @@ p5.RendererGL.prototype.vertex = function(x, y) {
 
 /**
  * Sets the normal to use for subsequent vertices.
- * @method vertexNormal
+ * @private
+ * @method normal
  * @param  {Number} x
  * @param  {Number} y
  * @param  {Number} z
  * @chainable
  *
- * @method vertexNormal
+ * @method normal
  * @param  {Vector} v
  * @chainable
  */
diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js
index c4a3a37e32..097c9ab8c1 100644
--- a/src/webgl/p5.RendererGL.js
+++ b/src/webgl/p5.RendererGL.js
@@ -850,24 +850,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
   _update() {
     // reset model view and apply initial camera transform
     // (containing only look at info; no projection).
-    this.uMVMatrix.set(
-      this._curCamera.cameraMatrix.mat4[0],
-      this._curCamera.cameraMatrix.mat4[1],
-      this._curCamera.cameraMatrix.mat4[2],
-      this._curCamera.cameraMatrix.mat4[3],
-      this._curCamera.cameraMatrix.mat4[4],
-      this._curCamera.cameraMatrix.mat4[5],
-      this._curCamera.cameraMatrix.mat4[6],
-      this._curCamera.cameraMatrix.mat4[7],
-      this._curCamera.cameraMatrix.mat4[8],
-      this._curCamera.cameraMatrix.mat4[9],
-      this._curCamera.cameraMatrix.mat4[10],
-      this._curCamera.cameraMatrix.mat4[11],
-      this._curCamera.cameraMatrix.mat4[12],
-      this._curCamera.cameraMatrix.mat4[13],
-      this._curCamera.cameraMatrix.mat4[14],
-      this._curCamera.cameraMatrix.mat4[15]
-    );
+    this.uMVMatrix.set(this._curCamera.cameraMatrix);
 
     // reset light data for new frame.
 
@@ -1488,6 +1471,15 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     this.GL.clear(this.GL.COLOR_BUFFER_BIT | this.GL.DEPTH_BUFFER_BIT);
   }
 
+  /**
+   * Resets all depth information so that nothing previously drawn will
+   * occlude anything subsequently drawn.
+   */
+  clearDepth(depth = 1) {
+    this.GL.clearDepth(depth);
+    this.GL.clear(this.GL.DEPTH_BUFFER_BIT);
+  }
+
   applyMatrix(a, b, c, d, e, f) {
     if (arguments.length === 16) {
       p5.Matrix.prototype.apply.apply(this.uMVMatrix, arguments);
@@ -1649,24 +1641,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     }
   }
   resetMatrix() {
-    this.uMVMatrix.set(
-      this._curCamera.cameraMatrix.mat4[0],
-      this._curCamera.cameraMatrix.mat4[1],
-      this._curCamera.cameraMatrix.mat4[2],
-      this._curCamera.cameraMatrix.mat4[3],
-      this._curCamera.cameraMatrix.mat4[4],
-      this._curCamera.cameraMatrix.mat4[5],
-      this._curCamera.cameraMatrix.mat4[6],
-      this._curCamera.cameraMatrix.mat4[7],
-      this._curCamera.cameraMatrix.mat4[8],
-      this._curCamera.cameraMatrix.mat4[9],
-      this._curCamera.cameraMatrix.mat4[10],
-      this._curCamera.cameraMatrix.mat4[11],
-      this._curCamera.cameraMatrix.mat4[12],
-      this._curCamera.cameraMatrix.mat4[13],
-      this._curCamera.cameraMatrix.mat4[14],
-      this._curCamera.cameraMatrix.mat4[15]
-    );
+    this.uMVMatrix.set(this._curCamera.cameraMatrix);
     return this;
   }
 
diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js
index 0366df75e4..3bb6c63a1a 100644
--- a/src/webgl/p5.Shader.js
+++ b/src/webgl/p5.Shader.js
@@ -215,7 +215,7 @@ p5.Shader = class {
       );
       uniform.size = uniformInfo.size;
       let uniformName = uniformInfo.name;
-      //uniforms thats are arrays have their name returned as
+      //uniforms that are arrays have their name returned as
       //someUniform[0] which is a bit silly so we trim it
       //off here. The size property tells us that its an array
       //so we dont lose any information by doing this
@@ -382,7 +382,7 @@ p5.Shader = class {
    * @param {String} uniformName the name of the uniform.
    * Must correspond to the name used in the vertex and fragment shaders
    * @param {Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture}
-   * data the data to associate with the uniform. The type can be
+   * data The value to assign to the uniform. This can be
    * a boolean (true/false), a number, an array of numbers, or
    * an image (p5.Image, p5.Graphics, p5.MediaElement, p5.Texture)
    *
diff --git a/src/webgl/shaders/imageLightDiffused.frag b/src/webgl/shaders/imageLightDiffused.frag
index 60867f81ac..7b342bdb2b 100644
--- a/src/webgl/shaders/imageLightDiffused.frag
+++ b/src/webgl/shaders/imageLightDiffused.frag
@@ -28,6 +28,12 @@ vec2 nTOE( vec3 v ){
   return angles;
 }
 
+float random(vec2 p) {
+  vec3 p3  = fract(vec3(p.xyx) * .1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
 void main()
 {   	 
 	// the sample direction equals the hemisphere's orientation
@@ -48,13 +54,15 @@ void main()
 	//  We specify a fixed sampleDelta delta value to traverse
   // the hemisphere; decreasing or increasing the sample delta
   // will increase or decrease the accuracy respectively.
-	const float sampleDelta = 0.025;
+	const float sampleDelta = 0.100;
 	float nrSamples = 0.0;
-  
-	for(float phi = 0.0; phi < 2.0 * PI; phi += sampleDelta)
+  float randomOffset = random(gl_FragCoord.xy) * sampleDelta;
+	for(float rawPhi = 0.0; rawPhi < 2.0 * PI; rawPhi += sampleDelta)
 	{
-    for(float theta = 0.0; theta < ( 0.5 ) * PI; theta += sampleDelta)
+    float phi = rawPhi + randomOffset;
+    for(float rawTheta = 0.0; rawTheta < ( 0.5 ) * PI; rawTheta += sampleDelta)
     {
+      float theta = rawTheta + randomOffset;
       // spherical to cartesian (in tangent space) // tangent space to world // add each sample result to irradiance
       float x = sin(theta) * cos(phi);
       float y = sin(theta) * sin(phi);
diff --git a/src/webgl/shaders/imageLightSpecular.frag b/src/webgl/shaders/imageLightSpecular.frag
index 3c4ab9f316..8b6edcdf10 100644
--- a/src/webgl/shaders/imageLightSpecular.frag
+++ b/src/webgl/shaders/imageLightSpecular.frag
@@ -36,7 +36,8 @@ vec2 nTOE( vec3 v ){
 
 
 void main(){
-  const int SAMPLE_COUNT = 1024; // 4096
+  const int SAMPLE_COUNT = 400; // 4096
+  int lowRoughnessLimit = int(pow(2.0,(roughness+0.1)*20.0));
   float totalWeight = 0.0;
   vec3 prefilteredColor = vec3(0.0);
   float phi = vTexCoord.x * 2.0 * PI;
@@ -48,6 +49,11 @@ void main(){
   vec3 V = N;
   for (int i = 0; i < SAMPLE_COUNT; ++i)
   {
+    // break at smaller sample numbers for low roughness levels
+    if(i == lowRoughnessLimit)
+    {
+      break;
+    }
     vec2 Xi = HammersleyNoBitOps(i, SAMPLE_COUNT);
     vec3 H = ImportanceSampleGGX(Xi, N, roughness);
     vec3 L = normalize(2.0 * dot(V, H) * H - V);
@@ -88,22 +94,38 @@ vec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness){
 
 float VanDerCorput(int n, int base)
 {
+#ifdef WEBGL2
+
+    uint bits = uint(n);
+    bits = (bits << 16u) | (bits >> 16u);
+    bits = ((bits & 0x55555555u) << 1u) | ((bits & 0xAAAAAAAAu) >> 1u);
+    bits = ((bits & 0x33333333u) << 2u) | ((bits & 0xCCCCCCCCu) >> 2u);
+    bits = ((bits & 0x0F0F0F0Fu) << 4u) | ((bits & 0xF0F0F0F0u) >> 4u);
+    bits = ((bits & 0x00FF00FFu) << 8u) | ((bits & 0xFF00FF00u) >> 8u);
+    return float(bits) * 2.3283064365386963e-10; // / 0x100000000
+
+#else
+
   float invBase = 1.0 / float(base);
   float denom = 1.0;
   float result = 0.0;
 
+
   for (int i = 0; i < 32; ++i)
   {
-	if (n > 0)
-	{
-  	denom = mod(float(n), 2.0);
-  	result += denom * invBase;
-  	invBase = invBase / 2.0;
-  	n = int(float(n) / 2.0);
-	}
+        if (n > 0)
+        {
+        denom = mod(float(n), 2.0);
+        result += denom * invBase;
+        invBase = invBase / 2.0;
+        n = int(float(n) / 2.0);
+        }
   }
 
+
   return result;
+
+#endif
 }
 
 vec2 HammersleyNoBitOps(int i, int N)
diff --git a/test/unit/webgl/p5.Camera.js b/test/unit/webgl/p5.Camera.js
index 0704a64728..aa682d0c11 100644
--- a/test/unit/webgl/p5.Camera.js
+++ b/test/unit/webgl/p5.Camera.js
@@ -650,12 +650,12 @@ suite('p5.Camera', function() {
         assert.deepEqual(myCam.projMatrix.mat4, expectedMatrix);
       });
 
-      test('ortho() with no parameters specified (sets default)', function() {
+      test('ortho() with no parameters specified (sets default with added far)', function() {
         var expectedMatrix = new Float32Array([
           0.019999999552965164, 0, 0, 0,
-          0, -0.019999999552965164, 0,0,
-          0,0,-0.019999999552965164,0,
-          -0,-0,-1,1
+          0, -0.019999999552965164, 0, 0,
+          0, 0, -0.002222222276031971, 0,
+          -0, -0, -1, 1
         ]);
         myCam.ortho();
         assert.deepEqual(myCam.projMatrix.mat4, expectedMatrix);