diff --git a/.all-contributorsrc b/.all-contributorsrc
index 55809f85bd..adb21ac26b 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -1326,7 +1326,8 @@
"profile": "https://aatishb.com",
"contributions": [
"doc",
- "bug"
+ "bug",
+ "example"
]
},
{
@@ -1391,7 +1392,8 @@
"contributions": [
"bug",
"code",
- "doc"
+ "doc",
+ "example"
]
},
{
@@ -1400,7 +1402,8 @@
"avatar_url": "https://avatars2.githubusercontent.com/u/9020979?s=460&v=4",
"profile": "https://github.com/hydrosquall",
"contributions": [
- "doc"
+ "doc",
+ "example"
]
},
{
@@ -1797,16 +1800,6 @@
"example"
]
},
- {
- "login": "mjaything",
- "name": "Minjun Kim",
- "avatar_url": "https://avatars1.githubusercontent.com/u/13192500?v=4",
- "profile": "https://github.com/mjaything",
- "contributions": [
- "bug",
- "translation"
- ]
- },
{
"login": "fisherdiede",
"name": "Fisher Diede",
@@ -1851,7 +1844,8 @@
"avatar_url": "https://avatars1.githubusercontent.com/u/36653440?v=4",
"profile": "https://github.com/sm7515",
"contributions": [
- "doc"
+ "doc",
+ "example"
]
},
{
@@ -2174,7 +2168,8 @@
"avatar_url": "https://avatars1.githubusercontent.com/u/56646605?v=4",
"profile": "https://berkeozgen.me/",
"contributions": [
- "bug"
+ "bug",
+ "example"
]
},
{
@@ -2495,7 +2490,8 @@
"avatar_url": "https://avatars.githubusercontent.com/u/43292181?v=4",
"profile": "https://github.com/suhascv",
"contributions": [
- "doc"
+ "doc",
+ "example"
]
},
{
@@ -2555,7 +2551,8 @@
"profile": "http://www.davepagurek.com",
"contributions": [
"code",
- "test"
+ "test",
+ "example"
]
},
{
@@ -3323,7 +3320,8 @@
"profile": "https://github.com/Malayvasa",
"contributions": [
"design",
- "code"
+ "code",
+ "example"
]
},
{
@@ -3659,7 +3657,8 @@
"contributions": [
"ideas",
"review",
- "plugin"
+ "plugin",
+ "example"
]
},
{
@@ -3767,7 +3766,8 @@
"profile": "http://aceslowman.com",
"contributions": [
"code",
- "doc"
+ "doc",
+ "example"
]
},
{
@@ -3947,7 +3947,8 @@
"avatar_url": "https://avatars.githubusercontent.com/u/74553433?v=4",
"profile": "https://github.com/Acha0203",
"contributions": [
- "code"
+ "code",
+ "example"
]
},
{
@@ -4091,7 +4092,8 @@
"avatar_url": "https://avatars.githubusercontent.com/u/92529?v=4",
"profile": "http://jareddonovan.com/",
"contributions": [
- "code"
+ "code",
+ "example"
]
},
{
@@ -4460,7 +4462,8 @@
"avatar_url": "https://avatars.githubusercontent.com/u/22816171?v=4",
"profile": "https://github.com/ihsavru",
"contributions": [
- "code"
+ "code",
+ "example"
]
},
{
@@ -4523,7 +4526,8 @@
"avatar_url": "https://avatars.githubusercontent.com/u/19987520?v=4",
"profile": "https://jithinks.netlify.app/",
"contributions": [
- "code"
+ "code",
+ "example"
]
},
{
@@ -5330,7 +5334,16 @@
"avatar_url": "https://avatars.githubusercontent.com/u/127239756?v=4",
"profile": "https://github.com/perminder-17",
"contributions": [
- "code"
+ "code",
+ "bug",
+ "doc",
+ "example",
+ "ideas",
+ "plugin",
+ "projectManagement",
+ "promotion",
+ "question",
+ "research"
]
},
{
@@ -6210,7 +6223,8 @@
"avatar_url": "https://avatars.githubusercontent.com/u/7389189?v=4",
"profile": "https://github.com/AaratiAkkapeddi",
"contributions": [
- "code"
+ "code",
+ "ideas"
]
},
{
@@ -6445,6 +6459,341 @@
"code",
"doc"
]
+ },
+ {
+ "login": "philyawj",
+ "name": "Jordan Philyaw",
+ "avatar_url": "https://avatars.githubusercontent.com/u/37485853?v=4",
+ "profile": "http://jordanphilyaw.com",
+ "contributions": [
+ "doc"
+ ]
+ },
+ {
+ "login": "thrly",
+ "name": "oliver thurley",
+ "avatar_url": "https://avatars.githubusercontent.com/u/22343302?v=4",
+ "profile": "http://oliverthurley.co.uk",
+ "contributions": [
+ "doc",
+ "code"
+ ]
+ },
+ {
+ "login": "lirenjie95",
+ "name": "Renjie Li",
+ "avatar_url": "https://avatars.githubusercontent.com/u/17038472?v=4",
+ "profile": "https://github.com/lirenjie95",
+ "contributions": [
+ "doc",
+ "code"
+ ]
+ },
+ {
+ "login": "Vaivaswat2244",
+ "name": "Vaivaswat Dubey",
+ "avatar_url": "https://avatars.githubusercontent.com/u/113991324?v=4",
+ "profile": "https://github.com/Vaivaswat2244",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "xinemata",
+ "name": "Xin Xin",
+ "avatar_url": "https://avatars.githubusercontent.com/u/9159424?v=4",
+ "profile": "https://github.com/xinemata",
+ "contributions": [
+ "eventOrganizing",
+ "tutorial",
+ "talk",
+ "mentoring",
+ "ideas"
+ ]
+ },
+ {
+ "login": "akkarn1689",
+ "name": "Ashish Karn",
+ "avatar_url": "https://avatars.githubusercontent.com/u/82334486?v=4",
+ "profile": "https://karn-ashish-16.onrender.com/",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "dkessner",
+ "name": "Darren Kessner",
+ "avatar_url": "https://avatars.githubusercontent.com/u/1002034?v=4",
+ "profile": "https://dkessner.github.io/",
+ "contributions": [
+ "example"
+ ]
+ },
+ {
+ "login": "AnimeshSinha1309",
+ "name": "Animesh Sinha",
+ "avatar_url": "https://avatars.githubusercontent.com/u/9739218?v=4",
+ "profile": "http://www.facebook.com/AnimeshSinha1309",
+ "contributions": [
+ "example"
+ ]
+ },
+ {
+ "login": "katlich112358",
+ "name": "Kathryn Lichlyter",
+ "avatar_url": "https://avatars.githubusercontent.com/u/59926191?v=4",
+ "profile": "https://github.com/katlich112358",
+ "contributions": [
+ "example"
+ ]
+ },
+ {
+ "login": "geealbers",
+ "name": "Greg Albers",
+ "avatar_url": "https://avatars.githubusercontent.com/u/7796401?v=4",
+ "profile": "https://geealbers.net/",
+ "contributions": [
+ "example"
+ ]
+ },
+ {
+ "login": "macarena",
+ "name": "Marco Macarena",
+ "avatar_url": "https://avatars.githubusercontent.com/u/79822?v=4",
+ "profile": "http://macarena.pro.br",
+ "contributions": [
+ "example"
+ ]
+ },
+ {
+ "login": "khamiltonuk",
+ "name": "Kristian Hamilton",
+ "avatar_url": "https://avatars.githubusercontent.com/u/4013283?v=4",
+ "profile": "http://www.khamilton.co.uk",
+ "contributions": [
+ "example"
+ ]
+ },
+ {
+ "login": "keshavg2",
+ "name": "Keshav Gupta",
+ "avatar_url": "https://avatars.githubusercontent.com/u/34001173?v=4",
+ "profile": "https://keshav-portfolio-resume.netlify.app/",
+ "contributions": [
+ "example"
+ ]
+ },
+ {
+ "login": "riteshsp2000",
+ "name": "Ritesh Patil",
+ "avatar_url": "https://avatars.githubusercontent.com/u/56112399?v=4",
+ "profile": "http://riteshpatil.com",
+ "contributions": [
+ "example"
+ ]
+ },
+ {
+ "login": "gabrielsroka",
+ "name": "Gabriel Sroka",
+ "avatar_url": "https://avatars.githubusercontent.com/u/14354736?v=4",
+ "profile": "https://gabrielsroka.github.io",
+ "contributions": [
+ "example"
+ ]
+ },
+ {
+ "login": "kcconch",
+ "name": "Casey Conchinha",
+ "avatar_url": "https://avatars.githubusercontent.com/u/26172283?v=4",
+ "profile": "http://kccon.ch",
+ "contributions": [
+ "example"
+ ]
+ },
+ {
+ "login": "davidblitz",
+ "name": "davidblitz",
+ "avatar_url": "https://avatars.githubusercontent.com/u/13055497?v=4",
+ "profile": "https://github.com/davidblitz",
+ "contributions": [
+ "example"
+ ]
+ },
+ {
+ "login": "crh82",
+ "name": "crh82",
+ "avatar_url": "https://avatars.githubusercontent.com/u/103348212?v=4",
+ "profile": "https://github.com/crh82",
+ "contributions": [
+ "example"
+ ]
+ },
+ {
+ "login": "",
+ "name": "Aaron Welles",
+ "avatar_url": "https://hello-assets.p5js.org/placeholder_avatar.png",
+ "profile": "",
+ "contributions": [
+ "example"
+ ]
+ },
+ {
+ "login": "seyko1",
+ "name": "Seyko",
+ "avatar_url": "https://avatars.githubusercontent.com/u/26870879?v=4",
+ "profile": "https://github.com/seyko1",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "thekinardist",
+ "name": "Xevi H. Aqeel",
+ "avatar_url": "https://avatars.githubusercontent.com/u/21345916?v=4",
+ "profile": "http://kinardist.media",
+ "contributions": [
+ "example",
+ "design"
+ ]
+ },
+ {
+ "login": "GregStanton",
+ "name": "Greg Stanton",
+ "avatar_url": "https://avatars.githubusercontent.com/u/51820777?v=4",
+ "profile": "https://www.youtube.com/c/HigherMathNotes",
+ "contributions": [
+ "bug",
+ "code",
+ "doc",
+ "example",
+ "ideas",
+ "plugin",
+ "projectManagement",
+ "promotion",
+ "question",
+ "research"
+ ]
+ },
+ {
+ "login": "bojidar-bg",
+ "name": "Bojidar Marinov",
+ "avatar_url": "https://avatars.githubusercontent.com/u/5276727?v=4",
+ "profile": "https://bojidar-bg.dev/",
+ "contributions": [
+ "code",
+ "test"
+ ]
+ },
+ {
+ "login": "ChloeYanYan",
+ "name": "Chloe Yan",
+ "avatar_url": "https://avatars.githubusercontent.com/u/181019103?v=4",
+ "profile": "https://github.com/ChloeYanYan",
+ "contributions": [
+ "doc"
+ ]
+ },
+ {
+ "login": "webermayank",
+ "name": "Mayank Verma",
+ "avatar_url": "https://avatars.githubusercontent.com/u/111176033?v=4",
+ "profile": "https://github.com/webermayank",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "lab-mediaArts",
+ "name": "Lauren Berrios",
+ "avatar_url": "https://avatars.githubusercontent.com/u/179049131?v=4",
+ "profile": "https://github.com/lab-mediaArts",
+ "contributions": [
+ "ideas"
+ ]
+ },
+ {
+ "login": "roxi09",
+ "name": "roxi09",
+ "avatar_url": "https://avatars.githubusercontent.com/u/175943104?v=4",
+ "profile": "https://github.com/Roxi09",
+ "contributions": [
+ "ideas"
+ ]
+ },
+ {
+ "login": "jlliu",
+ "name": "Jackie Liu",
+ "avatar_url": "https://avatars.githubusercontent.com/u/8304517?v=4",
+ "profile": "https://github.com/jlliu",
+ "contributions": [
+ "ideas"
+ ]
+ },
+ {
+ "login": "re7l",
+ "name": "Carrie Wang",
+ "avatar_url": "https://avatars.githubusercontent.com/u/19353655?v=4",
+ "profile": "https://github.com/re7l",
+ "contributions": [
+ "ideas"
+ ]
+ },
+ {
+ "login": "himanshuukholiya",
+ "name": "Himanshu Kholiya",
+ "avatar_url": "https://avatars.githubusercontent.com/u/128818464?v=4",
+ "profile": "https://github.com/himanshuukholiya",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "mclark414",
+ "name": "mclark414",
+ "avatar_url": "https://avatars.githubusercontent.com/u/26391144?v=4",
+ "profile": "https://github.com/mclark414",
+ "contributions": [
+ "ideas"
+ ]
+ },
+ {
+ "login": "mxramsey",
+ "name": "Mx. Ramsey",
+ "avatar_url": "https://avatars.githubusercontent.com/u/161327383?v=4",
+ "profile": "https://github.com/mxramsey",
+ "contributions": [
+ "ideas"
+ ]
+ },
+ {
+ "login": "franolichdesign",
+ "name": "Franolich Design",
+ "avatar_url": "https://avatars.githubusercontent.com/u/74784668?v=4",
+ "profile": "https://github.com/franolichdesign",
+ "contributions": [
+ "bug",
+ "code"
+ ]
+ },
+ {
+ "login": "HritvikBhatia",
+ "name": "Vik",
+ "avatar_url": "https://avatars.githubusercontent.com/u/149999573?v=4",
+ "profile": "https://github.com/HritvikBhatia",
+ "contributions": [
+ "code",
+ "bug",
+ "translation"
+ ]
+ },
+ {
+ "login": "Darrenhqf",
+ "name": "Qingfeng Huang",
+ "avatar_url": "https://avatars.githubusercontent.com/u/92257843?v=4",
+ "profile": "https://git.arts.ac.uk/pages/21034426/My_Portfolio_Website/",
+ "contributions": [
+ "translation"
+ ]
}
],
"repoType": "github",
diff --git a/.github/first-timers.yml b/.github/first-timers.yml
index d6c563c778..5e57720264 100644
--- a/.github/first-timers.yml
+++ b/.github/first-timers.yml
@@ -1,4 +1,4 @@
-# You can create the issue in a different repo than where the problem is. Just make sure you installed the bot on the configured repository.
+# You can create the issue in a different repo than where the problem is. Just make sure you have installed the bot on the configured repository.
# The issue will link back to the original repository where the contribution will be made.
repository: p5.js
@@ -11,4 +11,4 @@ labels:
- hacktoberfest
# If you would like to add your own template for the issue, add an .md file to your .github folder
-# template: .github/first-timers-issue-template.md
\ No newline at end of file
+# template: .github/first-timers-issue-template.md
diff --git a/.github/workflows/release-workflow-v2.yml b/.github/workflows/release-workflow-v2.yml
new file mode 100644
index 0000000000..07c70b75d5
--- /dev/null
+++ b/.github/workflows/release-workflow-v2.yml
@@ -0,0 +1,113 @@
+name: New p5.js 2.x release
+# Requires secrets `NPM_TOKEN` and `ACCESS_TOKEN` to be set
+
+permissions:
+ contents: write
+
+on:
+ push:
+ tags:
+ - 'v2.*.*' # Push events to matching v*.*.*, i.e. v20.15.10
+ - 'v2.*.*-*' # Push events to matching v*.*.*-*, i.e. v20.15.10-0
+
+jobs:
+ release:
+ runs-on: ubuntu-latest
+ name: Release
+ env:
+ INPUT_TOKEN: ${{ secrets.NPM_TOKEN }}
+ steps:
+ # 1. Setup
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
+ with:
+ node-version: 20
+ - name: Get semver info
+ id: semver
+ uses: akshens/semver-tag@v4
+ with:
+ version: ${{ github.ref_name }}
+
+ - name: Get version number
+ id: version-number
+ run: |
+ version=$(echo ${{ github.ref_name }} | cut -c 2-)
+ echo "version=$version" >> $GITHUB_OUTPUT
+
+ - name: Get current date
+ id: date
+ run: echo "date=$(date +"%B %Oe, %Y")" >> $GITHUB_OUTPUT
+ - name: Install dependencies
+ run: npm ci
+ env:
+ CI: true
+ - name: Run test
+ run: npm test
+ env:
+ CI: true
+ - name: Run build
+ run: npm run build
+
+ # 2. Prepare release files
+ - run: mkdir release && mkdir p5 && cp -r ./lib/* p5/
+ - name: Create release zip file
+ uses: TheDoctor0/zip-release@0.6.2
+ with:
+ type: zip
+ filename: release/p5.zip
+ path: ./p5/*
+
+ - name: Copy release files
+ run: cp lib/p5.js lib/p5.min.js lib/p5.esm.js release/
+
+ # 3. Release p5.js
+ - name: Create GitHub release
+ uses: softprops/action-gh-release@v0.1.15
+ with:
+ draft: true
+ prerelease: ${{ steps.semver.outputs.is-prerelease == 'true' }}
+ files: release/*
+ generate_release_notes: true
+ token: ${{ secrets.ACCESS_TOKEN }}
+ - name: Publish to NPM
+ uses: JS-DevTools/npm-publish@v1
+ with:
+ token: ${{ secrets.NPM_TOKEN }}
+ tag: ${{ steps.semver.outputs.is-prerelease != 'true' && 'latest' || 'beta' }}
+
+ # 4. Update p5.js website
+ - name: Clone p5.js website
+ if: ${{ steps.semver.outputs.is-prerelease != 'true' }}
+ uses: actions/checkout@v3
+ with:
+ repository: processing/p5.js-website
+ ref: '2.0'
+ path: website
+ fetch-depth: 0
+ token: ${{ secrets.ACCESS_TOKEN }}
+ - name: Updated website files
+ if: ${{ steps.semver.outputs.is-prerelease != 'true' }}
+ run: |
+ cd website
+ npm install
+ npm run build:contributor-docs
+ npm run build:contributors
+ npm run build:reference
+ npm run build:search
+ npm run build:p5-version
+ - name: Commit updated website files
+ if: ${{ steps.semver.outputs.is-prerelease != 'true' }}
+ run: |
+ cd website
+ git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
+ git config --local user.name "github-actions[bot]"
+ git add .
+ git commit -m "Update p5.js to ${{ github.ref_name }}"
+ - name: Push updated website repo
+ if: ${{ steps.semver.outputs.is-prerelease != 'true' }}
+ uses: ad-m/github-push-action@v0.6.0
+ with:
+ github_token: ${{ secrets.ACCESS_TOKEN }}
+ branch: '2.0'
+ directory: website/
+ repository: processing/p5.js-website
diff --git a/.github/workflows/release-workflow.yml b/.github/workflows/release-workflow.yml
index 2a3ca4e40d..52f9ff2fe6 100644
--- a/.github/workflows/release-workflow.yml
+++ b/.github/workflows/release-workflow.yml
@@ -7,8 +7,8 @@ permissions:
on:
push:
tags:
- - 'v*.*.*' # Push events to matching v*.*.*, i.e. v20.15.10
- - 'v*.*.*-*' # Push events to matching v*.*.*-*, i.e. v20.15.10-0
+ - 'v1.*.*' # Push events to matching v*.*.*, i.e. v20.15.10
+ - 'v1.*.*-*' # Push events to matching v*.*.*-*, i.e. v20.15.10-0
jobs:
release:
diff --git a/README.md b/README.md
index 19505fbabc..992deea94a 100644
--- a/README.md
+++ b/README.md
@@ -75,8 +75,8 @@ Current Lead/Mentor
* [@limzykenneth](https://github.com/limzykenneth) - p5.js Mentor,2023-present
Lead/Mentor Alumni
-* [@lmccart](https://github.com/lmccart)- p5.js Creator
-* [@qianqianye](https://github.com/qianqianye) - p5.js Lead,2021-2024
+* [@lmccart](https://github.com/lmccart) - p5.js Creator
+* [@qianqianye](https://github.com/qianqianye) - p5.js Lead,2021-present (on leave)
* [@outofambit](https://github.com/outofambit) - p5.js Co-Lead 2021-22, Mentor 2022-2023
* [@mcturner1995](https://github.com/mcturner1995) - p5.js Lead 2020
@@ -353,7 +353,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 Caroline Hermans 💡 📖 |
 Faith Wuyue Yu
|
-  Aatish Bhatia 📖 🐛 |
+  Aatish Bhatia 📖 🐛 💡 |
 Mislav Milicevic 💻 🐛 |
 Yuting Lu 📖 |
 Adil Rabbani 💻 🐛 💡 |
@@ -361,8 +361,8 @@ We recognize all types of contributions. This project follows the [all-contribut
 Pierre Krafft 🐛 💻 📖 💡 👀 ⚠️ 🔧 |
 Zoë Ingram 📖 |
-  Aidan Nelson 🐛 💻 📖 |
-  Cameron Yick 📖 |
+  Aidan Nelson 🐛 💻 📖 💡 |
+  Cameron Yick 📖 💡 |
 Tanvi Kumar 🐛 💻 📖 💡 |
 Katsuya Endoh
|
@@ -425,7 +425,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 Samuel Alarco Cantos 🌍 |
 DIVYANSHU RAJ 💻 🐛 📖 |
-  sm7515 📖 |
+  sm7515 📖 💡 |
 Aditya Rachman Putra 📖 |
 shaharyarshamshi 🌍 |
 Ayush Jain 🌍 |
@@ -472,7 +472,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 Keith Tan 📖 |
-  Berke Özgen 🐛 |
+  Berke Özgen 🐛 💡 |
 Musab Kılıç 💻 ⚠️ |
 Nicholas Marino 📖 |
 Greg Sadetsky 💻 |
@@ -516,7 +516,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 Kathryn Isabelle Lawrence 💻 🤔 |
 Joonas Jokinen 🎨 |
 Ajaya Mati 💻 |
-  Suhas CV 📖 |
+  Suhas CV 📖 💡 |
 Sanjay Singh Rajpoot 📖 |
@@ -524,7 +524,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 Thomas Herlea 🐛 💻 📖 |
 Simranjeet Singh 💻 📢 🎨 👀 |
 Rahul Mohata 📖 |
-  Dave Pagurek 💻 ⚠️ |
+  Dave Pagurek 💻 ⚠️ 💡 |
 Leo Kamwathi 💻 |
@@ -634,7 +634,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 UnityOfFairfax 💻 |
 INARI_DARKFOX 💻 |
 James Dunn 🐛 💻 |
-  Malay Vasa 🎨 💻 |
+  Malay Vasa 🎨 💻 💡 |
 wagedu 🐛 |
 Wes Lord 📖 ⚠️ |
@@ -681,7 +681,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 SHIBAHARA Hiroki 💻 🌍 |
 siddhant 🐛 💻 |
-  Caleb Foss 🤔 👀 🔌 |
+  Caleb Foss 🤔 👀 🔌 💡 |
 chechenxu 💻 |
 Peter Marsh 💻 |
 Ahmet Kaya 🌍 |
@@ -696,7 +696,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 J Wong 💻 📖 |
-  Austin Lee Slominski 💻 📖 |
+  Austin Lee Slominski 💻 📖 💡 |
 Nick Briz 👀 |
 Ayush Shankar 💻 |
 zelf0 📖 |
@@ -721,7 +721,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 Aaron Casanova 💻 |
 Adam Smith 💻 |
-  Acha 💻 |
+  Acha 💻 💡 |
 Aditya Siddheshwar 💻 |
 Adwaith D 💻 |
 æmon 💻 |
@@ -743,7 +743,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 AsukaMinato 💻 |
-  Jared Donovan 💻 |
+  Jared Donovan 💻 💡 |
 beau-muylle 💻 |
 Yana Agun Siswanto 💻 |
 Benjamin Davies 💻 |
@@ -796,7 +796,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 Half Scheidl 💻 |
 Ashris 💻 |
 Arijit 💻 |
-  Urvashi 💻 |
+  Urvashi 💻 💡 |
 José Miguel Tajuelo Garrigós 💻 |
@@ -807,7 +807,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 Joseph Hong 💻 |
-  Jithin KS 💻 |
+  Jithin KS 💻 💡 |
 Jason Mandel 💻 |
 JoeCastor 💻 |
 Juan Irache 💻 |
@@ -921,7 +921,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 Garima 💻 |
 Lakshay Joshi 💻 |
-  perminder-17 💻 |
+  perminder-17 💻 🐛 📖 💡 🤔 🔌 📆 📣 💬 🔬 |
 Yash Pandey 🐛 💻 |
 Aditya Deshpande 🐛 📖 |
 Alejandro 🐛 💻 |
@@ -1044,7 +1044,7 @@ We recognize all types of contributions. This project follows the [all-contribut
 c-dacanay 🎨 📋 💡 |
 mathewpan2 💻 |
 cog25 🌍 |
-  Aarati Akkapeddi 💻 |
+  Aarati Akkapeddi 💻 🤔 |
 Maya Arguelles 💻 |
@@ -1080,6 +1080,51 @@ We recognize all types of contributions. This project follows the [all-contribut
 Rajas Samse 💻 📖 |
+  Jordan Philyaw 📖 |
+  oliver thurley 📖 💻 |
+  Renjie Li 📖 💻 |
+  Vaivaswat Dubey 💻 |
+  Xin Xin 📋 ✅ 📢 🧑🏫 🤔 |
+
+
+  Ashish Karn 💻 |
+  Darren Kessner 💡 |
+  Animesh Sinha 💡 |
+  Kathryn Lichlyter 💡 |
+  Greg Albers 💡 |
+  Marco Macarena 💡 |
+
+
+  Kristian Hamilton 💡 |
+  Keshav Gupta 💡 |
+  Ritesh Patil 💡 |
+  Gabriel Sroka 💡 |
+  Casey Conchinha 💡 |
+  davidblitz 💡 |
+
+
+  crh82 💡 |
+  Aaron Welles 💡 |
+  Seyko 💻 |
+  Xevi H. Aqeel 💡 🎨 |
+  Greg Stanton 🐛 💻 📖 💡 🤔 🔌 📆 📣 💬 🔬 |
+  Bojidar Marinov 💻 ⚠️ |
+
+
+  Chloe Yan 📖 |
+  Mayank Verma 💻 |
+  Lauren Berrios 🤔 |
+  roxi09 🤔 |
+  Jackie Liu 🤔 |
+  Carrie Wang 🤔 |
+
+
+  Himanshu Kholiya 💻 |
+  mclark414 🤔 |
+  Mx. Ramsey 🤔 |
+  Franolich Design 🐛 💻 |
+  Vik 💻 🐛 🌍 |
+  Qingfeng Huang 🌍 |
diff --git a/contributor_docs/README.md b/contributor_docs/README.md
index 670c00f91f..f48328af37 100644
--- a/contributor_docs/README.md
+++ b/contributor_docs/README.md
@@ -36,7 +36,7 @@ Head over to [this link](./contributor_guidelines.md) where you will be guided o
Most of the time we will stick with this workflow quite strictly and, especially if you have contributed to other projects before, it may feel like there are too many hoops to jump through for what may be a simple contribution. However, the steps above are aimed to make it easy for you as a contributor and for stewards/maintainers to contribute meaningfully, while also making sure that you won't be spending time working on things that may not be accepted for various reasons. The steps above will help ensure that any proposals or fixes are adequately discussed and considered before any work begin, and often this will actually save you (and the steward/maintainer) time because the PR that would need additional fixing after review, or outright not accepted, would happen less often as a result.
-**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. For information related to area stewards or general maintenance of p5.js GitHub repository, please check out the [steward guidelines](./steward_guidelines.md).
+**We see contributing to p5.js as a learning opportunity** and we don't measure success 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. For information related to area stewards or general maintenance of p5.js GitHub repository, please check out the [steward guidelines](./steward_guidelines.md).
## 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 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). Here are just some ways you can contribute:
diff --git a/contributor_docs/archive/es6-adoption.md b/contributor_docs/archive/es6-adoption.md
index 4beb93e0f2..76b5ca3e4a 100644
--- a/contributor_docs/archive/es6-adoption.md
+++ b/contributor_docs/archive/es6-adoption.md
@@ -1,7 +1,7 @@
## ES6 Adoption
p5.js has recently adopted the ECMAScript 2015 (ES6) language specifications in order to reduce the complexity of the codebase, increase readability, and utilize features that facilitate elegant and effective coding practices for both newcomers and seasoned contributors.
-The transition process was initially [discussed](https://github.com/processing/p5.js/issues/3758) with the aim of migrating p5 to ES6, which later lead to a series of widespread syntactical changes in the codebase aligned with ES6 specifications. More info on the initial transition can be found [here](https://github.com/processing/p5.js/pull/3874). These changes consisted of minor modifications to the build system to facilitate processing, linting and testing the library based on ES6 standards, as well as major and ubiquitous syntactical modification in line with ES6 features.
+The transition process was initially [discussed](https://github.com/processing/p5.js/issues/3758) with the aim of migrating p5 to ES6, which later led to a series of widespread syntactical changes in the codebase aligned with ES6 specifications. More info on the initial transition can be found [here](https://github.com/processing/p5.js/pull/3874). These changes consisted of minor modifications to the build system to facilitate processing, linting and testing the library based on ES6 standards, as well as major and ubiquitous syntactical modification in line with ES6 features.
It is worthy to note that as of writing this, these transformations are by no means complete, and do not reflect nor implement every possible feature of ES6. They are intended to facilitate a smoother transition to properly and efficiently utilize ES6 features if and when aligned with the community interests and standards. And serve to motivate contributors to gradually conform to the new style and features.
diff --git a/contributor_docs/contributing_to_the_p5js_reference.md b/contributor_docs/contributing_to_the_p5js_reference.md
index 849bfef6bf..770188b8b6 100644
--- a/contributor_docs/contributing_to_the_p5js_reference.md
+++ b/contributor_docs/contributing_to_the_p5js_reference.md
@@ -117,7 +117,7 @@ If the parameter is optional, add square brackets around the name:
### Additional info: Constants
-If the parameter takes one or more values defined in [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js) , then the type should be specified as `{Constant}` and the valid values should be enumerated in the comment following the `either` keyword, e.g.:
+If the parameter takes one or more values defined in [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js), then the type should be specified as `{Constant}` and the valid values should be enumerated in the comment following the `either` keyword, e.g.:
```
@param {Constant} horizAlign horizontal alignment, either LEFT, CENTER, or RIGHT
@@ -227,7 +227,7 @@ The relevant `@example` tag to create the above is as follows:
After the `@example` tag, you should start an HTML `` tag followed by a `
` tag. In between the opening and closing `` tag, you will insert the relevant example code. The basic principle of writing good example code for the reference is to keep things simple and minimal. The example should be meaningful and explain how the feature works without being too complicated. The example’s canvas should be 100x100 pixels and if the `setup()` function is not included, such as in the example above, the code will be automatically wrapped in a `setup()` function with a default 100x100 pixels gray background canvas created. We won’t go through the details about best practices and code style for the example code here; please see the reference style guide instead.
-You can have multiple examples for one feature.To do so, add an additional `` and `
` HTML block right after the first closed, separated by a blank line.
+You can have multiple examples for one feature. To do so, add an additional `` and `` HTML block right after the first closed, separated by a blank line.
```
* @example
diff --git a/contributor_docs/contributor_guidelines.md b/contributor_docs/contributor_guidelines.md
index a75a4101f4..84685141db 100644
--- a/contributor_docs/contributor_guidelines.md
+++ b/contributor_docs/contributor_guidelines.md
@@ -422,7 +422,7 @@ p5.js' code standard or code style is enforced by [ESLlint](https://eslint.org/)
While working on any features of p5.js, it is important to keep in mind the design principles of p5.js. Our priorities may differ from the priorities of other projects, so if you are coming from a different project, we recommend that you familiarize yourself with p5.js' design principles.
-- **Access** We prioritize accessibility first and foremost, and decisions we make must take into account how it increases access to historically marginalized groups. Read more about this in our access statement.
+- **Access** We prioritize accessibility first and foremost, and decisions we make must take into account how they increase access to historically marginalized groups. Read more about this in our access statement.
- **Beginner Friendly** The p5.js API aims to be friendly to beginner coders, offering a low barrier to creating interactive and visual web content with cutting-edge HTML5/Canvas/DOM APIs.
- **Educational** p5.js is focused on an API and curriculum that supports educational use, including a complete reference to the API with supporting examples, as well as tutorials and sample class curricula that introduce core creative coding principles in a clear and engaging order.
- **JavaScript and its community** p5.js aims to make web development practices more accessible to beginners by modeling proper JavaScript design patterns and usage while abstracting them where necessary. As an open-source library, p5.js also includes the wider JavaScript community in its creation, documentation, and dissemination.
diff --git a/contributor_docs/creating_libraries.md b/contributor_docs/creating_libraries.md
index 0ee2c04539..a7f2caa2ae 100644
--- a/contributor_docs/creating_libraries.md
+++ b/contributor_docs/creating_libraries.md
@@ -279,7 +279,7 @@ Your addon library may not extend p5 or p5 classes at all, but instead just offe
**p5.js has two modes, global mode and instance mode.** In global mode, all p5 properties and methods are bound to the `window` object, allowing users to call methods like `background()` without having to prefix them with anything. However, this means you need to be careful not to overwrite native JavaScript functionality. For example “`Math`” and “`console`” are both native Javascript functionalities so you shouldn’t have methods named “`Math`” or “`console`”.
-**Class names should use** `PascalCase`**, while methods and properties should use** `camelCase`**.** Classes in p5 are prefixed with p5. We would like to keep this namespace for p5 core classes only, so when you create your own namespace, **do not include the** `p5.` **prefix for class names**. You are welcomed to create your own prefix, or just give them non-prefixed names.
+**Class names should use** `PascalCase`**, while methods and properties should use** `camelCase`**.** Classes in p5 are prefixed with p5. We would like to keep this namespace for p5 core classes only, so when you create your own namespace, **do not include the** `p5.` **prefix for class names**. You are welcome to create your own prefix, or just give them non-prefixed names.
```js
// Do not do this
@@ -307,4 +307,4 @@ p5.prototype.myMethod = function(){
**Examples are great, too!** They show people what your library can do. Because this is all JavaScript, people can see them running online before they download anything.[ ](http://jsfiddle.net/) You can create a collection of examples on the p5.js web editor to showcase how your library works.
-**Submit your library!** Once your library is ready for distribution and you’d like it included on the [p5js.org/libraries](https://p5js.org/libraries) page, please submit a pull request on the p5.js website GitHub repository following [this intruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!
\ No newline at end of file
+**Submit your library!** Once your library is ready for distribution and you’d like it included on the [p5js.org/libraries](https://p5js.org/libraries) page, please submit a pull request on the p5.js website GitHub repository following [this intruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!
diff --git a/contributor_docs/documentation_style_guide.md b/contributor_docs/documentation_style_guide.md
index 8e42b45116..be6a48ddda 100644
--- a/contributor_docs/documentation_style_guide.md
+++ b/contributor_docs/documentation_style_guide.md
@@ -140,7 +140,7 @@ Always use `let` to declare variables.
**Accessibility terminology**
-The following terminiology is adapted from the WordPress documentation guidelines for [Writing inclusive documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). For more background on people-first language, see the CDC's guide on [Communicating With and About People with Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html).
+The following terminology is adapted from the WordPress documentation guidelines for [Writing inclusive documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). For more background on people-first language, see the CDC's guide on [Communicating With and About People with Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html).
| Recommended | Not Recommended |
| -- | -- |
@@ -713,7 +713,7 @@ if (
## Iteration
-- Don’t use a `while` or `do-while` loops unless it's necessary. Use `for` loops to iterate a fixed number of times.
+- Don’t use `while` or `do-while` loops unless it's necessary. Use `for` loops to iterate a fixed number of times.
```javascript
let numPetals = 7;
@@ -896,7 +896,7 @@ for (let i = 0; i < numbers.length; i += 1) {
let numbersCopy = numbers.slice();
```
-- Write arrays on multiple lines when it improves readibility. Use line breaks after the opening bracket and before the closing bracket. Add a trailing comma.
+- Write arrays on multiple lines when it improves readability. Use line breaks after the opening bracket and before the closing bracket. Add a trailing comma.
```javascript
// Bad.
diff --git a/contributor_docs/es/contributing_to_the_p5js_reference.md b/contributor_docs/es/contributing_to_the_p5js_reference.md
index c70557d84c..714cc4cc4c 100644
--- a/contributor_docs/es/contributing_to_the_p5js_reference.md
+++ b/contributor_docs/es/contributing_to_the_p5js_reference.md
@@ -71,7 +71,7 @@ Cualquier cosa en un bloque de estos se interpretará como documentación de ref
## Bloque de comentarios de referencia
-Desglosemos el bloque de comentarios de referencia anterior para la función `sin()` y veamos qué hace cada sección. Puedes comparar lo que vez en estos comentarios con el contenido de la página de referencia para [`sin()`](https://p5js.org/reference/#/p5/sin).
+Desglosemos el bloque de comentarios de referencia anterior para la función `sin()` y veamos qué hace cada sección. Puedes comparar lo que vez en estos comentarios con el contenido de la página de referencia para [`sin()`](https://p5js.org/reference/p5/sin).
```
/**
@@ -138,7 +138,7 @@ Si el método devuelve el objeto de la superclase, puedes omitir la etiqueta `@r
## Firmas adicionales
-Si una función tiene múltiples opciones de parámetros posibles, puedes especificar cada una individualmente. Por ejemplo, la función [`background()`](http://p5js.org/reference/#p5/background) toma una serie de opciones de parámetros diferentes (ver la sección "Sintaxis" en la página de referencia). Elige una versión para incluirla como la primera firma usando la plantilla anterior. Al final del primer bloque de comentarios de referencia puedes agregar firmas adicionales, cada una en su propio bloque, como en el siguiente ejemplo.
+Si una función tiene múltiples opciones de parámetros posibles, puedes especificar cada una individualmente. Por ejemplo, la función [`background()`](https://p5js.org/reference/#p5/background) toma una serie de opciones de parámetros diferentes (ver la sección "Sintaxis" en la página de referencia). Elige una versión para incluirla como la primera firma usando la plantilla anterior. Al final del primer bloque de comentarios de referencia puedes agregar firmas adicionales, cada una en su propio bloque, como en el siguiente ejemplo.
```
/**
@@ -262,7 +262,7 @@ Si no quieres que el ejemplo se ejecute como parte de las pruebas automatizadas
*
```
-Si tu ejemplo utiliza archivos externos como recursos, colócalos en la carpeta [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) (o reutiliza uno que ya esté allí) y luego enlázalos con "assets/nombrearchivo.ext" en el código. Consulta la referencia de [tint()](http://p5js.org/reference/#/p5/tint) como ejemplo.
+Si tu ejemplo utiliza archivos externos como recursos, colócalos en la carpeta [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) (o reutiliza uno que ya esté allí) y luego enlázalos con "assets/nombrearchivo.ext" en el código. Consulta la referencia de [tint()](https://p5js.org/reference/p5/tint) como ejemplo.
### Agregar descripción a un lienzo usando `describe()`
diff --git a/contributor_docs/fes_contribution_guide.md b/contributor_docs/fes_contribution_guide.md
index 8796ab9102..99911707e1 100644
--- a/contributor_docs/fes_contribution_guide.md
+++ b/contributor_docs/fes_contribution_guide.md
@@ -245,7 +245,7 @@ arc(1, 1, 10.5, 10);
FES will generate the following message in the console:
```
-🌸 p5.js says: [sketch.js, line 13] arc() was expecting at least 6 arguments, but received only 4. (http://p5js.org/reference/#/p5/arc)
+🌸 p5.js says: [sketch.js, line 13] arc() was expecting at least 6 arguments, but received only 4. (https://p5js.org/reference/p5/arc)
```
Example of a type mismatch
@@ -257,7 +257,7 @@ arc(1, ',1', 10.5, 10, 0, Math.PI);
FES will generate the following message in the console:
```
-🌸 p5.js says: [sketch.js, line 14] arc() was expecting Number for the first parameter, received string instead. (http://p5js.org/reference/#/p5/arc)
+🌸 p5.js says: [sketch.js, line 14] arc() was expecting Number for the first parameter, received string instead. (https://p5js.org/reference/p5/arc)
```
@@ -336,7 +336,7 @@ function preload() {
FES will generate the following message in the console:
```
-🌸 p5.js says: [sketch.js, line 8] An error with message "Cannot read properties of undefined (reading 'background')" occurred inside the p5js library when "background" was called. If not stated otherwise, it might be due to "background" being called from preload. Nothing besides load calls (loadImage, loadJSON, loadFont, loadStrings, etc.) should be inside the preload function. (http://p5js.org/reference/#/p5/preload)
+🌸 p5.js says: [sketch.js, line 8] An error with message "Cannot read properties of undefined (reading 'background')" occurred inside the p5js library when "background" was called. If not stated otherwise, it might be due to "background" being called from preload. Nothing besides load calls (loadImage, loadJSON, loadFont, loadStrings, etc.) should be inside the preload function. (https://p5js.org/reference/p5/preload)
```
Internal Error Example 2:
@@ -351,7 +351,7 @@ function setup() {
FES will generate the following message in the console:
```js
-🌸 p5.js says: [sketch.js, line 12] An error with message "Cannot read properties of undefined (reading 'bind')" occurred inside the p5js library when mouseClicked was called. If not stated otherwise, it might be an issue with the arguments passed to mouseClicked. (http://p5js.org/reference/#/p5/mouseClicked)
+🌸 p5.js says: [sketch.js, line 12] An error with message "Cannot read properties of undefined (reading 'bind')" occurred inside the p5js library when mouseClicked was called. If not stated otherwise, it might be an issue with the arguments passed to mouseClicked. (https://p5js.org/reference/p5/mouseClicked)
```
Example of an Error (Scope):
@@ -386,7 +386,7 @@ function setup() {
FES will generate the following message in the console:
```
-🌸 p5.js says: [sketch.js, line 2] It seems that you may have accidentally written "xolor" instead of "color". Please correct it to color if you wish to use the function from p5.js. (http://p5js.org/reference/#/p5/color)
+🌸 p5.js says: [sketch.js, line 2] It seems that you may have accidentally written "xolor" instead of "color". Please correct it to color if you wish to use the function from p5.js. (https://p5js.org/reference/p5/color)
```
@@ -431,7 +431,7 @@ function preload() {
FES will generate the following message in the console:
```
-🌸 p5.js says: It seems that you may have accidentally written preLoad instead of preload. Please correct it if it's not intentional. (http://p5js.org/reference/#/p5/preload)
+🌸 p5.js says: It seems that you may have accidentally written preLoad instead of preload. Please correct it if it's not intentional. (https://p5js.org/reference/p5/preload)
```
diff --git a/contributor_docs/friendly_error_system.md b/contributor_docs/friendly_error_system.md
index c237cbcf40..185f9f1448 100644
--- a/contributor_docs/friendly_error_system.md
+++ b/contributor_docs/friendly_error_system.md
@@ -74,7 +74,7 @@ The basic format of a translation file's item has a key and a value (message) in
```json
{ "key": "value" }
```
-For example, we have a ASCII logo saved in this format:
+For example, we have an ASCII logo saved in this format:
```json
"logo": " _ \n /\\| |/\\ \n \\ ` ' / \n / , . \\ \n \\/|_|\\/ \n\n"
```
diff --git a/contributor_docs/hi/README.md b/contributor_docs/hi/README.md
index ff65b5214c..d6a109063f 100644
--- a/contributor_docs/hi/README.md
+++ b/contributor_docs/hi/README.md
@@ -13,7 +13,7 @@ p5.js में योगदान देने में आपकी रुच
व्यापक p5.js परियोजना में इस के अलावा कुछ रिपॉजिटरी शामिल हैं-
- [p5.js](https://github.com/processing/p5.js): इस रिपॉजिटरी में p5.js लाइब्रेरी का स्रोत कोड है। [p5.js संदर्भ मैनुअल](https://p5js.org/reference/) भी इस स्रोत कोड में शामिल [JSDoc](http://usejsdoc.org/) टिप्पणियों से उत्पन्न होता है। इसका अनुरक्षण [Moira Turner](https://github.com/mcturner1995) के द्वारा किया जा रहा है।
-- [p5.js-website](https://github.com/processing/p5.js-website) इस रिपॉजिटरी में [p5.js वेबसाइट](http://p5js.org) का अधिकांश कोड हैं, संदर्भ मैनुअल के अपवाद के साथ। इसका अनुरक्षण [Moira Turner](https://github.com/mcturner1995) के द्वारा किया जा रहा है।
+- [p5.js-website](https://github.com/processing/p5.js-website) इस रिपॉजिटरी में [p5.js वेबसाइट](https://p5js.org) का अधिकांश कोड हैं, संदर्भ मैनुअल के अपवाद के साथ। इसका अनुरक्षण [Moira Turner](https://github.com/mcturner1995) के द्वारा किया जा रहा है।
- [p5.js-sound](https://github.com/processing/p5.js-sound) इस भंडार में p5.sound.js लाइब्रेरी है। इसका अनुरक्षण [Jason Sigal](https://github.com/therewasaguy) के द्वारा किया जा रहा है।
- [p5.js-web-editor](https://github.com/processing/p5.js-web-editor) इस रिपॉजिटरी में [p5.js वेब एडिटर](https://editor.p5js.org) के लिए स्रोत कोड है। इसका अनुरक्षण [Cassie Tarakajian](https://github.com/catarak) के द्वारा किया जा रहा है। ध्यान दें कि पुराना [p5.js संपादक](https://github.com/processing/p5.js-editor) अब पदावनत हो गया है।
@@ -34,7 +34,7 @@ p5.js में योगदान देने में आपकी रुच
हमें एहसास है कि प्रलेखन इस परियोजना का सबसे महत्वपूर्ण हिस्सा है। खराब प्रलेखन नए उपयोगकर्ताओं और योगदानकर्ताओं के लिए उपयोग करने के लिए मुख्य बाधाओं में से एक है, जिससे परियोजना कम समावेशी हो जाती है। [contributing_documentation.md](./contributing_documentation.md) पृष्ठ प्रलेखन के साथ आरंभ करने का एक गहन अवलोकन देता है। p5.js के लिए प्रलेखन कुछ मुख्य स्थानों में पाया जा सकता है:
- [p5js.org संदर्भ](https://p5js.org/reference/) स्रोत कोड में ही [इनलाइन प्रलेखन](./inline_documentation.md) से उत्पन्न होता है। इसमें पाठ विवरण और पैरामीटर के साथ-साथ कोड स्निपेट उदाहरण भी शामिल हैं। हम कोड और प्रलेखन को निकटता से रखने के लिए यह सब इनलाइन रखते हैं, और इस विचार को सुदृढ़ करने के लिए कि कोड में योगदान देने की तुलना में प्रलेखन में योगदान करना अधिक महत्वपूर्ण है (यदि अधिक नहीं)। जब लाइब्रेरी निर्मित हो जाता है, तो यह इनलाइन प्रलेखन और उदाहरणों की जांच करता है ताकि यह सुनिश्चित हो सके कि वे कोड के व्यवहार के तरीके से मेल खाते हैं। योगदान करने के लिए, आप [inline_documentation.md](./inline_documentation.md) पृष्ठ को देखकर शुरू कर सकते हैं।
-- The [p5js.org उदाहरण](http://p5js.org/examples) पृष्ठ में लंबे उदाहरण हैं जो p5.js. सीखने के लिए उपयोगी हो सकते हैं। योगदान करने के लिए, आप [add_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) पृष्ठ को देखकर शुरू कर सकते हैं।
+- The [p5js.org उदाहरण](https://p5js.org/examples) पृष्ठ में लंबे उदाहरण हैं जो p5.js. सीखने के लिए उपयोगी हो सकते हैं। योगदान करने के लिए, आप [add_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) पृष्ठ को देखकर शुरू कर सकते हैं।
- The [p5js.org सीखिए](https://p5js.org/tutorials) पृष्ठ में p5.js और प्रोग्रामिंग की अवधारणाओं को सीखने में मदद करने के लिए ट्यूटोरियल हैं। योगदान करने के लिए, आप [p5.js ट्यूटोरियल में योगदान करने के लिए गाइड](https://p5js.org/learn/tutorial-guide.html) देखकर शुरू कर सकते हैं।
- आप देखेंगे कि वर्तमान में p5.js वेबसाइट कुछ अलग भाषाओं का समर्थन करती है। इसे अंतर्राष्ट्रीयकरण (या संक्षेप में i18n) कहा जाता है। आप इस दस्तावेज़ के बारे में [i18n_contribution](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contention.md) पृष्ठ पर अधिक पढ़ सकते हैं।
diff --git a/contributor_docs/hi/contributing_to_the_p5js_reference.md b/contributor_docs/hi/contributing_to_the_p5js_reference.md
index 3a9efa1beb..07d86d503c 100644
--- a/contributor_docs/hi/contributing_to_the_p5js_reference.md
+++ b/contributor_docs/hi/contributing_to_the_p5js_reference.md
@@ -73,7 +73,7 @@ p5.js के स्रोत कोड को देखने पर, आपक
## संदर्भ टिप्पणी ब्लॉक
-ऊपर दिए गए `sin()` फ़ंक्शन के लिए संदर्भ टिप्पणियों ब्लॉक को विश्लेषित करें और देखें कि प्रत्येक खंड का क्या काम है। आप यहाँ टिप्पणियों में दिखने वाली जानकारी और `sin()` के संदर्भ पृष्ठ पर जो दिखता है, उनकी तुलना कर सकते हैं। ([`sin()`](https://p5js.org/reference/#/p5/sin))
+ऊपर दिए गए `sin()` फ़ंक्शन के लिए संदर्भ टिप्पणियों ब्लॉक को विश्लेषित करें और देखें कि प्रत्येक खंड का क्या काम है। आप यहाँ टिप्पणियों में दिखने वाली जानकारी और `sin()` के संदर्भ पृष्ठ पर जो दिखता है, उनकी तुलना कर सकते हैं। ([`sin()`](https://p5js.org/reference/p5/sin))
```
/**
@@ -143,7 +143,7 @@ p5.js के स्रोत कोड को देखने पर, आपक
## अतिरिक्त चिन्ह
-यदि किसी फ़ंक्शन के पास कई संभावित पैरामीटर विकल्प हैं, तो आप प्रत्येक को व्यक्तिगत रूप से निर्दिष्ट कर सकते हैं। उदाहरण के लिए, [`background()`](http://p5js.org/reference/#p5/background) फ़ंक्शन कई विभिन्न पैरामीटर विकल्प लेता है (संदर्भ पृष्ठ पर "सिंटैक्स" खण्ड देखें)। पहले हस्ताक्षर के रूप में एक संस्करण को चुनें और उसे पहले संदर्भ टिप्पणी ब्लॉक के अंत में जोड़ें, निम्नलिखित उदाहरण का पालन करें। पहले संदर्भ टिप्पणी ब्लॉक के अंत में, आप अतिरिक्त हस्ताक्षर जोड़ सकते हैं, प्रत्येक अपने ब्लॉक में, केवल `@method` और `@param` टैग का पालन करते हुए, निम्नलिखित उदाहरण का पालन करें।
+यदि किसी फ़ंक्शन के पास कई संभावित पैरामीटर विकल्प हैं, तो आप प्रत्येक को व्यक्तिगत रूप से निर्दिष्ट कर सकते हैं। उदाहरण के लिए, [`background()`](https://p5js.org/reference/#p5/background) फ़ंक्शन कई विभिन्न पैरामीटर विकल्प लेता है (संदर्भ पृष्ठ पर "सिंटैक्स" खण्ड देखें)। पहले हस्ताक्षर के रूप में एक संस्करण को चुनें और उसे पहले संदर्भ टिप्पणी ब्लॉक के अंत में जोड़ें, निम्नलिखित उदाहरण का पालन करें। पहले संदर्भ टिप्पणी ब्लॉक के अंत में, आप अतिरिक्त हस्ताक्षर जोड़ सकते हैं, प्रत्येक अपने ब्लॉक में, केवल `@method` और `@param` टैग का पालन करते हुए, निम्नलिखित उदाहरण का पालन करें।
```
/**
@@ -270,7 +270,7 @@ p5.js के स्रोत कोड को देखने पर, आपक
*
```
-यदि आपका उदाहरण बाहरी संसाधन फ़ाइलों का उपयोग करता है, तो उन्हें [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) फ़ोल्डर में रखें (या पहले से वहां मौजूद कोई उपयोग करें) फिर उन्हें कोड में "assets/filename.ext" के साथ लिंक करें। उदाहरण के लिए [tint()](http://p5js.org/reference/#/p5/tint) संदर्भ देखें।
+यदि आपका उदाहरण बाहरी संसाधन फ़ाइलों का उपयोग करता है, तो उन्हें [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) फ़ोल्डर में रखें (या पहले से वहां मौजूद कोई उपयोग करें) फिर उन्हें कोड में "assets/filename.ext" के साथ लिंक करें। उदाहरण के लिए [tint()](https://p5js.org/reference/p5/tint) संदर्भ देखें।
### `describe()` का उपयोग करके कैनवास का विवरण जोड़ें
diff --git a/contributor_docs/how-to-add-friendly-error-messages.md b/contributor_docs/how-to-add-friendly-error-messages.md
index 46976705c9..7fc37ce499 100644
--- a/contributor_docs/how-to-add-friendly-error-messages.md
+++ b/contributor_docs/how-to-add-friendly-error-messages.md
@@ -122,9 +122,9 @@ circle(100, 100, 'hello');
The code above should generate the following FE messages:
```
-🌸 p5.js says: [sketch.js, line 9] circle() was expecting at least 3 arguments, but received only 1. (http://p5js.org/reference/#/p5/circle)
-🌸 p5.js says: [sketch.js, line 14] circle() was expecting no more than 3 arguments, but received 4. (http://p5js.org/reference/#/p5/circle)
-🌸 p5.js says: [sketch.js, line 12] circle() was expecting Number for the third parameter, received string instead. (http://p5js.org/reference/#/p5/circle)
+🌸 p5.js says: [sketch.js, line 9] circle() was expecting at least 3 arguments, but received only 1. (https://p5js.org/reference/p5/circle)
+🌸 p5.js says: [sketch.js, line 14] circle() was expecting no more than 3 arguments, but received 4. (https://p5js.org/reference/p5/circle)
+🌸 p5.js says: [sketch.js, line 12] circle() was expecting Number for the third parameter, received string instead. (https://p5js.org/reference/p5/circle)
```
Congratulations 🎈! You are now done adding parameter validation for your new method.
@@ -163,7 +163,7 @@ Next, you will file an issue ticket to discuss creating a new case or confirm yo
Go to the [issue board](https://github.com/processing/p5.js/issues), press the "New Issue" button, and then choose the "Issue: 💡 Existing Feature Enhancement" option. An empty form should appear.
-Add a title along the lines of “Adding a new case to `fileLoadErrrorCases`: \[a high-level description of your file load error case].” For the “Increasing access” section, enter a short paragraph on the typical scenario you prepared at the beginning of this step.
+Add a title along the lines of “Adding a new case to `fileLoadErrorCases`: \[a high-level description of your file load error case].” For the “Increasing access” section, enter a short paragraph on the typical scenario you prepared at the beginning of this step.
Then, check the “Friendly Errors” box for the “Most appropriate sub-area of p5.js?” question. Lastly, for the “Feature enhancement details” section, enter your paragraph detailing your error handling and what file types it loads.
@@ -247,7 +247,7 @@ p5._friendlyError(
This should generate the following FE messages:
```
-🌸 p5.js says: [sketch.js, line 19] An error with the message "vertex() must be used once before calling bezierVertex()" occurred inside the p5js library when bezierVertex was called. If not stated otherwise, it might be an issue with the arguments passed to bezierVertex. (http://p5js.org/reference/#/p5/bezierVertex)
+🌸 p5.js says: [sketch.js, line 19] An error with the message "vertex() must be used once before calling bezierVertex()" occurred inside the p5js library when bezierVertex was called. If not stated otherwise, it might be an issue with the arguments passed to bezierVertex. (https://p5js.org/reference/p5/bezierVertex)
```
Congratulations 🎈! You are now done adding library error messages for your method.
@@ -258,13 +258,13 @@ Congratulations 🎈! You are now done adding library error messages for your me
FES message writers should prioritize lowering the barrier of understanding error messages and increasing the accessibility of the debugging process. Here is one example:
```
-🌸 p5.js says: [sketch.js, line 7] circle() was expecting at least 3 arguments, but received only 1. (http://p5js.org/reference/#/p5/circle)
+🌸 p5.js says: [sketch.js, line 7] circle() was expecting at least 3 arguments, but received only 1. (https://p5js.org/reference/p5/circle)
```
The above parameter validation message will be shown in Korean if the browser is set to `ko-KR` (Korean) locale:
```
-🌸 p5.js says: [sketch.js, 줄7] 최소 3개의 인수(argument)를 받는 함수 circle()에 인수가 1개만 입력되었습니다. (http://p5js.org/reference/#/p5/circle)
+🌸 p5.js says: [sketch.js, 줄7] 최소 3개의 인수(argument)를 받는 함수 circle()에 인수가 1개만 입력되었습니다. (https://p5js.org/reference/p5/circle)
```
[Friendly Errors i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges and best practices for writing Friendly Error messages within the cross-cultural i18n context. Here are the main points from the book:
diff --git a/contributor_docs/ja/README.md b/contributor_docs/ja/README.md
index 0859e93c1b..cd3a874808 100644
--- a/contributor_docs/ja/README.md
+++ b/contributor_docs/ja/README.md
@@ -11,7 +11,7 @@ p5.jsに貢献することに興味を持ってくれてありがとうござい
p5.jsプロジェクトには、このコードリポジトリ以外にもいくつかの他のコードリポジトリがあります:
- [p5.js](https://github.com/processing/p5.js):p5.jsのソースコードを含みます。[ユーザー向けのp5.js参照文献](https://p5js.org/reference/)も、このソースコード内の[JSDoc](http://usejsdoc.org/)コメントから生成されます。[Lauren Lee McCarthy](https://github.com/lmccart)がメンテナーです。
-- [p5.js-website](https://github.com/processing/p5.js-website):このソースコードは、[p5.jsウェブサイト](http://p5js.org)の大部分のコードを含んでいます(参照文献を除く)。[Lauren Lee McCarthy](https://github.com/lmccart)がメンテナーです。
+- [p5.js-website](https://github.com/processing/p5.js-website):このソースコードは、[p5.jsウェブサイト](https://p5js.org)の大部分のコードを含んでいます(参照文献を除く)。[Lauren Lee McCarthy](https://github.com/lmccart)がメンテナーです。
- [p5.js-sound](https://github.com/processing/p5.js-sound):p5.sound.jsライブラリを含みます。[Jason Sigal](https://github.com/therewasaguy)がメンテナーです。
- [p5.js-web-editor](https://github.com/processing/p5.js-web-editor):[p5.jsウェブエディタ](https://editor.p5js.org)のソースコードを含みます。[Cassie Tarakajian](https://github.com/catarak)がメンテナーです。旧版の[p5.jsエディタ](https://github.com/processing/p5.js-editor)はもはやサポートされていませんのでご注意ください。
- [p5.accessibility](https://github.com/processing/p5.accessibility):盲人や視覚障害者がp5.jsをより使いやすくするためのライブラリです。
@@ -34,7 +34,7 @@ p5.jsプロジェクトには、このコードリポジトリ以外にもいく
私たちは、参照文献がこのプロジェクトの最も重要な部分であることを認識しています。不十分な参照文献は、新規ユーザーや新規貢献者にとって最大の障壁であり、プロジェクトの包括性を損ないます。[contributing_documentation.md](./contributing_documentation.md)ページでは、参照文献の修正を開始するための詳細なガイドを提供しています。p5.jsの参照文献は、以下の場所で見つけることができます:
- [p5js.org/reference](https://p5js.org/reference/):[inline documentation](./inline_documentation.md)のソースコードから生成されます。それには、テキストの説明とパラメータ、添付されたコードスニペットの例が含まれています。コードと参照文献を密接に連携させるために、これらすべてのインラインドキュメントとコードを一緒に配置し、参照文献への貢献がコードへの貢献と少なくとも同じくらい重要であるという考えを強化しています。ライブラリをビルドすると、インライン参照文献と例がコードの動作と一致するかどうかをチェックします。貢献するには、まず[inline_documentation.md](./inline_documentation.md)ページをチェックしてください。
-- [p5js.org/examples](http://p5js.org/examples)ページには、p5.jsを学ぶのに役立つより長い例が含まれています。貢献するには、まず[adding_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md)をチェックしてください。
+- [p5js.org/examples](https://p5js.org/examples)ページには、p5.jsを学ぶのに役立つより長い例が含まれています。貢献するには、まず[adding_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md)をチェックしてください。
- [p5js.org/tutorials](https://p5js.org/tutorials)ページには、p5.jsやプログラミングの概念を学ぶのに役立つチュートリアルが含まれています。貢献するには、まず[p5.js tutorial guide](https://p5js.org/learn/tutorial-guide.html)をチェックしてください。
- p5.jsウェブサイトが現在いくつかの異なる言語をサポートしていることに気付くかもしれません。これは国際化(i18n)と呼ばれます。[i18n_contribution](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contribution.md)ページで詳細を学ぶことができます。
diff --git a/contributor_docs/ja/contributing_to_the_p5.js_reference.md b/contributor_docs/ja/contributing_to_the_p5.js_reference.md
index 741c39d63c..8e606b1b96 100644
--- a/contributor_docs/ja/contributing_to_the_p5.js_reference.md
+++ b/contributor_docs/ja/contributing_to_the_p5.js_reference.md
@@ -68,11 +68,11 @@ p5.jsのソースコードを見るとき、ライブラリ内の多くの行が
実際のJavaScriptコードで関数が定義されているのは、そのコメントの直後です。参考コメントは常に `/**` で始まり、`*/` で終わります。その間の各行は `*` で始まります。
-この形式のコードブロックに含まれるすべての内容は参考文献として解釈されます。あなたはおそらく [JSDoc](https://jsdoc.app/) を通じてこのスタイルのコードコメントに慣れているでしょう。p5.jsはJSDocを使用していませんが、非常に似たツールである [YUIDoc](https://yui.github.io/yuidoc/) を使用しており、参照構文も非常に似ています。このスタイルの参考コメントブロックでは、各コメントブロックがさらに個々の要素に分かれています。以下では、`sin()` 関数の参考コメントブロックを解析し、各部分の役割について見ていきます。参照ページの [`sin()`](https://p5js.org/reference/#/p5/sin) と比較することができます。
+この形式のコードブロックに含まれるすべての内容は参考文献として解釈されます。あなたはおそらく [JSDoc](https://jsdoc.app/) を通じてこのスタイルのコードコメントに慣れているでしょう。p5.jsはJSDocを使用していませんが、非常に似たツールである [YUIDoc](https://yui.github.io/yuidoc/) を使用しており、参照構文も非常に似ています。このスタイルの参考コメントブロックでは、各コメントブロックがさらに個々の要素に分かれています。以下では、`sin()` 関数の参考コメントブロックを解析し、各部分の役割について見ていきます。参照ページの [`sin()`](https://p5js.org/reference/p5/sin) と比較することができます。
## 参考コメントブロック
-上記の `sin()` 関数の参考コメントブロックを解析し、各部分の役割を見ていきましょう。このコメントを参照ページ上の [`sin()`](https://p5js.org/reference/#/p5/sin) と比較することができます。
+上記の `sin()` 関数の参考コメントブロックを解析し、各部分の役割を見ていきましょう。このコメントを参照ページ上の [`sin()`](https://p5js.org/reference/p5/sin) と比較することができます。
```
/**
@@ -143,7 +143,7 @@ p5.jsのソースコードを見るとき、ライブラリ内の多くの行が
## 其他签名
-如果一个函数有多个可能的参数选项,则可以分别指定每个参数。例如,[`background()`](http://p5js.org/reference/#p5/background) 函数有许多不同的参数选项(请参阅参考页面上的“语法”部分)。选择一个版本以使用上面的模板列出作为第一个签名。在第一个参考注释块的末尾,你可以添加额外的签名,每个签名都在自己的块中,仅使用以下示例中的 `@method` 和 `@param` 标签。
+如果一个函数有多个可能的参数选项,则可以分别指定每个参数。例如,[`background()`](https://p5js.org/reference/#p5/background) 函数有许多不同的参数选项(请参阅参考页面上的“语法”部分)。选择一个版本以使用上面的模板列出作为第一个签名。在第一个参考注释块的末尾,你可以添加额外的签名,每个签名都在自己的块中,仅使用以下示例中的 `@method` 和 `@param` 标签。
```
/**
@@ -270,7 +270,7 @@ p5.jsのソースコードを見るとき、ライブラリ内の多くの行が
*
```
-サンプルで外部アセット ファイルを使用する場合は、それらを [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5 -theme/assets) に配置してください。 フォルダー (またはそこにある既存のファイルを再利用) を作成し、「assets/filename.ext」を使用してコード内でそれらにリンクします。 参考例については、[tint()](http://p5js.org/reference/#/p5/tint) を参照してください。
+サンプルで外部アセット ファイルを使用する場合は、それらを [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5 -theme/assets) に配置してください。 フォルダー (またはそこにある既存のファイルを再利用) を作成し、「assets/filename.ext」を使用してコード内でそれらにリンクします。 参考例については、[tint()](https://p5js.org/reference/p5/tint) を参照してください。
### `describe()` を使用してキャンバスの説明を追加します
diff --git a/contributor_docs/ja/creating_libraries.md b/contributor_docs/ja/creating_libraries.md
index 3935fd9693..fad4b085cc 100644
--- a/contributor_docs/ja/creating_libraries.md
+++ b/contributor_docs/ja/creating_libraries.md
@@ -120,8 +120,8 @@ https://github.com/processing/processing/wiki/Library-Basics#library-methods
* **貢献ライブラリは、作成者によってホスト、文書化、およびメンテナンスされます。** これはGitHub、個別のウェブサイト、またはその他の場所で行われる可能性があります。
-* **ドキュメントは非常に重要です!** ライブラリのドキュメントは、ダウンロードしてライブラリを使用するユーザーが簡単に見つけられる場所に配置してください。貢献ライブラリのドキュメントは、p5.jsの主要なリファレンスドキュメントには含まれませんが、類似の形式に従うことを検討してください。以下の例を参照してください:[ライブラリ概要ページ](http://p5js.org/reference/#/libraries/p5.sound)、[クラス概要ページ](http://p5js.org/reference/#/p5.Vector)、[メソッドページ](http://p5js.org/reference/#/p5/arc)。
+* **ドキュメントは非常に重要です!** ライブラリのドキュメントは、ダウンロードしてライブラリを使用するユーザーが簡単に見つけられる場所に配置してください。貢献ライブラリのドキュメントは、p5.jsの主要なリファレンスドキュメントには含まれませんが、類似の形式に従うことを検討してください。以下の例を参照してください:[ライブラリ概要ページ](https://p5js.org/reference/libraries/p5.sound)、[クラス概要ページ](https://p5js.org/reference/p5.Vector)、[メソッドページ](https://p5js.org/reference/p5/arc)。
* **例も素晴らしいです!** それらは人々にあなたのライブラリが何ができるかを示します。これはすべてJavaScriptなので、ダウンロードする前にオンラインで実行することができます。[jsfiddle](http://jsfiddle.net/)と[codepen](http://codepen.io)は、例をホストするための2つの良いシンプルなオプションです。
-* **お知らせください!** ライブラリがリリース準備が整ったら、[hello@p5js.org](mailto:hello@p5js.org)にリンクといくつかの情報を添えてメールを送ってください。[ライブラリページ](http://p5js.org/libraries/)に掲載されます!
+* **お知らせください!** ライブラリがリリース準備が整ったら、[hello@p5js.org](mailto:hello@p5js.org)にリンクといくつかの情報を添えてメールを送ってください。[ライブラリページ](https://p5js.org/libraries/)に掲載されます!
diff --git a/contributor_docs/ja/fes_reference_dev_notes.md b/contributor_docs/ja/fes_reference_dev_notes.md
index 8b77378e1f..60ebdbcfef 100644
--- a/contributor_docs/ja/fes_reference_dev_notes.md
+++ b/contributor_docs/ja/fes_reference_dev_notes.md
@@ -213,16 +213,16 @@ _validateParameters(func, args)
arc(1, 1, 10.5, 10);
```
FESはコンソールに以下のメッセージを生成します:
-> 🌸 p5.jsが言うには、arc()は位置#4(ゼロベースのインデックス)で空の変数を受け取ったようです。これが意図的でない場合、通常はスコープの問題です:[https://p5js.org/examples/data-variable-scope.html]。[http://p5js.org/reference/#p5/arc]
+> 🌸 p5.jsが言うには、arc()は位置#4(ゼロベースのインデックス)で空の変数を受け取ったようです。これが意図的でない場合、通常はスコープの問題です:[https://p5js.org/examples/data-variable-scope.html]。[https://p5js.org/reference/#p5/arc]
-> 🌸 p5.jsが言うには、arc()は位置#5(ゼロベースのインデックス)で空の変数を受け取ったようです。これが意図的でない場合、通常はスコープの問題です:[https://p5js.org/examples/data-variable-scope.html]。[http://p5js.org/reference/#p5/arc]
+> 🌸 p5.jsが言うには、arc()は位置#5(ゼロベースのインデックス)で空の変数を受け取ったようです。これが意図的でない場合、通常はスコープの問題です:[https://p5js.org/examples/data-variable-scope.html]。[https://p5js.org/reference/#p5/arc]
型の不一致の例
```javascript
arc('1', 1, 10.5, 10, 0, Math.PI, 'pie');
```
FESはコンソールに以下のメッセージを生成します:
-> 🌸 p5.jsが言うには、arc()はパラメータ#0(ゼロベースのインデックス)でNumberを期待していましたが、文字列を受け取りました。[http://p5js.org/reference/#/p5/arc]
+> 🌸 p5.jsが言うには、arc()はパラメータ#0(ゼロベースのインデックス)でNumberを期待していましたが、文字列を受け取りました。[https://p5js.org/reference/p5/arc]
##### 位置
core/friendly_errors/validate_params.js
@@ -276,7 +276,7 @@ function preload() {
}
```
FES将在控制台中生成以下消息:
-> 🌸 p5.jsが言うには、backgroundを呼び出したとき(sketch.jsの4行目[http://localhost:8000/lib/empty-example/sketch.js:4:3])、p5jsライブラリ内部でエラーが発生しました。エラーメッセージは「未定義のプロパティ'background'を読み取れません」です。(特に説明がない限り、これはpreloadからbackgroundが呼び出されたためかもしれません。preload関数内にはload関数(loadImage、loadJSON、loadFont、loadStringsなど)以外は含まれていないべきです。)(http://p5js.org/reference/#/p5/preload)
+> 🌸 p5.jsが言うには、backgroundを呼び出したとき(sketch.jsの4行目[http://localhost:8000/lib/empty-example/sketch.js:4:3])、p5jsライブラリ内部でエラーが発生しました。エラーメッセージは「未定義のプロパティ'background'を読み取れません」です。(特に説明がない限り、これはpreloadからbackgroundが呼び出されたためかもしれません。preload関数内にはload関数(loadImage、loadJSON、loadFont、loadStringsなど)以外は含まれていないべきです。)(https://p5js.org/reference/p5/preload)
内部エラーの例 2
```javascript
@@ -286,7 +286,7 @@ function setup() {
}
```
FES将在控制台中生成以下消息:
-> 🌸 p5.jsが言うには、mouseClickedを呼び出したとき(sketch.jsの3行目[http://localhost:8000/lib/empty-example/sketch.js:3:7])、p5jsライブラリ内部でエラーが発生しました。エラーメッセージは「未定義のプロパティ'bind'を読み取れません」です。(特に説明がない限り、これはmouseClickedへの引数に問題がある可能性があります。)(http://p5js.org/reference/#/p5/mouseClicked)
+> 🌸 p5.jsが言うには、mouseClickedを呼び出したとき(sketch.jsの3行目[http://localhost:8000/lib/empty-example/sketch.js:3:7])、p5jsライブラリ内部でエラーが発生しました。エラーメッセージは「未定義のプロパティ'bind'を読み取れません」です。(特に説明がない限り、これはmouseClickedへの引数に問題がある可能性があります。)(https://p5js.org/reference/p5/mouseClicked)
ユーザー例のスコープエラーの例
```javascript
@@ -306,7 +306,7 @@ function setup() {
}
```
FESはコンソールに以下のメッセージを生成します:
-> 🌸 p5.jsが言うには、「colour」を誤って「color」と書いてしまった可能性があります(sketch.jsの2行目[http://localhost:8000/lib/empty-example/sketch.js:2:3])。p5.jsの関数を使用する場合は、それをcolorに修正してください(http://p5js.org/reference/#/p5/color)。
+> 🌸 p5.jsが言うには、「colour」を誤って「color」と書いてしまった可能性があります(sketch.jsの2行目[http://localhost:8000/lib/empty-example/sketch.js:2:3])。p5.jsの関数を使用する場合は、それをcolorに修正してください(https://p5js.org/reference/p5/color)。
##### 位置
core/friendly_errors/fes_core.js
@@ -334,7 +334,7 @@ function setup() {
}
```
FESはコンソールに以下のメッセージを生成します:
-> 🌸 p5.jsのヒント:p5.jsの予約された変数「PI」を使用しています。変数名を他の名前に変更してください。(https://p5js.org/reference/#/p5/PI)
+> 🌸 p5.jsのヒント:p5.jsの予約された変数「PI」を使用しています。変数名を他の名前に変更してください。(https://p5js.org/reference/p5/PI)
p5.jsの予約関数の再定義例
```javascript
@@ -372,7 +372,7 @@ function preLoad() {
}
```
FESはコンソールに以下のメッセージを生成します:
-> 🌸 p5.jsのヒント:preLoadと書くべきところをpreloadと誤って書いているようです。これが意図していない場合は、訂正してください。(http://p5js.org/reference/#/p5/preload)
+> 🌸 p5.jsのヒント:preLoadと書くべきところをpreloadと誤って書いているようです。これが意図していない場合は、訂正してください。(https://p5js.org/reference/p5/preload)
##### 位置
core/friendly_errors/fes_core.js
diff --git a/contributor_docs/ko/README.md b/contributor_docs/ko/README.md
index bf770b4736..90ff0c357a 100644
--- a/contributor_docs/ko/README.md
+++ b/contributor_docs/ko/README.md
@@ -13,7 +13,7 @@ p5.js에 기여하는데에 관심을 가져주셔서 감사합니다! 우리
p5.js 프로젝트의 핵심적인 저장소들은 아래와 같습니다:
- [p5.js](https://github.com/processing/p5.js): 본 저장소에는 p5.js 라이브러리의 소스 코드가 보관되어 있습니다. [유저들이 보게 되는 p5.js의 레퍼런스 매뉴얼](https://p5js.org/reference/) 또한 이 소스 코드에 포함되어 있는 [JSDoc](http://usejsdoc.org/) 각주에서 생성됩니다. 본 저장소는 [로렌 리 맥카시(Lauren Lee McCarthy)](https://github.com/lmccart)가 관리합니다.
-- [p5.js-website](https://github.com/processing/p5.js-website): 본 저장소에는 레퍼런스 매뉴얼을 제외한 [p5.js 웹사이트](http://p5js.org)의 코드가 전부 보관되어 있습니다. 본 저장소는 [로렌 리 맥카시(Lauren Lee McCarthy)](https://github.com/lmccart)가 관리합니다.
+- [p5.js-website](https://github.com/processing/p5.js-website): 본 저장소에는 레퍼런스 매뉴얼을 제외한 [p5.js 웹사이트](https://p5js.org)의 코드가 전부 보관되어 있습니다. 본 저장소는 [로렌 리 맥카시(Lauren Lee McCarthy)](https://github.com/lmccart)가 관리합니다.
- [p5.js-sound](https://github.com/processing/p5.js-sound): 본 저장소에는 p5.sound.js 라이브러리가 보관되어 있습니다. 본 저장소는 [제이슨 시갈(Jason Sigal)](https://github.com/therewasaguy)이 관리합니다.
- [p5.js-web-editor](https://github.com/processing/p5.js-web-editor): 본 저장소에는 [p5.js 웹 에디터](https://editor.p5js.org)의 소스 코드가 보관되어 있습니다. 본 저장소는 [캐시 타라케지언(Cassie Tarakajian)](https://github.com/catarak)이 관리합니다. 예전의 [p5.js 에디터](https://github.com/processing/p5.js-editor)는 이제 더 이상 사용되지 않다는 점을 참고하십시오.
- [p5.accessibility](https://github.com/processing/p5.accessibility): 맹인 및 시각 장애인들이 조금 더 쉽게 p5 캔버스를 사용할 수 있도록 하는 라이브러리입니다.
@@ -39,7 +39,7 @@ p5.js 프로젝트의 핵심적인 저장소들은 아래와 같습니다:
문서화는 본 프로젝트의 가장 중요한 부분입니다. 낮은 품질의 문서화는 새로운 이용자와 컨트리뷰터들의 진입 장벽을 높여 프로젝트 참여도를 저하시킵니다. [contributing_documentation.md](./contributing_documentation.md) 페이지는 문서화를 시작하는 데에 깊이 있는 개요를 제시합니다. p5.js를 위한 문서화는 아래와 같은 곳들에서 주로 찾아볼 수 있습니다:
- [p5js.org/reference](https://p5js.org/reference/)는 소스 코드의 [인라인 도큐멘테이션](./inline_documentation.md)으로부터 생성됩니다. 이는 텍스트 설명, 파라미터, 코드 스니펫 예시 등을 포함합니다. 우리는 코드와 인라인 도큐멘테이션을 긴밀히 연결시키고, 문서화에 기여하는 게 코드에 기여하는 것 만큼이나 중요하다는 생각을 강화하기 위해 인라인 도큐멘테이션을 활용하는 것입니다. 라이브러리가 빌드 되면 라이브러리와 코드가 작동하는 방식 사이에 문제가 없음을 확실히 하기 위해 인라인 도큐멘테이션과 예시를 확인합니다. 이에 기여하기 위해선 [inline_documentation.md](./inline_documentation.md) 페이지를 살펴보는 걸로 시작하시기 바랍니다.
-- [p5js.org/examples](http://p5js.org/examples)페이지는 p5.js를 학습하는 데에 유용할 수 있는 길이가 긴 예시들을 담고 있습니다. 컨트리뷰션을 위해서는 [adding_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) 페이지를 살펴보시기 바랍니다.
+- [p5js.org/examples](https://p5js.org/examples)페이지는 p5.js를 학습하는 데에 유용할 수 있는 길이가 긴 예시들을 담고 있습니다. 컨트리뷰션을 위해서는 [adding_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) 페이지를 살펴보시기 바랍니다.
- [p5js.org/tutorials](https://p5js.org/tutorials)페이지는 p5.js와 프로그래밍의 개념을 배울 수 있도록 도와주는 튜토리얼들을 담고 있습니다. 기여하기 위해서는 [p5.js 웹사이트의 튜토리얼에 대한 튜토리얼](https://p5js.org/learn/tutorial-guide.html)을 살펴보시기 바랍니다!
- p5.js 웹사이트는 현재 몇 가지 다른 언어들을 지원하고 있음을 확인하실 수 있습니다. 이는 국제화(혹은 줄여서 i18n)라고 불립니다. 이에 대한 문서는 [i18n_contribution](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contribution.md) 페이지에서 더 자세히 보실 수 있습니다.
diff --git a/contributor_docs/ko/contributing_to_the_p5js_reference.md b/contributor_docs/ko/contributing_to_the_p5js_reference.md
index 139492a247..3648254c45 100644
--- a/contributor_docs/ko/contributing_to_the_p5js_reference.md
+++ b/contributor_docs/ko/contributing_to_the_p5js_reference.md
@@ -71,7 +71,7 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
## 레퍼런스 주석 블록
-앞서 보았던 `sin()` 함수의 레퍼런스 주석 블록을 조금 더 자세히 살펴보고, 각 섹션이 어떤 역할을 하는지 알아봅시다. 주석으로 작성한 내용이 실제 [`sin()`](https://p5js.org/reference/#/p5/sin) 레퍼런스 페이지에서는 어떻게 보여지는지 비교해보세요.
+앞서 보았던 `sin()` 함수의 레퍼런스 주석 블록을 조금 더 자세히 살펴보고, 각 섹션이 어떤 역할을 하는지 알아봅시다. 주석으로 작성한 내용이 실제 [`sin()`](https://p5js.org/reference/p5/sin) 레퍼런스 페이지에서는 어떻게 보여지는지 비교해보세요.
```
/**
@@ -138,7 +138,7 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
## 추가 시그니처
-만약 함수가 여러 개의 매개변수 옵션을 가지고 있다면, 각각을 개별적으로 명시할 수 있습니다. 예를 들어, [`background()`](http://p5js.org/reference/#p5/background) 함수는 다양한 매개변수 옵션을 지원하고 있습니다(background() 레퍼런스 페이지에서 "문법" 섹션을 확인해 보세요). 먼저 여러 옵션 중 하나를 선택하여, 앞서 살펴본 형식에 따라 첫 번째 시그니처에 관한 주석을 작성합니다. 첫 번째 주석 블록이 끝나면, 뒤이어 다른 시그니처를 추가 작성할 수 있습니다. 각각의 추가 시그니처는 ’@method’와 ‘@param’ 태그만 사용하여 작성할 수 있으며, 각자의 블록 범위 내에 작성되어야 합니다. 아래 예시를 참고해 주세요.
+만약 함수가 여러 개의 매개변수 옵션을 가지고 있다면, 각각을 개별적으로 명시할 수 있습니다. 예를 들어, [`background()`](https://p5js.org/reference/#p5/background) 함수는 다양한 매개변수 옵션을 지원하고 있습니다(background() 레퍼런스 페이지에서 "문법" 섹션을 확인해 보세요). 먼저 여러 옵션 중 하나를 선택하여, 앞서 살펴본 형식에 따라 첫 번째 시그니처에 관한 주석을 작성합니다. 첫 번째 주석 블록이 끝나면, 뒤이어 다른 시그니처를 추가 작성할 수 있습니다. 각각의 추가 시그니처는 ’@method’와 ‘@param’ 태그만 사용하여 작성할 수 있으며, 각자의 블록 범위 내에 작성되어야 합니다. 아래 예시를 참고해 주세요.
```
/**
@@ -262,7 +262,7 @@ p5.js 소스 코드를 보면 많은 라인이 레퍼런스 주석으로 작성
*
```
-만약, 예제 코드가 외부 애셋 파일을 사용해야 한다면, 필요한 파일들을 [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) 폴더에 넣어두세요(이미 해당 폴더에 존재하는 파일을 재사용해도 됩니다). 그리고 코드에서 "assets/filename.ext" 경로로 파일을 불러와 사용하면 됩니다. [tint()](http://p5js.org/reference/#/p5/tint) 레퍼런스를 참고하세요.
+만약, 예제 코드가 외부 애셋 파일을 사용해야 한다면, 필요한 파일들을 [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) 폴더에 넣어두세요(이미 해당 폴더에 존재하는 파일을 재사용해도 됩니다). 그리고 코드에서 "assets/filename.ext" 경로로 파일을 불러와 사용하면 됩니다. [tint()](https://p5js.org/reference/p5/tint) 레퍼런스를 참고하세요.
### `describe()`로 캔버스 설명 추가하기
diff --git a/contributor_docs/ko/creating_libraries.md b/contributor_docs/ko/creating_libraries.md
index b9229f7767..fb94963e0b 100644
--- a/contributor_docs/ko/creating_libraries.md
+++ b/contributor_docs/ko/creating_libraries.md
@@ -124,9 +124,9 @@ https://GitHub.com/processing/processing/wiki/Library-Basics#library-methods
* **기여된 라이브러리는 제작자가 호스팅, 문서화 및 유지 관리합니다.** 라이브러리들은 GitHub, 별도의 웹 사이트 또는 어딘가에 있을 수 있습니다.
-* **문서가 핵심입니다!** 라이브러리 문서는 사용자가 쉽게 찾아보고 다운로드 하여 사용할 수 있는 곳에 있어야 합니다. 기여된 라이브러리에 대한 문서는 기본 p5.js 레퍼런스에 포함되지 않지만 여러분이 유사한 형식을 따르고 싶을 수도 있습니다. [라이브러리 개요 페이지](http://p5js.org/reference/#/libraries/p5.sound), [클래스 개요 페이지](http://p5js.org/reference/#/p5.Vector) 및 [메소드 페이지](http://p5js.org/reference/#/p5/arc) 의 예제를 참조하세요.
+* **문서가 핵심입니다!** 라이브러리 문서는 사용자가 쉽게 찾아보고 다운로드 하여 사용할 수 있는 곳에 있어야 합니다. 기여된 라이브러리에 대한 문서는 기본 p5.js 레퍼런스에 포함되지 않지만 여러분이 유사한 형식을 따르고 싶을 수도 있습니다. [라이브러리 개요 페이지](https://p5js.org/reference/libraries/p5.sound), [클래스 개요 페이지](https://p5js.org/reference/p5.Vector) 및 [메소드 페이지](https://p5js.org/reference/p5/arc) 의 예제를 참조하세요.
* **예제가 좋습니다!** 사람들에게 라이브러리가 할 수 있는 일을 보여주세요. 모두 자바스크립트이므로 사람들은 라이브러리를 다운로드하기 전 온라인에서 실행 되는 것을 볼 수 있습니다. 예제들을 호스팅하기 쉬운
[jsfiddle](http://jsfiddle.net/) 및 [codepen](http://codepen.io)이라는 두가지 좋은 옵션이 있습니다.
-* **알려주세요!** 라이브러리를 배포 할 준비가 되면 [hello@p5js.org](mailto:hello@p5js.org)로 링크와 몇 가지 정보와 함께 보내주세요. [라이브러리 페이지](http://p5js.org/libraries/)에 추가 할 것입니다.
+* **알려주세요!** 라이브러리를 배포 할 준비가 되면 [hello@p5js.org](mailto:hello@p5js.org)로 링크와 몇 가지 정보와 함께 보내주세요. [라이브러리 페이지](https://p5js.org/libraries/)에 추가 할 것입니다.
diff --git a/contributor_docs/ko/friendly_error_system.md b/contributor_docs/ko/friendly_error_system.md
index 2f8a06ba6d..eaef49262e 100644
--- a/contributor_docs/ko/friendly_error_system.md
+++ b/contributor_docs/ko/friendly_error_system.md
@@ -54,15 +54,15 @@ function draw() {};
```javascript
arc(1, 1, 10.5, 10);
/// 콘솔에 다음의 메시지가 생성됩니다.:
-/// > pt.js: arc() 함수의 입력 파라미터 중 4번째 자리(인덱스는 0부터 시작)에 빈 값이 들어온 것 같습니다. 의도한 것이 아니라면, 이것은 종종 범위의 문제입니다.: [https://p5js.org/examples/data-variable-scope.html]. [http://p5js.org/reference/#p5/arc]
-/// > pt.js: arc() 함수의 입력 파라미터 중 5번째 자리(인덱스는 0부터 시작)에 빈 값이 들어온 것 같습니다. 의도한 것이 아니라면, 이것은 종종 범위의 문제입니다.: [https://p5js.org/examples/data-variable-scope.html]. [http://p5js.org/reference/#p5/arc]
+/// > pt.js: arc() 함수의 입력 파라미터 중 4번째 자리(인덱스는 0부터 시작)에 빈 값이 들어온 것 같습니다. 의도한 것이 아니라면, 이것은 종종 범위의 문제입니다.: [https://p5js.org/examples/data-variable-scope.html]. [https://p5js.org/reference/#p5/arc]
+/// > pt.js: arc() 함수의 입력 파라미터 중 5번째 자리(인덱스는 0부터 시작)에 빈 값이 들어온 것 같습니다. 의도한 것이 아니라면, 이것은 종종 범위의 문제입니다.: [https://p5js.org/examples/data-variable-scope.html]. [https://p5js.org/reference/#p5/arc]
```
* 자료형 오류 예시:
```javascript
arc('1', 1, 10.5, 10, 0, Math.PI, 'pie');
/// 콘솔에 다음의 메시지가 생성됩니다.:
-/// > p5.js:arc() 함수의 입력 파라미터 중 0번째 자리에는(인덱스는 0부터 시작)에는 숫자가 들어와야 하는데 문자열이 들어왔습니다. [http://p5js.org/reference/#p5/arc]
+/// > p5.js:arc() 함수의 입력 파라미터 중 0번째 자리에는(인덱스는 0부터 시작)에는 숫자가 들어와야 하는데 문자열이 들어왔습니다. [https://p5js.org/reference/#p5/arc]
```
* 이것은 다음과 같이 호출할 수 있습니다.: `p5._validateParameters(FUNCT_NAME, ARGUMENTS)` 또는 `p5.prototype._validateParameters(FUNCT_NAME, ARGUMENTS)` 는 파라미터 검증이 필요한 함수 내부에서 씁니다. 일반적인 목적으로는 `p5._validateParameters` 를 사용하는 것이 좋습니다. `p5.prototype._validateParameters(FUNCT_NAME, ARGUMENTS)` 은 주로 디버깅이나 단위 테스트 목적으로 사용합니다.
* `color/creating_reading`, `core/2d_primitives`, `core/curves`, 그리고 `utilities/string_functions` 의 함수로 구현되어 있습니다.
diff --git a/contributor_docs/method.example.js b/contributor_docs/method.example.js
index fcc6c82583..67c4e0fb96 100644
--- a/contributor_docs/method.example.js
+++ b/contributor_docs/method.example.js
@@ -2,7 +2,7 @@
* "This is a template for inline documentation of a method. Remove all text
* between double quotes for using this template. Some description about the
* method goes here. Explain in simple words, what the function does and what
- * would be good/bad use cases for it. If there are any corners cases or warnings,
+ * would be good/bad use cases for it. If there are any corner cases or warnings,
* do explain them over here."
*
* By default, the background is transparent.
@@ -32,8 +32,8 @@
* "A single line precisely describing the second example"
*/
-// "If your method has more than one signatures, they can be documentated each
-// in their own block with description about their parameters as follows."
+// "If your method has more than one signature, they can be documented each
+// in their own block with description of their parameters as follows."
/**
* @method "methodName"
* @param {"dataType"} "paramName" "Description of the param"
diff --git a/contributor_docs/project_wrapups/orenshoham_gsoc_2019.md b/contributor_docs/project_wrapups/orenshoham_gsoc_2019.md
index c9332e44a2..a5008a83d5 100644
--- a/contributor_docs/project_wrapups/orenshoham_gsoc_2019.md
+++ b/contributor_docs/project_wrapups/orenshoham_gsoc_2019.md
@@ -8,9 +8,9 @@ The AudioWorklet API consists of two classes: [AudioWorkletProcessor](https://de
AudioWorklet replaces [ScriptProcessorNode](https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode), a now-deprecated Web Audio node that runs audio code in the browser's main thread. p5.js-sound used ScriptProcessorNode internally in three classes:
-- [p5.SoundFile](https://p5js.org/reference/#/p5.SoundFile), which used a ScriptProcessorNode to keep track of a SoundFile's current playback position.
-- [p5.Amplitude](https://p5js.org/reference/#/p5.Amplitude), which used a ScriptProcessorNode to perform amplitude analysis.
-- [p5.SoundRecorder](https://p5js.org/reference/#/p5.SoundRecorder), which used a ScriptProcessorNode to concatenate audio buffers together during the recording process.
+- [p5.SoundFile](https://p5js.org/reference/p5.SoundFile), which used a ScriptProcessorNode to keep track of a SoundFile's current playback position.
+- [p5.Amplitude](https://p5js.org/reference/p5.Amplitude), which used a ScriptProcessorNode to perform amplitude analysis.
+- [p5.SoundRecorder](https://p5js.org/reference/p5.SoundRecorder), which used a ScriptProcessorNode to concatenate audio buffers together during the recording process.
For each of these classes, I created new AudioWorkletProcessors for [p5.SoundFile](https://github.com/processing/p5.js-sound/blob/4d3a3833de4d30f6770740052a82586444a4482a/src/audioWorklet/soundFileProcessor.js), [p5.Amplitude](https://github.com/processing/p5.js-sound/blob/4d3a3833de4d30f6770740052a82586444a4482a/src/audioWorklet/amplitudeProcessor.js), and [p5.SoundRecorder](https://github.com/processing/p5.js-sound/blob/4d3a3833de4d30f6770740052a82586444a4482a/src/audioWorklet/recorderProcessor.js) that replicated the corresponding ScriptProcessorNode's [onaudioprocess](https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode/onaudioprocess) function.
diff --git a/contributor_docs/project_wrapups/sanket_gsoc_2019.md b/contributor_docs/project_wrapups/sanket_gsoc_2019.md
index 5dab51a5b9..f90e435b76 100644
--- a/contributor_docs/project_wrapups/sanket_gsoc_2019.md
+++ b/contributor_docs/project_wrapups/sanket_gsoc_2019.md
@@ -18,7 +18,7 @@ Apart from implementing these functions, I also added unit tests, manual tests,
Before and during the Summer of Code, I fixed minor bugs unrelated to my project, which helped me immensely to understand and get around the codebase and the workflow of p5.js. They are listed [here](https://github.com/processing/p5.js/pulls?utf8=%E2%9C%93&q=is%3Apr+author%3Asanketsingh24).
-### [lightFalloff()](https://p5js.org/reference/#/p5/lightFalloff)
+### [lightFalloff()](https://p5js.org/reference/p5/lightFalloff)
This function allows the user to set the attenuation values, which are used in shaders to restrict the spread of light. Earlier, this was a constant value. Now, the artists can use this function to set the value themselves. Implementing this function required me to add three new uniforms, as well as modifying the light shader and light.js. The default was set to 1.
### [emissiveMaterial()](https://github.com/processing/p5.js/pull/3820)
diff --git a/contributor_docs/project_wrapups/wong_gsoc_2023.md b/contributor_docs/project_wrapups/wong_gsoc_2023.md
index 248e27b5c0..def485d24a 100644
--- a/contributor_docs/project_wrapups/wong_gsoc_2023.md
+++ b/contributor_docs/project_wrapups/wong_gsoc_2023.md
@@ -31,9 +31,9 @@ Many thanks to my mentors for all their support: Adam Ferriss, Austin Slominski,
- [Third pull request](https://github.com/processing/p5.js/pull/6324), replacing the old filters with new shader filters. Status: merged
### Public documentation pages:
-- [WEBGL](https://p5js.org/reference/#/p5/WEBGL) - Status: merged, page created
-- [filter()](https://p5js.org/reference/#/p5/filter) - Status: merged, page not updated yet
-- [createFilterShader()](https://p5js.org/reference/#/p5/createFilterShader) - Status: merged, page not created yet
+- [WEBGL](https://p5js.org/reference/p5/WEBGL) - Status: merged, page created
+- [filter()](https://p5js.org/reference/p5/filter) - Status: merged, page not updated yet
+- [createFilterShader()](https://p5js.org/reference/p5/createFilterShader) - Status: merged, page not created yet
### Performance measuring helpers:
diff --git a/contributor_docs/pt-br/README.md b/contributor_docs/pt-br/README.md
index acadbccc4d..b57af5778b 100644
--- a/contributor_docs/pt-br/README.md
+++ b/contributor_docs/pt-br/README.md
@@ -29,7 +29,7 @@ Além do código em si, também pode ser necessário fornecer alguma combinaçã
## Exemplos
-O site p5.js. inclui [exemplos integrados](http://p5js.org/examples/). Você pode [adicionar mais](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) e há uma issue que lista alguns [exemplos desejados](https://github.com/processing/p5.js/issues/1954).
+O site p5.js. inclui [exemplos integrados](https://p5js.org/examples/). Você pode [adicionar mais](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) e há uma issue que lista alguns [exemplos desejados](https://github.com/processing/p5.js/issues/1954).
## ES6
diff --git a/contributor_docs/release_process.md b/contributor_docs/release_process.md
index b2490e6c75..6c42a5575d 100644
--- a/contributor_docs/release_process.md
+++ b/contributor_docs/release_process.md
@@ -62,7 +62,7 @@ Once triggered, it will run the following steps:
In principle, we try to concentrate as many steps as possible to be run in one place, ie. in the CI environment. If a new step that is only run on release is required, it should probably be defined in the CI workflow and not as part of the build configuration.
## Testing
-As the release steps are run in CI, testing them can be difficult. Using [act](https://github.com/nektos/act) to test running of the steps locally is possible (and was how they were tested while being developed) but require some temporary modifications to the workflow definition, we'll roughly document here as the precise steps will likely change over time.
+As the release steps are run in CI, testing them can be difficult. Using [act](https://github.com/nektos/act) to test running of the steps locally is possible (and was how they were tested while being developed) but requires some temporary modifications to the workflow definition, we'll roughly document here as the precise steps will likely change over time.
The test steps will not run because not all system requirements are present to run the mocha Chrome tests. Some system dependencies will likely be needed to be installed with `apt` before setting up the rest of the environment. Keep an eye on the error messages which should give some information on what packages are missing.
diff --git a/contributor_docs/sk/README.md b/contributor_docs/sk/README.md
index 76e92d8396..b3bc16aedb 100644
--- a/contributor_docs/sk/README.md
+++ b/contributor_docs/sk/README.md
@@ -29,7 +29,7 @@ Mimo samotného kódu je potrebné aby si dodal aj kombináciu z nasledovných.
## Príklady
-Stránka p5.js obsahujé [integrované príklady](http://p5js.org/examples/). Môžeš [pridať ďalšie](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) a zároveň si pozrieť problém, ktorý obsahuje list [požadovaných príkladov](https://github.com/processing/p5.js/issues/1954).
+Stránka p5.js obsahujé [integrované príklady](https://p5js.org/examples/). Môžeš [pridať ďalšie](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) a zároveň si pozrieť problém, ktorý obsahuje list [požadovaných príkladov](https://github.com/processing/p5.js/issues/1954).
## ES6
p5.js nedávno migrovalo na [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015). Ak chceš vidieť ako táto zmena ovplyňuje tvoj príspevok, navštív prosím stránku [adaptácia ES6](./es6-adoption.md).
@@ -154,7 +154,7 @@ $ npm run docs:dev
Zastršujúci projekt p5.js zahŕňa aj iné repozitáre ako tento.
- [p5.js](https://github.com/processing/p5.js): Tento repozitár obsahuje zdrojový kód knižnice p5.js. [Používateľská referečná príručka p5.js](https://p5js.org/reference/) je generovaná z [JSDoc](http://usejsdoc.org/) komentárov zahrnutých v tomto zdrojovom kóde. Spravuje ho [Lauren McCarthy](https://github.com/lmccart).
-- [website](https://github.com/processing/p5.js-website) Tento repozitár obsahuje väčšinu kódu [stránky p5.js](http://p5js.org) s výnimkou referenčnej príručky. Spravuje ho [Lauren McCarthy](https://github.com/lmccart).
+- [website](https://github.com/processing/p5.js-website) Tento repozitár obsahuje väčšinu kódu [stránky p5.js](https://p5js.org) s výnimkou referenčnej príručky. Spravuje ho [Lauren McCarthy](https://github.com/lmccart).
- [sound](https://github.com/processing/p5.js-sound) Tento repozitár obsahuje knižnicu p5.sound.js. Spravuje ho [Jason Sigal](https://github.com/therewasaguy).
- [web editor](https://github.com/processing/p5.js-web-editor): Tento repozitár obsahuje zdrojový kód pre [p5.js web editor](https://editor.p5js.org). Spravuje ho [Cassie Tarakajian](https://github.com/catarak). Všimni si však, že [p5.js editor](https://github.com/processing/p5.js-editor) je už zastaraný.
diff --git a/contributor_docs/steward_guidelines.md b/contributor_docs/steward_guidelines.md
index 466fb9888b..98cbdbebdc 100644
--- a/contributor_docs/steward_guidelines.md
+++ b/contributor_docs/steward_guidelines.md
@@ -74,12 +74,12 @@ Feature request issues should use the "New Feature Request" issue template. The
- Does the feature fit into the project scope and [design principles](./contributor_guidelines.md#software-design-principles) of p5.js?
- For example, a request to add a new drawing primitive shape may be considered, but a request to adopt a browser-based IOT protocol will likely be out of scope.
- Overall, the scope of p5.js should be relatively narrow in order to avoid excessive bloat from rarely used features.
- - If a feature does not fit into the scope of p5.js, suggest that the issue author implement the feature as as an addon library.
+ - If a feature does not fit into the scope of p5.js, suggest that the issue author implement the feature as an addon library.
- If it is unclear whether or not it fits, it can be a good idea to suggest making an addon library as a proof-of-concept. This helps give users a way to use the feature, provides a much more concrete example of its usage and importance, and does not necessarily need to be as complete of a solution as a fully integrated feature. It can be integrated into the core of p5.js later if appropriate.
- Is the feature likely to cause a breaking change?
- Will it conflict with existing p5.js functions and variables?
- Will it conflict with typical sketches already written for p5.js?
- - Features that are likely to cause conflicts such as the ones above are considered breaking changes. Without a [major version release](https://docs.npmjs.com/about-semantic-versioning), we should not make breaking changes to p5.js.
+ - Features that are likely to cause conflicts such as the ones above are considered breaking changes. Without a [major version release](https://docs.npmjs.com/about-semantic-versioning), we should not make breaking changes to p5.js.
- Can the proposed new feature be achieved using existing functionalities already in p5.js, relatively simple native JavaScript code, or existing easy-to-use libraries?
- For example, instead of providing a p5.js function to join an array of strings such as `join(["Hello", "world!"])`, the native JavaScript `["Hello", "world!"].join()` should be preferred instead.
3. If the access requirement and other considerations have been fulfilled, at least two stewards or maintainers must approve the new feature request before work should begin toward a PR. The PR review process for new features is documented below.
@@ -119,7 +119,7 @@ Almost all code contributions to the p5.js repositories happen through pull requ
### Simple fix
-Simple fixes, such as a small typo fix, can be merged directly by anyone with merge access. Check on the PR "Files Changed" tab to ensure that the automated CI test passes.
+Simple fixes, such as a small typo fix, can be merged directly by anyone with merge access. Check on the PR "Files Changed" tab to ensure that the automated CI test passes.

@@ -223,7 +223,7 @@ grunt.registerTask('build', [
]);
```
-Tasks that start with `browserify` are defined in [../tasks/build/browserify.js](../tasks/build/browserify.js). They all similar steps with minor differences. These are the main steps to build the full p5.js library from its many source code files into one:
+Tasks that start with `browserify` are defined in [../tasks/build/browserify.js](../tasks/build/browserify.js). They all have similar steps with minor differences. These are the main steps to build the full p5.js library from its many source code files into one:
- `browserify` builds p5.js while `browserify:min` builds an intermediate file to be minified in the next step. The difference between `browserify` and `browserify:min` is that `browserify:min` does not contain data needed for FES to function.
- `uglify` takes the output file of `browserify:min` and minify it into the final p5.min.js (configuration of this step is in the main Gruntfile.js).
diff --git a/contributor_docs/zh-Hans/README.md b/contributor_docs/zh-Hans/README.md
index 1e5661d141..0df766e81b 100644
--- a/contributor_docs/zh-Hans/README.md
+++ b/contributor_docs/zh-Hans/README.md
@@ -11,7 +11,7 @@
p5.js 项目除了这个代码库外还包括了以下几个其他的代码库:
- [p5.js](https://github.com/processing/p5.js):包括了 p5.js 源代码。[面向用户的 p5.js 参考文献](https://p5js.org/reference/)也是由包含在此源代码中的 [JSDoc](http://usejsdoc.org/) 注解生成的。[Lauren Lee McCarthy](https://github.com/lmccart) 为维持者。
-- [p5.js-website](https://github.com/processing/p5.js-website):此源代码包含了 [p5.js website](http://p5js.org )的大多数代码(除参考文献外)。[Lauren Lee McCarthy](https://github.com/lmccart) 为维持者。
+- [p5.js-website](https://github.com/processing/p5.js-website):此源代码包含了 [p5.js website](https://p5js.org )的大多数代码(除参考文献外)。[Lauren Lee McCarthy](https://github.com/lmccart) 为维持者。
- [p5.js-sound](https://github.com/processing/p5.js-sound):包括了 p5.sound.js 程式库。[Jason Sigal](https://github.com/therewasaguy) 为维持者。
- [p5.js-web-editor](https://github.com/processing/p5.js-web-editor):包含了 [p5.js web editor](https://editor.p5js.org) 的源代码。[Cassie Tarakajian](https://github.com/catarak) 为维持者。请注意,旧版 [p5.js editor](https://github.com/processing/p5.js-editor) 已不再受支持。
- [p5.accessibility](https://github.com/processing/p5.accessibility):使 p5.js 更适合盲人和视障人士使用的程式库。
@@ -34,7 +34,7 @@ p5.js 项目除了这个代码库外还包括了以下几个其他的代码库
我们意识到参考文献是这个项目中最重要的部分。不好的参考文献是新用户与新贡献者的最大屏障,让项目不具有包容性。[contributing_documentation.md](./contributing_documentation.md) 页面为开始修改参考文献给出了一个深入的导览。p5.js 的参考文献可以在以下几个地方找到:
- [p5js.org/reference](https://p5js.org/reference/):由 [inline documentation](./inline_documentation.md) 的源代码生成。它包括了文本描述和参数以及随附的代码片段示例。我们将所有这些内联文献和代码放在一起,以使代码和参考文献保持紧密的联系,并强化这样的思想,贡献参考文献与贡献代码至少同等重要。构建库后,它将检查内联参考文献和示例,以确保它们与代码的行为方式匹配。 要做出贡献,您可以先查看 [inline_documentation.md](./inline_documentation.md) 页面。
-- [p5js.org/examples](http://p5js.org/examples) 页面包含更长的示例,这些示例对于学习 p5.js 可能有用。要做出贡献,您可以先查看 [adding_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md)。
+- [p5js.org/examples](https://p5js.org/examples) 页面包含更长的示例,这些示例对于学习 p5.js 可能有用。要做出贡献,您可以先查看 [adding_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md)。
- [p5js.org/tutorials](https://p5js.org/tutorials) 页面包含可帮助您学习 p5.js 和编程概念的教程。 要做出贡献,您可以先查看 [p5.js guide to contributing to tutorials](https://p5js.org/learn/tutorial-guide.html)。
- 您可能会注意到 p5.js 网站目前支持几种不同的语言。这称为国际化(i18n)。您可以在 [i18n_contribution](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contribution.md)页面了解更多。
diff --git a/contributor_docs/zh-Hans/contributing_to_the_p5js_reference.md b/contributor_docs/zh-Hans/contributing_to_the_p5js_reference.md
index 73933f0d75..612fd0ab7e 100644
--- a/contributor_docs/zh-Hans/contributing_to_the_p5js_reference.md
+++ b/contributor_docs/zh-Hans/contributing_to_the_p5js_reference.md
@@ -72,7 +72,7 @@
## 参考注释块
-让我们解析上面 `sin()` 函数的参考注释块,并查看每个部分的作用。你可以将此处的注释与参考页面上的[`sin()`](https://p5js.org/reference/#/p5/sin)进行比较。
+让我们解析上面 `sin()` 函数的参考注释块,并查看每个部分的作用。你可以将此处的注释与参考页面上的[`sin()`](https://p5js.org/reference/p5/sin)进行比较。
```
/**
@@ -142,7 +142,7 @@
## 其他签名
-如果一个函数有多个可能的参数选项,则可以分别指定每个参数。例如,[`background()`](http://p5js.org/reference/#p5/background) 函数有许多不同的参数选项(请参阅参考页面上的“语法”部分)。选择一个版本以使用上面的模板列出作为第一个签名。在第一个参考注释块的末尾,你可以添加额外的签名,每个签名都在自己的块中,仅使用以下示例中的 `@method` 和 `@param` 标签。
+如果一个函数有多个可能的参数选项,则可以分别指定每个参数。例如,[`background()`](https://p5js.org/reference/#p5/background) 函数有许多不同的参数选项(请参阅参考页面上的“语法”部分)。选择一个版本以使用上面的模板列出作为第一个签名。在第一个参考注释块的末尾,你可以添加额外的签名,每个签名都在自己的块中,仅使用以下示例中的 `@method` 和 `@param` 标签。
```
/**
@@ -269,7 +269,7 @@
*
```
-如果你的示例使用外部素材文件,请将它们放入 [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) 文件夹中(或者重用其中已有的文件),然后在代码中使用 "assets/filename.ext" 链接到它们。请参阅 [tint()](http://p5js.org/reference/#/p5/tint) 参考示例。
+如果你的示例使用外部素材文件,请将它们放入 [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) 文件夹中(或者重用其中已有的文件),然后在代码中使用 "assets/filename.ext" 链接到它们。请参阅 [tint()](https://p5js.org/reference/p5/tint) 参考示例。
### 使用 `describe()` 添加画布描述
diff --git a/contributor_docs/zh-Hans/creating_libraries.md b/contributor_docs/zh-Hans/creating_libraries.md
index 173eb7a176..8e3479aedb 100644
--- a/contributor_docs/zh-Hans/creating_libraries.md
+++ b/contributor_docs/zh-Hans/creating_libraries.md
@@ -118,8 +118,8 @@ https://github.com/processing/processing/wiki/Library-Basics#library-methods
* **贡献的库由创建者托管、文档化和维护。** 这可以在GitHub、一个单独的网站或其他地方进行。
-* **文档至关重要!** 您的库的文档应该放在某个易于找到的位置,供下载和使用您的库的用户使用。贡献的库的文档将不会包含在主要的p5.js参考文档中,但您可能希望遵循类似的格式。请参阅这些示例:[库概述页面](http://p5js.org/reference/#/libraries/p5.sound)、[类概述页面](http://p5js.org/reference/#/p5.Vector)和[方法页面](http://p5js.org/reference/#/p5/arc)。
+* **文档至关重要!** 您的库的文档应该放在某个易于找到的位置,供下载和使用您的库的用户使用。贡献的库的文档将不会包含在主要的p5.js参考文档中,但您可能希望遵循类似的格式。请参阅这些示例:[库概述页面](https://p5js.org/reference/libraries/p5.sound)、[类概述页面](https://p5js.org/reference/p5.Vector)和[方法页面](https://p5js.org/reference/p5/arc)。
* **示例也很棒!** 它们向人们展示了您的库能做什么。由于这全部是JavaScript,人们可以在下载之前在线运行它们。[jsfiddle](http://jsfiddle.net/)和[codepen](http://codepen.io)是两个很好的简单选项,可以用来托管示例。
-* **告诉我们吧!** 一旦您的库准备好发布,发送一封电子邮件至[hello@p5js.org](mailto:hello@p5js.org),附上链接和一些信息。我们将在[libraries page](http://p5js.org/libraries/)上包含它!
+* **告诉我们吧!** 一旦您的库准备好发布,发送一封电子邮件至[hello@p5js.org](mailto:hello@p5js.org),附上链接和一些信息。我们将在[libraries page](https://p5js.org/libraries/)上包含它!
diff --git a/contributor_docs/zh-Hans/documentation_style_guide.md b/contributor_docs/zh-Hans/documentation_style_guide.md
new file mode 100644
index 0000000000..ae741eb8c0
--- /dev/null
+++ b/contributor_docs/zh-Hans/documentation_style_guide.md
@@ -0,0 +1,1246 @@
+
+
+# 文档风格指南
+
+你好!欢迎来到 p5.js 文档编写指南。本文档是以下资源的混合:
+
+- Ruby on Rails [API 文档指南](https://guides.rubyonrails.org/api_documentation_guidelines.html) (CC BY-SA 4.0)
+- WordPress 关于[可访问性](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/)和[包容性](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/)的文档指南 (CC0)
+- Airbnb [JavaScript 风格指南](https://airbnb.io/javascript/) (MIT)
+
+我们的社区庞大而多样。许多人使用 p5.js 学习编程,其中很大一部分是 K-12 年级的学生。阅读本指南后,你将了解:
+- 如何编写有效、包容和易于访问的文档。
+- 如何为文档编写简单的代码示例。
+
+## 目录
+
+### 写作
+- [YUIDoc](#yuidoc)
+- [英语](#英语)
+- [牛津逗号](#牛津逗号)
+- [措辞](#措辞)
+- [无偏见的文档](#无偏见的文档)
+- [可访问性和残障](#可访问性和残障)
+
+### 代码
+- [代码示例](#代码示例)
+- [注释](#注释)
+- [空白](#空白)
+- [分号](#分号)
+- [命名约定](#命名约定)
+- [变量](#变量)
+- [字符串](#字符串)
+- [布尔运算符](#布尔运算符)
+- [条件语句](#条件语句)
+- [迭代](#迭代)
+- [对象](#对象)
+- [数组](#数组)
+- [函数](#函数)
+- [箭头函数](#箭头函数)
+- [链式调用](#链式调用)
+- [类](#类)
+- [资源](#资源)
+
+## YUIDoc
+
+我们使用 YUIDoc 来生成 p5.js API 文档。要生成文档,请切换到 p5.js 根目录,运行 `npm install`,然后执行:
+
+```
+$ npm run grunt yui:dev
+```
+
+输出将出现在 docs/reference 目录中。更多信息请参考[内联文档指南](./contributing_to_the_p5js_reference.md)。
+
+**[⬆ 返回顶部](#目录)**
+
+## 英语
+
+请使用美式英语(color、center、modularize 等)。参见[美式和英式英语拼写差异列表](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences)。
+
+**[⬆ 返回顶部](#目录)**
+
+## 牛津逗号
+
+请使用[牛津逗号](https://en.wikipedia.org/wiki/Serial_comma)("red, white, and blue",而不是"red, white and blue")。
+
+**[⬆ 返回顶部](#目录)**
+
+## 措辞
+
+写简单、陈述性的句子。简洁是加分项:直奔主题。
+
+使用现在时态:"Returns an object that...",而不是"Returned an object that..."或"Will return an object that..."。
+
+注释以大写字母开头。遵循常规标点规则:
+
+```javascript
+// Draws a fractal from a Julia set.
+function drawFractal(c, radius, maxIter) {
+ // ...
+}
+```
+
+明确和隐式地传达当前的做事方式。使用本指南中推荐的惯用语。如果需要,重新排序部分以强调首选方法。文档应该是最佳实践的典范,并且对初学者友好。
+
+文档必须简洁但全面。探索并记录边缘情况。每种参数组合会发生什么?初学者的代码中最可能出现哪些错误?
+
+正确拼写名称:p5.js、CSS、HTML、JavaScript、WebGL。如有疑问,请参考官方文档等权威来源。
+
+**[⬆ 返回顶部](#目录)**
+
+## 无偏见的文档
+
+编写文档时不要对任何类型的人有偏见。在记录特别要求高/敏感的主题时,花时间自己学习一下。确保你的写作不会无意中伤害或冒犯他人。
+
+在编写无偏见的文档时:
+
+- 包容所有性别认同和表达、性取向、种族、民族、语言、神经类型、体型、残障、阶级、宗教、文化、亚文化、政治观点、年龄、技能水平、职业和背景。使示例像我们的社区一样多样化。
+- 避免政治化内容。如果政治内容是必要的,保持中立。
+- 遵循可访问性指南。
+- 避免会侮辱或伤害人们的内容。
+- 不要对人们、国家和文化做任何概括。这包括正面或中立的概括。
+- 不要编写针对少数群体的偏见和歧视性内容。
+- 避免与历史事件相关的术语。
+
+优先使用避免"you"和"your"的措辞。例如,不要:
+
+```
+If you need to declare a variable, it is recommended that you use `let`.
+```
+
+而是使用这种风格:
+
+```
+Always use `let` to declare variables.
+```
+
+**代词**
+
+| 推荐 | 不推荐 |
+| -- | -- |
+| they | he or she |
+| them | him or her |
+| their | his or her |
+| theirs | his or hers |
+| themselves | himself or herself |
+
+**[⬆ 返回顶部](#目录)**
+
+## 可访问性和残障
+
+- 注重读者而不是强调他们的不便。
+- 不要将残障人士称为残疾人。使用[批准的术语](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology)来指代特定残障的人。
+- 在整个 p5.js 文档中保持统一的结构。在风格和视觉上强调重要点。
+- 使用屏幕阅读器测试文档。要测试屏幕阅读器,请参见[屏幕阅读器列表](https://en.wikipedia.org/wiki/List_of_screen_readers)。
+- 考虑所有类型设备和操作系统的多平台可访问性。
+- 创建使用所有类型输入设备的示例,如基于语音和手势的设备、控制器、鼠标和键盘。
+- 不要使用能力歧视语言。在编写关于可访问性和残障的内容时要包容和无偏见。
+- 对 HTML 语义采取实用方法。不要纯粹为了语义而添加语义。如果有明显匹配内容的 HTML 结构,请使用该元素。例如,一组链接很可能应该使用列表元素。
+- 使用简单的表格和表格格式。避免使用 span 标签(如 rowspan 和 colspan)。表格对屏幕阅读器来说很困难。
+
+**可访问性术语**
+
+以下术语改编自 WordPress 文档指南中的[编写包容性文档](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology)。有关以人为本语言的更多背景,请参见 CDC 的[与残障人士沟通指南](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html)。
+
+| 推荐 | 不推荐 |
+| -- | -- |
+| 残障人士 | 残疾人、残障、能力不同、有挑战、不正常 |
+| 非残障人士 | 正常人、健康人、健全人 |
+| 有[残障] | 受害者、遭受、受...影响、被...折磨 |
+| 无法说话,使用合成语音 | 哑巴、失语 |
+| 聋人,听力低下 | 听力障碍 |
+| 盲人,视力低下 | 视力障碍,视觉挑战 |
+| 认知或发育障碍 | 智力挑战,学习缓慢 |
+| 行动不便的人,身体残障的人 | 瘸子,残障 |
+
+## 代码示例
+
+选择有意义的代码示例,涵盖基础知识以及容易出错的地方。只有在解释功能工作原理时才使用高级语法。当一个圆就能传达想法时,不要画五个圆来解释。代码示例本身应遵循以下指南。
+
+**[⬆ 返回顶部](#目录)**
+
+## 注释
+
+- 使用 `//` 进行单行注释。将单行注释放在注释主题上方的新行上。除非是块的第一行,否则在注释前放置一个空行。
+
+```javascript
+// 不好。
+let magicWord = 'Please'; // 记住这个。
+
+// 好。
+// 记住这个。
+let magicWord = 'Please';
+
+// 不好。
+if (keyIsPressed === true) {
+ thing1();
+ // 这是一个重要的注释。
+ thing2();
+}
+
+// 好。
+if (keyIsPressed === true) {
+ thing1();
+
+ // 这是一个重要的注释。
+ thing2();
+}
+```
+
+- 所有注释都以空格开头,使其更易于阅读。
+
+```javascript
+// 不好。
+//记住这个。
+let magicWord = 'Please';
+
+// 好。
+// 记住这个。
+let magicWord = 'Please';
+```
+
+- 使用 `//` 进行多行注释。
+
+```javascript
+
+// 不好。
+/**
+ * 我将使用 // 进行多行注释。
+ * 我将使用 // 进行多行注释。
+ * 我将使用 // 进行多行注释。
+ * 我将使用 // 进行多行注释。
+ * 我将使用 // 进行多行注释。
+ */
+
+// 不好。
+/*
+ 我将使用 // 进行多行注释。
+ 我将使用 // 进行多行注释。
+ 我将使用 // 进行多行注释。
+ 我将使用 // 进行多行注释。
+ 我将使用 // 进行多行注释。
+ */
+
+// 好。
+// 我将使用 // 进行多行注释。
+// 我将使用 // 进行多行注释。
+// 我将使用 // 进行多行注释。
+// 我将使用 // 进行多行注释。
+// 我将使用 // 进行多行注释。
+
+```
+
+**[⬆ 返回顶部](#目录)**
+
+## 空白
+
+- 缩进块 2 个空格。
+
+```javascript
+// 不好。
+function setup() {
+∙∙∙∙createCanvas(400, 400);
+}
+
+// 不好。
+function setup() {
+∙createCanvas(400, 400);
+}
+
+// 好。
+function setup() {
+∙∙createCanvas(400, 400);
+}
+```
+
+- 在左大括号前放置 1 个空格。
+
+```javascript
+// 不好。
+function setup(){
+ createCanvas(400, 400);
+}
+
+// 好。
+function setup() {
+ createCanvas(400, 400);
+}
+```
+
+- 在控制语句(如 `if` 和 `for`)中的左括号前放置 1 个空格。在参数列表和函数名之间不要放置空格。
+
+```javascript
+// 不好。
+if(keyIsPressed === true) {
+ doStuff ();
+}
+
+// 好。
+if (keyIsPressed === true) {
+ doStuff();
+}
+
+// 不好。
+function setup () {
+ createCanvas (400, 400);
+}
+
+// 好。
+function setup() {
+ createCanvas(400, 400);
+}
+```
+
+- 在运算符之间放置空格。
+
+```javascript
+// 不好。
+let y=x+5;
+
+// 好。
+let y = x + 5;
+```
+
+## 分号
+
+- 使用分号。
+
+> 为什么?JavaScript 的[自动分号插入](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion)可能导致细微的错误。
+
+```javascript
+// 不好。
+let x = 0
+
+// 好。
+let x = 0;
+```
+
+## 命名约定
+
+- 避免使用单字母名称。要有描述性。
+
+```javascript
+// 不好。
+function f(x, y) {
+ // ...
+}
+
+// 好。
+function vectorField(x, y) {
+ // ...
+}
+```
+
+- 使用驼峰命名法命名对象、函数和实例。
+
+```javascript
+// 不好。
+let OBJEcttsssss = {};
+
+// 不好。
+let this_is_my_object = {};
+
+// 好。
+let thisIsMyObject = {};
+```
+
+- 使用帕斯卡命名法命名类。
+
+```javascript
+// 不好。
+class player {
+ constructor(name) {
+ this.name = name;
+ }
+}
+
+// 好。
+class Player {
+ constructor(name) {
+ this.name = name;
+ }
+}
+```
+
+- 不要使用尾随或前导下划线。
+
+> 为什么?JavaScript 没有私有属性或方法。
+
+```javascript
+// 不好。
+class Spy {
+ constructor(secret) {
+ this._secret = secret;
+ }
+}
+
+// 好。
+class Spy {
+ constructor(secret) {
+ this.secret = secret;
+ }
+}
+```
+
+**[⬆ 返回顶部](#目录)**
+
+## 变量
+
+- 避免使用 `var` 声明变量。
+
+> 为什么?使用 `var` 声明的变量具有令人困惑的作用域规则。这些会导致细微的错误。
+
+```javascript
+// 不好,因为它看起来合理。
+circle(x, y, 50);
+var x = 200;
+var y = 200;
+
+// 好,因为它会抛出 ReferenceError。
+circle(x, y, 50);
+let x = 200;
+let y = 200;
+```
+
+- 始终使用 `let` 声明变量。避免使用 `const`。
+
+> 为什么?使用 `let` 声明的变量比使用 `var` 声明的变量更容易理解。变量在草图中经常被重新赋值,所以默认使用 `let` 很有帮助。
+
+```javascript
+// 不好。
+flower = '🌸';
+var flower = '🌸';
+const flower = '🌸';
+
+// 好。
+let flower = '🌸';
+```
+
+- 每个变量或赋值使用一个 `let` 声明。
+
+> 为什么?这样更容易阅读和添加新的变量声明。
+
+```javascript
+// 不好。
+let positions = getPositions(),
+ startSearch = true,
+ dragonball = 'z';
+
+// 好。
+let positions = getPositions();
+let startSearch = true;
+let dragonball = 'z';
+```
+
+- 在需要的地方分配变量,并将它们放在合理的位置。
+
+> 为什么?`let` 是块作用域而不是函数作用域。
+
+```javascript
+// 不好 - 不必要的搜索。
+function getCharacter(name = 'default') {
+ let character = characters.find((c) => c.name === name);
+
+ if (name === 'default') {
+ return false;
+ }
+
+ if (character) {
+ return character;
+ }
+
+ return false;
+}
+
+// 好。
+function getCharacter(name = 'default') {
+ if (name === 'default') {
+ return false;
+ }
+
+ let character = characters.find((c) => c.name === name);
+
+ if (character) {
+ return character;
+ }
+
+ return false;
+}
+```
+
+- 避免使用一元递增和递减(`++`,`--`)。
+
+> 为什么?一元递增和递减语句受[自动分号插入](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion)的影响。这可能导致递增或递减值的静默错误。使用像 `num += 1` 这样的语句更新变量也比 `num++` 更具表现力。
+
+```javascript
+// 不好。
+let num = 1;
+num++;
+--num;
+
+// 好。
+let num = 1;
+num += 1;
+num -= 1;
+```
+
+**[⬆ 返回顶部](#目录)**
+
+## 字符串
+
+- 使用单引号 `''` 表示字符串。
+
+```javascript
+// 不好。
+let name = "Hilma af Klint";
+
+// 不好 - 模板字面量应包含插值或换行。
+let name = `Hilma af Klint`;
+
+// 好。
+let name = 'Hilma af Klint';
+```
+
+- 不要连接导致行超过 80 个字符的字符串。
+
+> 为什么?断开的字符串难以阅读,使代码不易搜索。
+
+```javascript
+// 不好。
+let essay = 'You see us as you want to see us: \
+in the simplest terms, in the most convenient definitions.';
+
+// 不好。
+let essay = 'You see us as you want to see us: ' +
+ 'in the simplest terms, in the most convenient definitions.';
+
+// 好。
+let essay = 'You see us as you want to see us: in the simplest terms, in the most convenient definitions.';
+```
+
+- 需要时使用模板字符串而不是连接。
+
+> 为什么?模板字符串具有简洁的语法。它们还提供适当的换行和字符串插值功能。
+
+```javascript
+let name = 'Dave';
+
+// 不好。
+text(name + ', this conversation can serve no purpose anymore. Goodbye.' + name, 0, 0);
+
+// 好。
+text(`${name}, this conversation can serve no purpose anymore. Goodbye.`, 0, 0);
+```
+
+- 不要在字符串中不必要地转义字符。
+
+> 为什么?反斜杠会损害可读性。
+
+```javascript
+// 不好。
+let bad = '\'this\' \i\s \"quoted\"';
+
+// 好。
+let good = 'Air quotes make you look "cool".';
+```
+
+**[⬆ 返回顶部](#目录)**
+
+## 布尔运算符
+
+- 使用 `===` 和 `!==` 而不是 `==` 和 `!=`。
+
+- 不要使用布尔值的快捷方式。
+
+> 为什么?对初学者来说更容易理解。
+
+```javascript
+// 不好。
+if (mouseIsPressed) {
+ // ...
+}
+
+// 好。
+if (mouseIsPressed === true) {
+ // ...
+}
+
+// 不好。
+if (name) {
+ // ...
+}
+
+// 好。
+if (name !== '') {
+ // ...
+}
+
+// 不好。
+if (collection.length) {
+ // ...
+}
+
+// 好。
+if (collection.length > 0) {
+ // ...
+}
+```
+
+- 除非必要,否则不要使用 `switch` 语句。
+
+- 混合运算符时使用括号。唯一的例外是算术运算符 `+`、`-` 和 `**`。
+
+> 为什么?这样更容易阅读并避免细微的错误。
+
+```javascript
+// 不好。
+let huh = a && b < 0 || c > 0 || d + 1 === 0;
+
+// 好。
+let huh = (a && b < 0) || c > 0 || (d + 1 === 0);
+
+// 不好。
+if (a || b && c) {
+ return d;
+}
+
+// 好。
+if (a || (b && c)) {
+ return d;
+}
+
+// 不好。
+let what = a + b / c * d;
+
+// 好。
+let what = a + (b / c) * d;
+```
+
+## 条件语句
+
+- 对所有多行块使用大括号。
+
+```javascript
+// 不好。
+if (mouseIsPressed === true)
+ circle(mouseX, mouseY, 50);
+
+// 更好。
+if (mouseIsPressed === true) circle(mouseX, mouseY, 50);
+
+// 最好。
+if (mouseIsPressed === true) {
+ circle(mouseX, mouseY, 50);
+}
+```
+
+- 将 `else` 放在前一个 `if` 块的右大括号的同一行。
+
+```javascript
+// 不好。
+if (mouseIsPressed === true) {
+ thing1();
+ thing2();
+}
+else {
+ thing3();
+}
+
+// 好。
+if (mouseIsPressed === true) {
+ thing1();
+ thing2();
+} else {
+ thing3();
+}
+```
+
+- 在总是执行 `return` 语句的 `if` 块后不要使用 `else` 块。
+
+```javascript
+// 不好。
+function mouseIsOnLeft() {
+ if (mouseX < width * 0.5) {
+ return true;
+ } else {
+ return false;
+ }
+}
+
+// 好。
+function mouseIsOnLeft() {
+ if (mouseX < width * 0.5) {
+ return true;
+ }
+
+ return false;
+}
+```
+
+- 如果条件太长,将每个(分组的)条件放在新行上。逻辑运算符应该开始行。
+
+> 为什么?这样更容易阅读。
+
+```javascript
+// 不好。
+if ((number === 123 || letters === 'abc') && mouseIsPressed === true && keyIsPressed === true) {
+ doStuff();
+}
+
+// 好。
+if (
+ (number === 123 || letters === 'abc')
+ && mouseIsPressed === true
+ && keyIsPressed === true
+) {
+ doStuff();
+}
+```
+
+- 不要使用选择运算符代替条件语句。
+
+```javascript
+// 不好。
+refrigeratorIsRunning && goCatchIt();
+
+// 好。
+if (refrigeratorIsRunning === true) {
+ goCatchIt();
+}
+```
+
+**[⬆ 返回顶部](#目录)**
+
+## 迭代
+
+- 除非必要,否则不要使用 `while` 或 `do-while` 循环。使用 `for` 循环来迭代固定次数。
+
+```javascript
+let numPetals = 7;
+
+// 不好。
+let i = 0;
+while (i < numPetals) {
+ ellipse(0, 0, 20, 80);
+ rotate(PI / numPetals);
+ i += 1;
+}
+
+// 好。
+for (let i = 0; i < numPetals; i += 1) {
+ ellipse(0, 0, 20, 80);
+ rotate(PI / numPetals);
+}
+```
+
+- 不要使用 `for` 循环来迭代数组。
+
+> 为什么?纯函数比副作用更容易推理。
+
+> 使用 `forEach()` / `map()` / `every()` / `filter()` / `find()` / `findIndex()` / `reduce()` / `some()` / `...` 来迭代数组。使用 `Object.keys()` / `Object.values()` / `Object.entries()` 来生成用于迭代对象的数组。
+
+```javascript
+let diameters = [50, 40, 30, 20, 10];
+
+// 不好。
+for (let i = 0; i < diameters.length; i += 1) {
+ circle(0, 0, diameters[i]);
+}
+
+// 不好。
+for (let d of diameters) {
+ circle(0, 0, d);
+}
+
+// 好。
+diameters.forEach((d) => circle(0, 0, d));
+```
+
+**[⬆ 返回顶部](#目录)**
+
+## 对象
+
+- 使用字面量语法创建对象。
+
+```javascript
+// 不好。
+let ball = new Object();
+
+// 好。
+let ball = {};
+```
+
+- 只对无效标识符的属性使用引号。
+
+> 为什么?这样更容易阅读并提高语法高亮。JavaScript 引擎也更容易优化性能。
+
+```javascript
+// 不好。
+let secretObject = {
+ 'x': 100,
+ 'y': 200,
+ 'top-secret': 'classified',
+};
+
+// 好。
+let secretObject = {
+ x: 3,
+ y: 4,
+ 'top-secret': 'classified',
+};
+```
+
+- 使用点表示法访问属性。
+
+```javascript
+let turtle = {
+ name: 'Leonardo',
+ color: 'dodgerblue',
+ weapon: '🗡️',
+ food: '🍕',
+};
+
+// 不好。
+let turtleName = turtle['name'];
+
+// 好。
+let turtleName = turtle.name;
+```
+
+- 使用方括号表示法 `[]` 访问带有变量的属性。
+
+```javascript
+let turtle = {
+ name: 'Leonardo',
+ color: 'dodgerblue',
+ weapon: '🗡️',
+ food: '🍕',
+};
+
+function getProp(prop) {
+ return turtle[prop];
+}
+
+let turtleName = getProp('name');
+```
+
+- 不要使用前导逗号。
+
+```javascript
+// 不好。
+let mathematician = {
+ firstName: 'Ada'
+ , lastName: 'Lovelace'
+};
+
+// 好。
+let mathematician = {
+ firstName: 'Ada',
+ lastName: 'Lovelace',
+};
+```
+
+- 添加尾随逗号。
+
+```javascript
+// 不好。
+let artist = {
+ firstName: 'Lauren',
+ lastName: 'McCarthy'
+};
+
+// 好。
+let artist = {
+ firstName: 'Lauren',
+ lastName: 'McCarthy',
+};
+```
+
+**[⬆ 返回顶部](#目录)**
+
+## 数组
+
+- 使用字面量语法创建数组。
+
+```javascript
+// 不好。
+let images = new Array();
+
+// 好。
+let images = [];
+```
+
+- 使用 [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push) 而不是直接赋值来向数组添加项目。
+
+```javascript
+let lyrics = [];
+
+// 不好。
+lyrics[lyrics.length] = 'Little rough around the edges, but I keep it smooth';
+
+// 好。
+lyrics.push('Little rough around the edges, but I keep it smooth');
+```
+
+- 使用 `slice()` 方法复制数组。
+
+```javascript
+// 不好。
+let numbersCopy = [];
+
+for (let i = 0; i < numbers.length; i += 1) {
+ numbersCopy[i] = numbers[i];
+}
+
+// 好。
+let numbersCopy = numbers.slice();
+```
+
+- 当提高可读性时,在多行上编写数组。在左括号后和右括号前使用换行。添加尾随逗号。
+
+```javascript
+// 不好。
+let matrix = [[1, 0, 0],
+ [0, 1, 0],
+ [0, 0, 1]];
+
+// 好。
+let matrix = [
+ [1, 0, 0],
+ [0, 1, 0],
+ [0, 0, 1],
+];
+
+// 也好。
+let matrix = [[1, 0, 0], [0, 1, 0], [0, 0, 1]];
+```
+
+**[⬆ 返回顶部](#目录)**
+
+## 函数
+
+- 使用函数声明而不是命名函数表达式。
+
+> 为什么?函数声明有一些陷阱,但对初学者来说更容易理解。
+
+```javascript
+// 不好。
+let foo = function () {
+ // ...
+};
+
+// 不好。
+let foo = () => {
+ // ...
+};
+
+// 好。
+function foo() {
+ // ...
+}
+```
+
+- 使用默认参数语法。不要改变函数参数。
+
+```javascript
+// 不好。
+function createBall(diameter) {
+ diameter = diameter || 50;
+ // ...
+}
+
+// 好。
+function createBall(diameter = 50) {
+ // ...
+}
+```
+
+- 始终将默认参数放在最后。
+
+```javascript
+// 不好。
+function drawSpiral(angle = 90, length) {
+ // ...
+}
+
+// 好。
+function drawSpiral(length, angle = 90) {
+ // ...
+}
+```
+
+**[⬆ 返回顶部](#目录)**
+
+## 箭头函数
+
+- 对匿名函数使用箭头函数表示法。回调是这种语法的常见用例。
+
+> 为什么?语法更简洁。它还创建了一个在 `this` 上下文中执行的函数版本,这通常很有帮助。
+
+> 为什么不?如果匿名函数很复杂,将其重写为声明的函数。
+
+```javascript
+// 不好。
+function setup() {
+ loadImage('assets/moonwalk.jpg', function (img) {
+ image(img, 0, 0);
+ });
+}
+
+// 好。
+function setup() {
+ loadImage('assets/moonwalk.jpg', (img) => {
+ image(img, 0, 0);
+ });
+}
+
+// 不好。
+function preload() {
+ loadImage('assets/moonwalk.jpg', (img) => {
+ // 复杂的预处理...
+ });
+}
+
+// 好。
+function preload() {
+ loadImage('assets/moonwalk.jpg', processImage);
+}
+
+function processImage(img) {
+ // 复杂的预处理...
+}
+```
+
+- 尽可能使用隐式返回。如果函数体返回单个语句且没有副作用,则省略大括号。否则,保留大括号并使用 `return` 语句。
+
+> 为什么?这样更容易阅读。
+
+```javascript
+// 不好。
+[1, 2, 3].map((number) => {
+ let squared = number ** 2;
+ `${number} squared is ${squared}.`;
+});
+
+// 不好。
+[1, 2, 3].map((number) => {
+ let squared = number ** 2;
+ return `${number} squared is ${squared}.`;
+});
+
+// 好。
+[1, 2, 3].map((number) => `${number} squared is ${number ** 2}.`);
+```
+
+- 始终在参数周围包含括号。
+
+> 为什么?这样做可以减少更改参数时的错误。
+
+```javascript
+// 不好。
+[1, 2, 3].map(number => number * number);
+
+// 好。
+[1, 2, 3].map((number) => number * number);
+```
+
+**[⬆ 返回顶部](#目录)**
+
+## 链式调用
+
+- 使用单独的函数调用而不是函数链式调用。
+
+> 为什么?适应可能不熟悉函数链式调用概念的用户。
+
+```javascript
+// 不好。
+fill(0)
+ .strokeWeight(6)
+ .textSize(20);
+
+// 不好。
+fill(0).strokeWeight(6).textSize(20);
+
+// 好。
+fill(0);
+strokeWeight(6);
+textSize(20);
+```
+
+**[⬆ 返回顶部](#目录)**
+
+## 类
+
+- 始终使用 `class`。避免直接操作 `prototype`。唯一的例外是解释如何[创建库](./creating_libraries.md)。
+
+> 为什么?`class` 语法更简洁,更容易理解。
+
+```javascript
+// 不好。
+function Mover(x, y, radius) {
+ this.x = x;
+ this.y = y;
+ this.radius = radius;
+}
+
+Mover.prototype.update = function () {
+ this.x += 1;
+ this.y += 1;
+};
+
+Mover.prototype.render = function () {
+ circle(this.x, this.y, 2 * this.radius);
+};
+
+// 好。
+class Mover {
+ constructor(x, y, radius) {
+ this.x = x;
+ this.y = y;
+ this.radius = radius;
+ }
+
+ update() {
+ this.x += 1;
+ this.y += 1;
+ }
+
+ render() {
+ circle(this.x, this.y, 2 * this.radius);
+ }
+}
+```
+
+- 使用 `extends` 进行继承。
+
+```javascript
+class RandomMover extends Mover {
+ update() {
+ this.x += random(-1, 1);
+ this.y += random(-1, 1);
+ }
+}
+```
+
+- 确保自定义 `toString()` 方法不会引起副作用。
+
+```javascript
+// 不好。
+class Mover {
+ // ...
+
+ toString() {
+ this.x += 1;
+ return `Mover at (${this.x}, ${this.y})`;
+ }
+}
+
+// 好。
+class Mover {
+ // ...
+
+ toString() {
+ return `Mover at (${this.x}, ${this.y})`;
+ }
+}
+```
+
+- 不要编写空的构造函数或仅委托给父类的构造函数。
+
+> 为什么?如果未指定,类有默认构造函数。
+
+```javascript
+// 不好。
+class Dot {
+ constructor() {}
+
+ render() {
+ circle(mouseX, mouseY, 50);
+ }
+}
+
+// 好。
+class Dot {
+ render() {
+ circle(mouseX, mouseY, 50);
+ }
+}
+
+// 不好。
+class DragonBall extends Ball {
+ constructor(x, y, d) {
+ super(x, y, d);
+ }
+}
+
+// 好。
+class DragonBall extends Ball {
+ constructor(x, y, d, numStars) {
+ super(x, y, d);
+ this.numStars = numStars;
+ }
+}
+```
+
+- 避免重复的类成员。
+
+> 为什么?重复的类成员声明优先选择最后一个。有重复通常意味着有错误。
+
+```javascript
+// 不好。
+class Mover {
+ // ...
+
+ update() {
+ this.x += this.xspeed;
+ this.y += this.yspeed;
+ }
+
+ update() {
+ this.x = 0;
+ this.y = 0;
+ }
+}
+
+// 好。
+class Mover {
+ // ...
+
+ update() {
+ this.x += this.xspeed;
+ this.y += this.yspeed;
+ }
+
+ reset() {
+ this.x = 0;
+ this.y = 0;
+ }
+}
+```
+
+**[⬆ 返回顶部](#目录)**
+
+## 资源
+
+- 始终从名为"assets"的文件夹加载资源。
+
+> 为什么?它模拟了良好的项目组织。这也是在 p5.js 网站上加载资源所必需的。将资源放在以下文件夹中以将其包含在我们的在线文档中:
+- 示例:[src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples)
+- 参考页面:[src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets)
+- 学习页面:[src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn)
+
+```javascript
+let img;
+
+// 不好。
+function preload() {
+ img = loadImage('moonwalk.jpg');
+}
+
+// 好。
+function preload() {
+ img = loadImage('assets/moonwalk.jpg');
+}
+```
+
+**[⬆ 返回顶部](#目录)**
diff --git a/contributor_docs/zh-Hans/fes_contribution_guide.md b/contributor_docs/zh-Hans/fes_contribution_guide.md
new file mode 100644
index 0000000000..0f852096ac
--- /dev/null
+++ b/contributor_docs/zh-Hans/fes_contribution_guide.md
@@ -0,0 +1,526 @@
+
+
+# 友好错误系统贡献指南
+
+`core/friendly_errors`文件夹包含了p5js的友好错误系统(FES)代码,该系统负责生成友好错误消息或友好错误。您可能已经在控制台中看到以"`🌸 p5.js says:`"开头的友好错误消息,这些消息是对默认浏览器生成的错误消息的补充。
+
+FES包含多个负责生成不同类型错误的友好错误消息的函数。这些函数从各种位置收集错误,包括文件加载错误和自动播放错误的错误处理,库内的参数检查,以及p5.js贡献者实现的其他自定义错误处理。
+
+本文档首先概述了FES的主要函数及其位置。在随后的参考部分,您将找到有关这些单独函数的完整信息(描述、语法、参数、位置)。在文档的最后部分,您将找到我们以前的贡献者的笔记(开发笔记),概述了FES的已知限制和可能的未来方向。如果您正在考虑为FES做贡献,请查看[开发笔记](#-开发笔记)!
+
+
+## 概述
+
+生成友好错误消息的主要函数是:
+
+- `p5._friendlyError()`:将输入消息格式化并打印(通过`_report()`)为友好错误
+- `p5._validateParameters()`:验证接收到的输入值是否有错误类型或缺少值
+- `p5._friendlyFileLoadError()`:指导用户解决与文件加载函数相关的错误
+- `p5._friendlyAutoplayError()`:指导用户解决与浏览器自动播放策略相关的错误
+
+以下是一个图表,概述了FES中所有函数的位置以及它们如何相互连接:
+
+
+
+各个文件包含以下主要FES函数:
+
+- `fes_core.js`:包含`_report()`、`_friendlyError()`和`_friendlyAutoplayError()`,以及用于格式化和测试友好错误的其他辅助函数。
+- `validate_params.js`:包含`_validateParameters()`以及用于参数验证的其他辅助函数。
+- `file_errors.js`:包含`_friendlyFileLoadError()`和用于文件加载错误的其他辅助函数。
+- `browser_errors.js`:包含将使用FES全局错误类(`fes.globalErrors`)生成的浏览器错误列表。
+- `stacktrace.js`:包含解析错误堆栈的代码(借用自[stacktrace.js](https://github.com/stacktracejs/stacktrace.js))。
+
+
+## 📚 参考:FES函数
+
+### `_report()`
+
+#### 描述
+
+`_report()`是直接将错误辅助消息输出到控制台的主要函数。
+
+**注意:**如果设置了`p5._fesLogger`(即,我们正在运行测试),则将使用它代替`console.log`。这在我们通过Mocha运行测试时非常有用。在这种情况下,`_fesLogger`将让`_report`将错误消息作为字符串传递给Mocha,该字符串将与断言的字符串进行测试。
+
+
+#### 语法
+
+```js
+_report(message);
+
+_report(message, func);
+
+_report(message, func, color);
+```
+
+
+#### 参数
+
+```
+@param {String} message 要打印的消息
+@param {String} [func] 函数名称
+@param {Number|String} [color] CSS颜色代码
+```
+
+`[func]`输入用于在错误消息末尾附加参考链接。
+
+`[color]`输入用于设置错误消息的颜色属性。这在当前版本的友好错误消息中未使用。
+
+
+#### 位置
+
+core/friendly\_errors/fes\_core.js
+
+### `_friendlyError()`
+
+#### 描述
+
+`_friendlyError()`创建并打印友好错误消息。任何p5函数都可以调用此函数来提供友好错误消息。
+
+`_friendlyFileLoadError()`位于以下函数内:
+
+- `image/loading_displaying/loadImage()`
+- `io/files/loadFont()`
+- `io/files/loadTable()`
+- `io/files/loadJSON()`
+- `io/files/loadStrings()`
+- `io/files/loadXML()`
+- `io/files/loadBytes()`。
+
+对`_friendlyFileLoadError`的调用序列看起来像这样:
+
+```
+_friendlyFileLoadError
+ _report
+```
+
+
+#### 语法
+
+```js
+_friendlyFileLoadError(errorType, filePath);
+```
+
+
+#### 参数
+
+```
+@param {Number} errorType 文件加载错误类型的编号
+@param {String} filePath 导致错误的文件路径
+```
+
+`errorType`输入指的是`core/friendly_errors/file_errors.js`中枚举的特定类型的文件加载错误。p5.js中的文件加载错误被分为各种不同的情况。这种分类旨在便于提供与不同错误场景相对应的精确和信息丰富的错误消息。例如,当它无法读取字体文件中的数据时,它可以显示与尝试加载过大无法读取的文件时不同的错误。
+
+
+#### 示例
+
+文件加载错误示例:
+
+```js
+/// 缺少字体文件
+let myFont;
+function preload() {
+ myFont = loadFont('assets/OpenSans-Regular.ttf');
+}
+function setup() {
+ fill('#ED225D');
+ textFont(myFont);
+ textSize(36);
+ text('p5*js', 10, 50);
+}
+function draw() {}
+```
+
+除了浏览器的"不支持"错误外,FES还将在控制台中生成以下消息:
+
+```
+🌸 p5.js says: 看起来加载字体时出现了问题。请检查文件路径(assets/OpenSans-Regular.ttf)是否正确,尝试在线托管文件,或运行本地服务器。
+
++ 更多信息:https://github.com/processing/p5.js/wiki/Local-server
+```
+
+
+#### 位置
+
+/friendly\_errors/file\_errors.js
+
+
+### `_friendlyAutoplayError()`
+
+#### 描述
+
+如果存在与播放媒体(例如视频)相关的错误,`_friendlyAutoplayError()`会在内部调用,这很可能是由于浏览器的自动播放策略。
+
+它调用`translator()`使用键`fes.autoplay`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。
+
+
+#### 位置
+
+core/friendly\_errors/fes\_core.js
+
+
+### `_validateParameters()`
+
+#### 描述
+
+`_validateParameters()`通过将输入参数与`docs/reference/data.json`中的信息匹配来运行参数验证,该信息是从函数的内联文档创建的。它检查函数调用是否包含正确数量和正确类型的参数。
+
+它调用`translator()`使用键`fes.friendlyParamError.*`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。
+
+可以通过`p5._validateParameters(FUNCT_NAME, ARGUMENTS)`或`p5.prototype._validateParameters(FUNCT_NAME, ARGUMENTS)`在需要参数验证的函数内部调用此函数。建议将静态版本`p5._validateParameters`用于一般用途。`p5.prototype._validateParameters(FUNCT_NAME, ARGUMENTS)`主要用于调试和单元测试。
+
+`_validateParameters()`函数位于这些函数内:
+
+- `accessibility/outputs`
+- `color/creating_reading`
+- `color/setting`
+- `core/environment`
+- `core/rendering`
+- `core/shape/2d_primitives`
+- `core/shape/attributes`
+- `core/shape/curves`
+- `core/shape/vertex`
+- `core/transform`
+- `data/p5.TypedDict`
+- `dom/dom`
+- `events/acceleration`
+- `events/keyboard`
+- `image/image`
+- `image/loading_displaying`
+- `image/p5.Image`
+- `image/pixel`
+- `io/files`
+- `math/calculation`
+- `math/random`
+- `typography/attributes`
+- `typography/loading_displaying`
+- `utilities/string_functions`
+- `webgl/3d_primitives`
+- `webgl/interaction`
+- `webgl/light`
+- `webgl/loading`
+- `webgl/material`
+- `webgl/p5.Camera`
+
+从`_validateParameters`的调用序列看起来像这样:
+
+```
+validateParameters
+ buildArgTypeCache
+ addType
+ lookupParamDoc
+ scoreOverload
+ testParamTypes
+ testParamType
+ getOverloadErrors
+ _friendlyParamError
+ ValidationError
+ report
+ friendlyWelcome
+```
+
+
+#### 语法
+
+```js
+_validateParameters(func, args);
+```
+
+
+#### 参数
+
+```
+@param {String} func 被调用的函数的名称
+@param {Array} args 用户输入参数
+```
+
+
+#### 示例
+
+缺少参数的示例:
+
+```js
+arc(1, 1, 10.5, 10);
+```
+
+FES将在控制台中生成以下消息:
+
+```
+🌸 p5.js says: [sketch.js, line 13] arc()至少需要6个参数,但只收到了4个。 (https://p5js.org/reference/p5/arc)
+```
+
+类型不匹配的示例:
+
+```js
+arc(1, ',1', 10.5, 10, 0, Math.PI);
+```
+
+FES将在控制台中生成以下消息:
+
+```
+🌸 p5.js says: [sketch.js, line 14] arc()的第一个参数需要Number类型,但收到了string类型。 (https://p5js.org/reference/p5/arc)
+```
+
+
+#### 位置
+
+core/friendly\_errors/validate\_params.js
+
+
+### `fesErrorMonitor()`
+
+#### 描述
+
+`fesErrorMonitor()`监控浏览器错误消息,猜测错误的来源并为用户提供额外的指导。这包括堆栈跟踪,它是程序中直到抛出错误点为止调用的函数的顺序列表。堆栈跟踪对于确定错误是内部的还是由用户直接调用的某些内容引起的非常有用。
+
+它调用`translator()`使用键`fes.globalErrors.*`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。
+
+以下是通过`fesErrorMonitor()`生成的错误消息的综合列表:
+
+- 使用键的友好错误消息:`fes.globalErrors.syntax.*`、`fes.globalErrors.reference.*`、`fes.globalErrors.type.*`。
+- 通过`processStack()`使用键的"内部库"错误消息:`fes.wrongPreload`、`fes.libraryError`。
+- 通过`printFriendlyStack()`使用键的堆栈跟踪消息:`fes.globalErrors.stackTop`、`fes.globalErrors.stackSubseq`。
+- 通过`handleMisspelling()`使用键的拼写检查消息(来自引用错误):`fes.misspelling`。
+
+`_fesErrorMonitor()`由`window`上的`error`事件和未处理的承诺拒绝(`unhandledrejection`事件)自动触发。但是,可以在catch块中手动调用,如下所示:
+
+```js
+try { someCode(); } catch(err) { p5._fesErrorMonitor(err); }
+```
+
+该函数目前适用于`ReferenceError`、`SyntaxError`和`TypeError`的子集。您可以在`browser_errors.js`中找到支持的错误的完整列表。
+
+`_fesErrorMonitor`的调用序列大致如下:
+
+```
+ _fesErrorMonitor
+ processStack
+ printFriendlyError
+ (if type of error is ReferenceError)
+ _handleMisspelling
+ computeEditDistance
+ _report
+ _report
+ printFriendlyStack
+ (if type of error is SyntaxError、TypeError, etc)
+ _report
+ printFriendlyStack
+```
+
+
+#### 语法
+
+```js
+fesErrorMonitor(event);
+```
+
+
+#### 参数
+
+```
+@param {*} e 错误事件
+```
+
+
+#### 示例
+
+内部错误示例1:
+
+```js
+function preload() {
+ // 由于在preload中调用background()
+ // 导致错误
+ background(200);
+}
+```
+
+FES将在控制台中生成以下消息:
+
+```
+🌸 p5.js says: [sketch.js, line 8] 当调用"background"时,p5js库内部发生了一个错误,错误信息为"无法读取未定义的属性(正在读取'background')"。如果没有特别说明,这可能是由于从preload调用"background"导致的。preload函数中除了加载调用(loadImage、loadJSON、loadFont、loadStrings等)之外,不应该有任何其他内容。 (https://p5js.org/reference/p5/preload)
+```
+
+内部错误示例2:
+
+```js
+function setup() {
+ cnv = createCanvas(200, 200);
+ cnv.mouseClicked();
+}
+```
+
+FES将在控制台中生成以下消息:
+
+```js
+🌸 p5.js says: [sketch.js, line 12] 当调用mouseClicked时,p5js库内部发生了一个错误,错误信息为"无法读取未定义的属性(正在读取'bind')"。如果没有特别说明,这可能是传递给mouseClicked的参数问题。 (https://p5js.org/reference/p5/mouseClicked)
+```
+
+错误示例(作用域):
+
+```js
+function setup() {
+ let b = 1;
+}
+function draw() {
+ b += 1;
+}
+```
+
+FES将在控制台中生成以下消息:
+
+```
+🌸 p5.js says:
+
+[sketch.js, line 5] 当前作用域中未定义"b"。如果您已在代码中定义了它,应检查其作用域、拼写和大小写(JavaScript区分大小写)。
+
++ 更多信息:https://p5js.org/examples/data-variable-scope.html
+```
+
+错误示例(拼写):
+
+```js
+function setup() {
+ xolor(1, 2, 3);
+}
+```
+
+FES将在控制台中生成以下消息:
+
+```
+🌸 p5.js says: [sketch.js, line 2] 您可能不小心写了"xolor"而不是"color"。如果您希望使用p5.js中的函数,请将其更正为color。 (https://p5js.org/reference/p5/color)
+```
+
+
+#### 位置
+
+core/friendly\_errors/fes\_core.js
+
+
+### `checkForUserDefinedFunctions()`
+
+#### 描述
+
+检查是否有任何用户定义的函数(`setup()`、`draw()`、`mouseMoved()`等)带有大小写错误。
+
+它调用`translator()`使用键`fes.checkUserDefinedFns`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。
+
+
+#### 语法
+
+```js
+checkForUserDefinedFunctions(context);
+```
+
+
+#### 参数
+
+```
+@param {*} context 当前默认上下文。
+ 在"全局模式"下设置为window,
+ 在"实例模式"下设置为p5实例
+```
+
+
+#### 示例
+
+```js
+function preload() {
+ loadImage('myimage.png');
+}
+```
+
+FES将在控制台中生成以下消息:
+
+```
+🌸 p5.js says: 您可能不小心写了preLoad而不是preload。如果这不是有意的,请更正它。 (https://p5js.org/reference/p5/preload)
+```
+
+
+#### 位置
+
+/friendly\_errors/fes\_core.js
+
+
+### `helpForMisusedAtTopLevelCode()`
+
+#### 描述
+
+`helpForMisusedAtTopLevelCode()`在窗口加载时由`fes_core.js`调用,以检查在`setup()`或`draw()`之外使用p5.js函数的情况。
+
+它调用`translator()`使用键`fes.misusedTopLevel`生成并打印友好错误消息。您可以在`translations/en/translation.json`中查看所有可用的键。
+
+
+#### 参数
+
+```
+@param {*} err 错误事件
+@param {Boolean} log false
+```
+
+
+#### 位置
+
+/friendly\_errors/fes\_core.js
+
+
+## 💌 开发笔记
+
+### 已知限制
+
+#### 假阳性与假阴性情况
+
+在FES中,您可能会遇到两种类型的错误:假阳性和假阴性。把假阳性想象成虚假警报。当FES警告您有错误,但您的代码实际上是正确的时,就会出现这种情况。另一方面,假阴性就像遗漏了一个错误。当您的代码中有错误,但FES没有提醒您时,就会发生这种情况。
+
+识别和修复这些错误很重要,因为它们可以节省调试时间,减少混淆,并使修复实际问题变得更容易。
+
+在某些不理想的情况下,错误处理的设计可能需要选择消除假阳性或假阴性。如果必须选择,通常最好消除假阳性。这样,您可以避免生成可能分散注意力或误导用户的不正确警告。
+
+
+#### 与`fes.GlobalErrors`相关的限制
+
+FES只能检测到使用`const`或`var`声明的被覆盖的全局变量。使用let声明的变量不会被检测到。这个限制是由于`let`处理变量实例化的特定方式导致的,目前无法解决。
+
+`fesErrorMonitor()`下描述的功能目前仅在Web编辑器上或在本地服务器上运行时有效。有关更多详情,请参见 pull request \[[#4730](https://github.com/processing/p5.js/pull/4730)]。
+
+
+### FES的性能问题
+
+默认情况下,p5.js启用FES,而在`p5.min.js`中禁用,以防止FES函数减慢进程。错误检查系统可能会显著减慢您的代码(在某些情况下最多慢10倍)。请参见[友好错误性能测试](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system)。
+
+您可以在草图顶部使用一行代码禁用FES:
+
+```js
+p5.disableFriendlyErrors = true; // 禁用FES
+function setup() {
+ // 进行设置操作
+}
+function draw() {
+ // 进行绘制操作
+}
+```
+
+请注意,此操作将禁用已知会降低性能的FES某些功能,例如参数检查。但是,不影响性能的友好错误消息仍将启用。这包括在文件加载失败时提供详细的错误消息,或者在您尝试覆盖全局空间中的p5.js函数时显示警告。
+
+
+### 未来工作的想法
+
+- 解耦FES \[[#5629](https://github.com/processing/p5.js/issues/5629)]
+- 消除假阳性情况
+- 识别假阴性情况
+- 添加更多单元测试以获得全面的测试覆盖
+- 更直观、清晰且可翻译的消息。关于友好错误国际化的更多讨论,请查看[友好错误i18n手册](https://almchung.github.io/p5-fes-i18n-book/en/)。
+- 识别更多常见错误类型并使用FES进行泛化(例如 `bezierVertex()`、`quadraticVertex()` - 必需对象未初始化;检查 `nf()`、`nfc()`、`nfp()`、`nfs()` 的Number参数是否为正)
+
+
+## 结论
+
+在本README文档中,我们概述了`core/friendly_errors`文件夹的结构。本节解释了这个文件夹的组织和目的,使其更容易导航和理解。此外,对于此文件夹中的每个函数,我们都提供了参考指南。
+
+在本文档的后半部分,我们包含了以前贡献者的笔记,讨论了FES的当前限制和未来开发中可能的改进领域。
+
+此外,我们很高兴通过2021-2022年进行的FES调查分享来自我们社区的见解。调查结果有两种格式可供查阅:
+
+- [21-22 FES调查报告漫画](https://almchung.github.io/p5jsFESsurvey/)
+- [21-22 FES调查完整报告](https://observablehq.com/@almchung/p5-fes-21-survey)。
+
+
+
\ No newline at end of file
diff --git a/contributor_docs/zh-Hans/fes_reference_dev_notes.md b/contributor_docs/zh-Hans/fes_reference_dev_notes.md
index 5ec46036b9..8dd1e6af92 100644
--- a/contributor_docs/zh-Hans/fes_reference_dev_notes.md
+++ b/contributor_docs/zh-Hans/fes_reference_dev_notes.md
@@ -209,16 +209,16 @@ _validateParameters(func, args)
arc(1, 1, 10.5, 10);
```
FES将在控制台生成以下消息:
-> 🌸 p5.js 说:看起来arc()在位置#4(从零开始的索引)收到了一个空变量。如果不是故意的,这通常是作用域问题:[https://p5js.org/examples/data-variable-scope.html]。[http://p5js.org/reference/#p5/arc]
+> 🌸 p5.js 说:看起来arc()在位置#4(从零开始的索引)收到了一个空变量。如果不是故意的,这通常是作用域问题:[https://p5js.org/examples/data-variable-scope.html]。[https://p5js.org/reference/#p5/arc]
-> 🌸 p5.js 说:看起来arc()在位置#5(从零开始的索引)收到了一个空变量。如果不是故意的,这通常是作用域问题:[https://p5js.org/examples/data-variable-scope.html]。[http://p5js.org/reference/#p5/arc]
+> 🌸 p5.js 说:看起来arc()在位置#5(从零开始的索引)收到了一个空变量。如果不是故意的,这通常是作用域问题:[https://p5js.org/examples/data-variable-scope.html]。[https://p5js.org/reference/#p5/arc]
类型不匹配的示例
```javascript
arc('1', 1, 10.5, 10, 0, Math.PI, 'pie');
```
FES将在控制台生成以下消息:
-> 🌸 p5.js 说:arc()在参数#0(从零开始的索引)处期望接收Number,但收到了字符串。[http://p5js.org/reference/#/p5/arc]
+> 🌸 p5.js 说:arc()在参数#0(从零开始的索引)处期望接收Number,但收到了字符串。[https://p5js.org/reference/p5/arc]
##### 位置
core/friendly_errors/validate_params.js
@@ -272,7 +272,7 @@ function preload() {
}
```
FES将在控制台中生成以下消息:
-> 🌸 p5.js说:当调用background时(位于sketch.js的第4行[http://localhost:8000/lib/empty-example/sketch.js:4:3]),在p5js库内部发生了一个错误,错误消息为“无法读取未定义的属性'background'”。(如果没有另外说明,这可能是由于从preload中调用了background。preload函数中除了load函数(loadImage、loadJSON、loadFont、loadStrings等)之外不应该有其他内容。)(http://p5js.org/reference/#/p5/preload)
+> 🌸 p5.js说:当调用background时(位于sketch.js的第4行[http://localhost:8000/lib/empty-example/sketch.js:4:3]),在p5js库内部发生了一个错误,错误消息为“无法读取未定义的属性'background'”。(如果没有另外说明,这可能是由于从preload中调用了background。preload函数中除了load函数(loadImage、loadJSON、loadFont、loadStrings等)之外不应该有其他内容。)(https://p5js.org/reference/p5/preload)
内部错误示例 2
```javascript
@@ -282,7 +282,7 @@ function setup() {
}
```
FES将在控制台中生成以下消息:
-> 🌸 p5.js说:当调用mouseClicked时(位于sketch.js的第3行[http://localhost:8000/lib/empty-example/sketch.js:3:7]),在p5js库内部发生了一个错误,错误消息为“无法读取未定义的属性'bind'”。(如果没有另外说明,这可能是由于传递给mouseClicked的参数存在问题。)(http://p5js.org/reference/#/p5/mouseClicked)
+> 🌸 p5.js说:当调用mouseClicked时(位于sketch.js的第3行[http://localhost:8000/lib/empty-example/sketch.js:3:7]),在p5js库内部发生了一个错误,错误消息为“无法读取未定义的属性'bind'”。(如果没有另外说明,这可能是由于传递给mouseClicked的参数存在问题。)(https://p5js.org/reference/p5/mouseClicked)
用户示例中的作用域错误示例
```javascript
@@ -303,7 +303,7 @@ function setup() {
}
```
FES将在控制台中生成以下消息:
-> 🌸 p5.js说:您可能错误地将“colour”写成了“color”(位于sketch.js的第2行[http://localhost:8000/lib/empty-example/sketch.js:2:3])。如果希望使用p5.js中的函数,请将其更正为color(http://p5js.org/reference/#/p5/color)。
+> 🌸 p5.js说:您可能错误地将“colour”写成了“color”(位于sketch.js的第2行[http://localhost:8000/lib/empty-example/sketch.js:2:3])。如果希望使用p5.js中的函数,请将其更正为color(https://p5js.org/reference/p5/color)。
##### 位置
core/friendly_errors/fes_core.js
@@ -331,7 +331,7 @@ function setup() {
}
```
FES 将在控制台生成以下消息:
-> 🌸 p5.js 提示:您使用了 p5.js 的保留变量 "PI",请确保将变量名更改为其他名称。(https://p5js.org/reference/#/p5/PI)
+> 🌸 p5.js 提示:您使用了 p5.js 的保留变量 "PI",请确保将变量名更改为其他名称。(https://p5js.org/reference/p5/PI)
重新定义 p5.js 保留函数的示例
```javascript
@@ -369,7 +369,7 @@ function preLoad() {
}
```
FES 将在控制台生成以下消息:
-> 🌸 p5.js 提示:似乎您可能误写了 preLoad,应该是 preload。如果这不是您的意图,请进行更正。(http://p5js.org/reference/#/p5/preload)
+> 🌸 p5.js 提示:似乎您可能误写了 preLoad,应该是 preload。如果这不是您的意图,请进行更正。(https://p5js.org/reference/p5/preload)
##### 位置
core/friendly_errors/fes_core.js
diff --git a/contributor_docs/zh-Hans/how-to-add-friendly-error-messages.md b/contributor_docs/zh-Hans/how-to-add-friendly-error-messages.md
new file mode 100644
index 0000000000..bd51c80acd
--- /dev/null
+++ b/contributor_docs/zh-Hans/how-to-add-friendly-error-messages.md
@@ -0,0 +1,316 @@
+
+
+# 如何添加友好错误信息
+
+本指南将引导您完成使用友好错误系统(FES,🌸)编写友好错误(FE)信息的步骤。如果您的新方法支持自定义错误处理或为用户输出自定义日志,您可能需要为其编写友好错误信息。所有这些信息都是通过基于[i18next](https://www.i18next.com/)的`translator()`方法动态生成的,这使得p5.js能够提供与用户环境匹配的错误信息翻译。
+
+
+## ❗️`p5.min.js`中没有翻译
+
+- 我们已将 \[i18next] 集成到我们的代码库中。但是,它的使用仅限于p5.js的未压缩版本。压缩版本`p5.min.js`仅包含我们国际化代码的基本框架,不包含实际实现。
+- 在Browserify构建任务和`src/core/init.js`中,有特定的逻辑来避免在压缩版本中加载或设置翻译。因此,添加翻译不会影响`p5.min.js`的大小。
+
+
+## 前提条件
+
+在开始之前,请确定以下哪种情况最符合您的需求:
+
+- 您正在添加一个需要特定数量和类型参数的新方法。
+ - 请前往[✅使用FES添加参数验证](#-使用fes添加参数验证)。
+- 您的方法涉及加载特定类型的文件,并且您需要捕获特定于加载文件的错误。
+ - 请前往[📥使用FES添加文件加载错误](#-使用fes处理文件加载错误消息)。
+- 您已编写代码检测错误何时发生,并希望显示友好错误。
+ - 请前往[🐈使用FES添加库错误信息](#-使用fes添加库错误信息)。
+
+
+
+## ✅ 使用FES添加参数验证
+
+### 第1步 – 再次检查您的内联文档
+
+首先,确保您的方法有[内联文档](./contributing_to_the_p5js_reference.md),其中包含完整的参数列表。
+
+例如,`circle()`方法有以下内联文档,以方法描述开始,后面是参数列表,然后是示例代码:
+
+```
+/**
+ * 在画布上绘制一个圆。圆是一个圆形形状。
+ * 圆边缘上的每个点到其中心的距离相同。
+ * 默认情况下,前两个参数设置圆中心的位置。
+ * 第三个参数设置形状的宽度和高度(直径)。
+ * 可以使用ellipseMode()函数更改原点。
+ *
+ * @method circle
+ * @param {Number} x 圆中心的x坐标。
+ * @param {Number} y 圆中心的y坐标。
+ * @param {Number} d 圆的直径。
+ * @chainable
+ * @example
+ *
+ *
+ * circle(30, 30, 20);
+ * describe('灰色画布中央带有黑色轮廓的白色圆圈。');
+ *
+ *
+ *
+ */
+```
+
+从上面的例子中,FES将查找参数列表以验证参数:
+
+```
+ * @method circle
+ * @param {Number} x 圆中心的x坐标。
+ * @param {Number} y 圆中心的y坐标。
+ * @param {Number} d 圆的直径。
+```
+
+
+### 第2步 – 调用`p5._validateParameters()`
+
+现在回到您方法的实现,按照以下格式调用`validate_params()`:`p5._validateParameters('[您方法的名称]', arguments);`。
+
+例如,以下代码将验证`circle()`的参数并生成FE信息:
+
+```js
+p5._validateParameters('circle', arguments);
+```
+
+通常在方法中首先调用此函数,以避免在提供的参数不符合预期时继续执行。例如,它在`circle()`方法的第一行被调用:
+
+```js
+p5.prototype.circle = function() {
+ p5._validateParameters('circle', arguments);
+ const args = Array.prototype.slice.call(arguments, 0, 2);
+ args.push(arguments[2]);
+ args.push(arguments[2]);
+ return this._renderEllipse(...args);
+};
+```
+
+
+### 第3步 – 构建并测试您的代码以应对典型情况
+
+要查看参数验证的效果,请使用`npm run build`重新构建`p5.js`。
+
+要测试您的代码,找到`/lib/empty-example/index.html`并将脚本`../p5.min.js`替换为`../p5.js`,如下例所示:
+
+```js
+
+```
+
+请注意,`lib/p5.min.js`不支持FE信息,因此请使用`lib/p5.js`进行测试。
+
+然后,编辑`/lib/empty-example/sketch.js`来测试典型的参数错误情况:
+
+1. 缺少参数
+2. 参数数量错误
+3. 参数类型错误
+
+以下是测试`circle()`方法表达式的示例:
+
+```js
+// 缺少参数
+circle(100);
+// 参数数量错误(超过所需数量)
+// 注意这段代码仍然能成功绘制一个圆。
+circle(100, 100, 100, 1000);
+// 参数类型错误
+circle(100, 100, 'hello');
+```
+
+上面的代码应该生成以下FE信息:
+
+```
+🌸 p5.js says: [sketch.js, line 9] circle()需要至少3个参数,但只收到了1个。 (https://p5js.org/reference/p5/circle)
+🌸 p5.js says: [sketch.js, line 14] circle()需要不超过3个参数,但收到了4个。 (https://p5js.org/reference/p5/circle)
+🌸 p5.js says: [sketch.js, line 12] circle()的第三个参数需要Number类型,但收到了string类型。 (https://p5js.org/reference/p5/circle)
+```
+
+恭喜🎈!您现在已经完成了为新方法添加参数验证。
+
+
+## 📥 使用FES处理文件加载错误消息
+
+### 第1步 – 检查文件加载错误情况列表
+
+文件加载错误分为多个不同的情况,以便在错误发生时提供尽可能有帮助的信息。这使p5.js能够在不同情况下显示不同的错误。例如,当它无法读取字体文件中的数据时,它会显示一个与尝试加载过大无法读取的文件时不同的错误。
+
+这些情况都有自己的编号,可以在`core/friendly_errors/file_errors.js`文件的顶部找到。
+
+当您希望添加文件加载错误时,首先查看`core/friendly_errors/file_errors.js`中的`fileLoadErrorCases`,看看是否有适用于您情况的现有案例。
+
+
+
+例如,您可能正在加载基于字符串的文件。这对应于`fileLoadErrorCases`中的`case 3`:
+
+```js
+case 3:
+ return {
+ message: translator('fes.fileLoadError.strings', {
+ suggestion
+ }),
+ method: 'loadStrings'
+ };
+```
+
+如果您正在处理的场景已经有相关的编号,请记住案例编号,并跳至[**第4步**](#step-4)。如果您在`fileLoadErrorCases`中找不到匹配的情况,请转到[**第2步**](#step-2)创建新的情况。
+
+
+### 第2步 – 在问题面板上讨论添加新的错误情况
+
+接下来,您将提交一个问题工单,讨论创建新的情况或确认您的情况不是现有情况的重复。编写一个简短的段落描述您的新方法以及用户可能遇到这种特定文件加载错误的场景。然后再写一个简短的段落描述您方法中的错误处理以及它加载的文件类型。
+
+转到[问题面板](https://github.com/processing/p5.js/issues),按"New Issue"按钮,然后选择"Issue: 💡 Existing Feature Enhancement"选项。应该出现一个空表单。
+
+添加一个标题,如"向`fileLoadErrorCases`添加新情况:\[您的文件加载错误情况的高级描述]"。对于"Increasing access"部分,输入您在此步骤开始时准备的简短段落,描述典型情况。
+
+然后,在"Most appropriate sub-area of p5.js?"问题中勾选"Friendly Errors"框。最后,在"Feature enhancement details"部分,输入详细说明错误处理和加载文件类型的段落。
+
+
+### 第3步 – 向`fileLoadErrorCases`添加新情况
+
+在与维护者确认后,您可以向`fileLoadErrorCases`添加新情况。在`fileLoadErrorCases`的`switch`语句中,转到情况列表的末尾,并按照以下格式添加新情况:
+
+```
+case {{next available case number}}:
+ return {
+ message: translator('fes.fileLoadError.{{tag name}}', {
+ suggestion
+ }),
+ method: '{{name of your method}}'
+ };
+```
+
+在上面的例子中,双尖括号(`{{}}`)中的任何内容都是您应该替换的内容。例如,如果前一个情况编号是11,您的代码应该以`case 12:`开始,最终代码中没有双括号。
+
+
+### 第4步 – 调用`p5._friendlyFileLoadError()`
+
+添加您的情况后,您现在可以在错误处理语句中调用`p5._friendlyFileLoadError([情况编号], [文件路径])`。
+
+例如,请查看`loadStrings()`方法加载基于字符串的文件(对应于`fileLoadErrorCases`中的`case 3`)。`loadStrings()`方法使用[`httpDo.call()`](https://p5js.org/reference/p5/httpDo)和一个在文件错误情况下执行的自定义回调方法:
+
+```js
+p5.prototype.httpDo.call(
+ this,
+ args[0],
+ 'GET',
+ 'text',
+ data => {
+ // [... 省略的代码 ...]
+ },
+ function(err) {
+ // 错误处理
+ p5._friendlyFileLoadError(3, args[0]);
+ // [... 省略的代码 ...]
+ }
+ );
+```
+
+我们可以看到错误回调函数如何调用`p5._friendlyFileLoadError(3, [the first argument, which is a file path])`来生成以下FE信息:
+
+```
+🌸 p5.js says: 看起来加载文本文件时出现了问题。请检查文件路径(assets/wrongname.txt)是否正确,尝试在线托管文件,或运行本地服务器。
++ 更多信息:https://github.com/processing/p5.js/wiki/Local-server
+```
+
+恭喜🎈!您现在已经完成为带有文件加载的方法实现FE。
+
+
+
+## 🐈 使用FES添加库错误信息
+
+### 第1步 – 编写代码检测错误何时发生
+
+首先,查找用户在使用您的方法时可能遇到的典型错误情况,并创建逻辑来捕获这些情况。此外,如果适用,请考虑提供故障保护措施,例如为缺少的参数使用默认值。确定对用户有帮助的FE信息的情况。
+
+[MDN Web文档中的这个指南](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)提供了关于控制流和JavaScript原生错误处理结构的良好概述。
+
+\
+
+
+
+### 第2步 – 调用`p5._friendlyError()`
+
+要生成FE信息,您只需要在错误处理语句中按照以下格式调用`p5._friendlyError('[custom message]', '[method name]');`。将方括号内(包括方括号)的所有内容替换为您自己的值。
+
+例如,以下代码将为`bezierVertex()`生成FE信息:
+
+```js
+p5._friendlyError(
+ '在调用bezierVertex()之前必须先使用vertex()',
+ 'bezierVertex'
+);
+```
+
+这应该生成以下FE信息:
+
+```
+🌸 p5.js says: [sketch.js, line 19] 当调用bezierVertex时,p5js库内部发生了一个错误,错误信息为"在调用bezierVertex()之前必须先使用vertex()"。如果没有特别说明,可能是传递给bezierVertex的参数有问题。 (https://p5js.org/reference/p5/bezierVertex)
+```
+
+恭喜🎈!您现在已经完成了为您的方法添加库错误信息。
+
+
+## ✏️ 为国际受众编写友好错误信息
+
+FES信息编写者应优先降低理解错误信息的障碍,提高调试过程的可访问性。以下是一个例子:
+
+```
+🌸 p5.js says: [sketch.js, line 7] circle() was expecting at least 3 arguments, but received only 1. (https://p5js.org/reference/p5/circle)
+```
+
+如果浏览器设置为`ko-KR`(韩语)区域设置,上述参数验证信息将以韩语显示:
+
+```
+🌸 p5.js says: [sketch.js, 줄7] 최소 3개의 인수(argument)를 받는 함수 circle()에 인수가 1개만 입력되었습니다. (https://p5js.org/reference/p5/circle)
+```
+
+[友好错误i18n指南](https://almchung.github.io/p5-fes-i18n-book/)讨论了在跨文化i18n上下文中编写友好错误信息的挑战和最佳实践。以下是该指南的主要观点:
+
+- 了解您的受众:不要对错误信息的受众做出假设。尝试了解谁在使用我们的库以及他们如何使用它。
+- 保持语言包容性。我们努力使错误信息"友好",这对您意味着什么?寻找语言中可能的偏见和伤害。
+- 尽可能使用简单的句子。考虑将句子分解成更小的块,以最好地利用[i18next的插值功能](https://www.i18next.com/translation-function/interpolation)。
+- 优先考虑跨文化交流,并提供跨语言的良好体验。避免使用比喻手法。
+- 一次只介绍一个技术概念或技术术语。保持技术写作的一致性。尝试链接一个以初学者友好语言编写的外部资源,其中包含大量简短、实用的示例。
+
+[友好错误i18n指南](https://almchung.github.io/p5-fes-i18n-book/)是一个公共项目,您可以通过[这个单独的仓库](https://github.com/almchung/p5-fes-i18n-book)为该指南做出贡献。
+
+
+## 🔍 可选:单元测试
+
+请考虑为您的新FE信息添加单元测试,以便尽早发现错误并确保您的代码向用户传递预期的信息。此外,单元测试是确保其他贡献者的新代码不会意外破坏或干扰您的代码功能的好方法。以下是几个关于单元测试的好指南:
+
+- [单元测试和测试驱动开发](https://archive.p5js.org/learn/tdd.html),作者Andy Timmons
+- [贡献者文档:单元测试](./unit_testing.md)
+
+
+
+示例:
+
+```js
+suite('validateParameters: multi-format', function() {
+ test('color(): 可选参数,类型不正确', function() {
+ assert.validationError(function() {
+ p5._validateParameters('color', [0, 0, 0, 'A']);
+ });
+ });
+}
+```
+
+
+## 结论
+
+在本指南中,我们提供了为多种不同情况添加FE信息的分步说明,包括:
+
+- 添加参数验证,
+- 处理文件加载错误,以及
+- 为方法添加库错误信息。
+
+此外,我们很高兴通过2021-2022年进行的FES调查分享我们社区的见解。调查结果以两种格式提供:
+
+- [21-22 FES调查报告漫画](https://almchung.github.io/p5jsFESsurvey/)
+- [21-22 FES调查完整报告](https://observablehq.com/@almchung/p5-fes-21-survey)
+
+有关FES设计和技术方面的更深入信息,请参阅[FES自述文档](./friendly_error_system.md)。该文档提供了详细的解释和开发说明,对那些寻求更深入了解FES的人有所帮助。
diff --git a/src/accessibility/color_namer.js b/src/accessibility/color_namer.js
index 4509280e5b..3443c109ae 100644
--- a/src/accessibility/color_namer.js
+++ b/src/accessibility/color_namer.js
@@ -702,9 +702,9 @@ function _calculateColor(hsb) {
return colortext;
}
-//gets rgba and returs a color name
+//gets rgba and returns a color name
p5.prototype._rgbColorName = function(arg) {
- //conversts rgba to hsb
+ //converts rgba to hsb
let hsb = color_conversion._rgbaToHSBA(arg);
//stores hsb in global variable
originalHSB = hsb;
diff --git a/src/accessibility/gridOutput.js b/src/accessibility/gridOutput.js
index 5b52a23eb8..f5b4936cd5 100644
--- a/src/accessibility/gridOutput.js
+++ b/src/accessibility/gridOutput.js
@@ -117,7 +117,7 @@ function _gridShapeDetails(idT, ingredients) {
let shapeDetails = '';
let shapes = '';
let totalShapes = 0;
- //goes trhough every shape type in ingredients
+ //goes through every shape type in ingredients
for (let x in ingredients) {
let shapeNum = 0;
for (let y in ingredients[x]) {
diff --git a/src/accessibility/outputs.js b/src/accessibility/outputs.js
index 4cdb308c27..1680f18e31 100644
--- a/src/accessibility/outputs.js
+++ b/src/accessibility/outputs.js
@@ -579,8 +579,13 @@ p5.prototype._getPos = function (x, y) {
function _canvasLocator(args, canvasWidth, canvasHeight) {
const noRows = 10;
const noCols = 10;
- let locX = Math.floor(args[0] / canvasWidth * noRows);
- let locY = Math.floor(args[1] / canvasHeight * noCols);
+ let x = args[0];
+ let y = args[1];
+ if (x < 0 || x >= canvasWidth || y < 0 || y >= canvasHeight) {
+ return null;
+ }
+ let locX = Math.floor(x / canvasWidth * noRows);
+ let locY = Math.floor(y / canvasHeight * noCols);
if (locX === noRows) {
locX = locX - 1;
}
diff --git a/src/core/README.md b/src/core/README.md
index 49f5e3cadf..7dad604622 100644
--- a/src/core/README.md
+++ b/src/core/README.md
@@ -55,7 +55,7 @@ The `rendering.js` module presents the user-facing API for p5's various graphica
## [p5.Renderer.js](./p5.Renderer.js)
-The `p5.Renderer.js` module provides a common base definition for a p5 project output mode that can then be extended as with [p5.Renderer2D](./p5.Renderer2D.js). For three dimensional output, see the [webgl module](../webgl/). Each `p5` object instance typically has a `Renderer` attached as a property.
+The `p5.Renderer.js` module provides a common base definition for a p5 project output mode that can then be extended as with [p5.Renderer2D](./p5.Renderer2D.js). For three-dimensional output, see the [webgl module](../webgl/). Each `p5` object instance typically has a `Renderer` attached as a property.
## [p5.Renderer2D.js](./p5.Renderer2D.js)
diff --git a/src/core/constants.js b/src/core/constants.js
index bf28b50164..ece1333037 100644
--- a/src/core/constants.js
+++ b/src/core/constants.js
@@ -24,7 +24,7 @@ export const P2D = 'p2d';
/**
* One of the two render modes in p5.js, used for computationally intensive tasks like 3D rendering and shaders.
*
- * `WEBGL` differs from the default `P2D` renderer in the following ways:
+ * `WEBGL` differs from the default `P2D` renderer in the following ways:
*
* - **Coordinate System** - When drawing in `WEBGL` mode, the origin point (0,0,0) is located at the center of the screen, not the top-left corner. See the tutorial page about coordinates and transformations.
* - **3D Shapes** - `WEBGL` mode can be used to draw 3-dimensional shapes like box(), sphere(), cone(), and more. See the tutorial page about custom geometry to make more complex objects.
@@ -810,7 +810,7 @@ export const HSL = 'hsl';
/**
* AUTO allows us to automatically set the width or height of an element (but not both),
* based on the current height and width of the element. Only one parameter can
- * be passed to the size function as AUTO, at a time.
+ * be passed to the size function as AUTO, at a time.
*
* @property {String} AUTO
* @final
diff --git a/src/core/environment.js b/src/core/environment.js
index 4d15491948..d6efe67841 100644
--- a/src/core/environment.js
+++ b/src/core/environment.js
@@ -1211,7 +1211,7 @@ p5.prototype.getURLPath = () =>
* in an `Object`.
*
* For example, calling `getURLParams()` in a sketch hosted at the URL
- * `http://p5js.org?year=2014&month=May&day=15` returns
+ * `https://p5js.org?year=2014&month=May&day=15` returns
* `{ year: 2014, month: 'May', day: 15 }`.
*
* @method getURLParams
diff --git a/src/core/friendly_errors/fes_core.js b/src/core/friendly_errors/fes_core.js
index f78fd957ce..caf08772b8 100644
--- a/src/core/friendly_errors/fes_core.js
+++ b/src/core/friendly_errors/fes_core.js
@@ -145,8 +145,8 @@ if (typeof IS_MINIFIED !== 'undefined') {
//Whenever func having p5.[Class] is encountered, we need to have the error link as mentioned below else different link
funcName.startsWith('p5.') ?
- msgWithReference = `${message} (http://p5js.org/reference/${referenceSection}.${funcName})` :
- msgWithReference = `${message} (http://p5js.org/reference/${referenceSection}/${funcName})`;
+ msgWithReference = `${message} (https://p5js.org/reference/${referenceSection}.${funcName})` :
+ msgWithReference = `${message} (https://p5js.org/reference/${referenceSection}/${funcName})`;
}
return msgWithReference;
};
diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js
index ac41b13411..85d3ac7009 100644
--- a/src/core/p5.Renderer2D.js
+++ b/src/core/p5.Renderer2D.js
@@ -1052,6 +1052,7 @@ class Renderer2D extends p5.Renderer {
}
}
this._doFillStrokeClose(closeShape);
+ this.drawingContext.closePath();
}
}
isCurve = false;
diff --git a/src/core/shape/2d_primitives.js b/src/core/shape/2d_primitives.js
index f916339514..b1f7d66ae5 100644
--- a/src/core/shape/2d_primitives.js
+++ b/src/core/shape/2d_primitives.js
@@ -110,7 +110,10 @@ p5.prototype._normalizeArcAngles = (
*
* The fifth and sixth parameters, `start` and `stop`, set the angles
* between which to draw the arc. Arcs are always drawn clockwise from
- * `start` to `stop`. Angles are always given in radians.
+ * `start` to `stop`. The fifth and sixth parameters, start and stop, set the
+ * angles between which to draw the arc. Arcs are always drawn clockwise from
+ * start to stop. By default, angles are given in radians, but if angleMode
+ * (DEGREES) is set, the function interprets the values in degrees.
*
* The seventh parameter, `mode`, is optional. It determines the arc's fill
* style. The fill modes are a semi-circle (`OPEN`), a closed semi-circle
diff --git a/src/dom/dom.js b/src/dom/dom.js
index 2f04be1ef2..6bafb5bae4 100644
--- a/src/dom/dom.js
+++ b/src/dom/dom.js
@@ -541,7 +541,7 @@ p5.prototype.createDiv = function (html = '') {
};
/**
- * Creates a `<p></p>` element.
+ * Creates a paragraph element.
*
* `<p></p>` elements are commonly used for paragraph-length text.
*
@@ -752,7 +752,7 @@ p5.prototype.createImg = function () {
* background(200);
*
* // Create an anchor element that links to p5js.org.
- * let a = createA('http://p5js.org/', 'p5*js');
+ * let a = createA('https://p5js.org/', 'p5*js');
* a.position(25, 35);
*
* describe('The text "p5*js" written at the center of a gray square.');
@@ -767,7 +767,7 @@ p5.prototype.createImg = function () {
*
* // Create an anchor tag that links to p5js.org.
* // Open the link in a new tab.
- * let a = createA('http://p5js.org/', 'p5*js', '_blank');
+ * let a = createA('https://p5js.org/', 'p5*js', '_blank');
* a.position(25, 35);
*
* describe('The text "p5*js" written at the center of a gray square.');
diff --git a/src/events/mouse.js b/src/events/mouse.js
index c36bdf4ffc..0f3985a2db 100644
--- a/src/events/mouse.js
+++ b/src/events/mouse.js
@@ -1802,7 +1802,7 @@ p5.prototype._pmouseWheelDeltaY = 0;
* background(200);
*
* // Draw the circle
- * circle(circleSize, 50, 50);
+ * circle(50, 50, circleSize);
* }
*
* // Increment circleSize when the user scrolls the mouse wheel.
diff --git a/src/io/files.js b/src/io/files.js
index 64c82d3171..88d627b25a 100644
--- a/src/io/files.js
+++ b/src/io/files.js
@@ -549,7 +549,7 @@ p5.prototype.loadStrings = function(...args) {
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* //the file can be remote
- * //table = loadTable("http://p5js.org/reference/assets/mammals.csv",
+ * //table = loadTable("https://p5js.org/reference/assets/mammals.csv",
* // "csv", "header");
* }
*
diff --git a/src/math/trigonometry.js b/src/math/trigonometry.js
index cb2af7c709..788dbfb1ff 100644
--- a/src/math/trigonometry.js
+++ b/src/math/trigonometry.js
@@ -283,10 +283,12 @@ p5.prototype.atan2 = function(y, x) {
*
* `cos()` is useful for many geometric tasks in creative coding. The values
* returned oscillate between -1 and 1 as the input angle increases. `cos()`
- * takes into account the current angleMode().
+ * calculates the cosine of an angle, using radians by default, or according to
+ * if angleMode() setting (RADIANS or DEGREES).
*
* @method cos
- * @param {Number} angle the angle in radians unless specified by angleMode().
+ * @param {Number} angle the angle, in radians by default, or according to
+ * if angleMode() setting (RADIANS or DEGREES).
* @return {Number} cosine of the angle.
*
* @example
@@ -363,10 +365,12 @@ p5.prototype.cos = function(angle) {
*
* `sin()` is useful for many geometric tasks in creative coding. The values
* returned oscillate between -1 and 1 as the input angle increases. `sin()`
- * takes into account the current angleMode().
+ * calculates the sine of an angle, using radians by default, or according to
+ * if angleMode() setting (RADIANS or DEGREES).
*
* @method sin
- * @param {Number} angle the angle in radians unless specified by angleMode().
+ * @param {Number} angle the angle, in radians by default, or according to
+ * if angleMode() setting (RADIANS or DEGREES).
* @return {Number} sine of the angle.
*
* @example
@@ -443,11 +447,13 @@ p5.prototype.sin = function(angle) {
*
* `tan()` is useful for many geometric tasks in creative coding. The values
* returned range from -Infinity to Infinity and repeat periodically as the
- * input angle increases. `tan()` takes into account the current
- * angleMode().
+ * input angle increases. `tan()` calculates the tan of an angle, using radians
+ * by default, or according to
+ * if angleMode() setting (RADIANS or DEGREES).
*
* @method tan
- * @param {Number} angle the angle in radians unless specified by angleMode().
+ * @param {Number} angle the angle, in radians by default, or according to
+ * if angleMode() setting (RADIANS or DEGREES).
* @return {Number} tangent of the angle.
*
* @example
diff --git a/src/typography/attributes.js b/src/typography/attributes.js
index 3960ad53bc..d6a5eb8d5e 100644
--- a/src/typography/attributes.js
+++ b/src/typography/attributes.js
@@ -154,7 +154,7 @@ p5.prototype.textLeading = function(theLeading) {
*
* Note: Font size is measured in pixels.
*
- * Calling `textSize()` without an arugment returns the current size.
+ * Calling `textSize()` without an argument returns the current size.
*
* @method textSize
* @param {Number} size size of the letters in units of pixels.
diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js
index 1fb6c5012d..44be60d048 100644
--- a/src/webgl/p5.Camera.js
+++ b/src/webgl/p5.Camera.js
@@ -2435,6 +2435,7 @@ p5.Camera = class Camera {
const rotation = p5.Matrix.identity(this._renderer._pInst);
rotation.rotate(this._renderer._pInst._toRadians(a), x, y, z);
+ // Apply the rotation matrix to the center vector
/* eslint-disable max-len */
const rotatedCenter = [
centerX * rotation.mat4[0] + centerY * rotation.mat4[4] + centerZ * rotation.mat4[8],
@@ -2443,11 +2444,18 @@ p5.Camera = class Camera {
];
/* eslint-enable max-len */
- // add eye position back into center
+ // Translate the rotated center back to world coordinates
rotatedCenter[0] += this.eyeX;
rotatedCenter[1] += this.eyeY;
rotatedCenter[2] += this.eyeZ;
+ // Rotate the up vector to keep the correct camera orientation
+ /* eslint-disable max-len */
+ const upX = this.upX * rotation.mat4[0] + this.upY * rotation.mat4[4] + this.upZ * rotation.mat4[8];
+ const upY = this.upX * rotation.mat4[1] + this.upY * rotation.mat4[5] + this.upZ * rotation.mat4[9];
+ const upZ = this.upX * rotation.mat4[2] + this.upY * rotation.mat4[6] + this.upZ * rotation.mat4[10];
+ /* eslint-enable max-len */
+
this.camera(
this.eyeX,
this.eyeY,
@@ -2455,9 +2463,9 @@ p5.Camera = class Camera {
rotatedCenter[0],
rotatedCenter[1],
rotatedCenter[2],
- this.upX,
- this.upY,
- this.upZ
+ upX,
+ upY,
+ upZ
);
}
diff --git a/test/manual-test-examples/addons/p5.sound/Filter_LowPass/sketch.js b/test/manual-test-examples/addons/p5.sound/Filter_LowPass/sketch.js
index b5d26913bd..1be305a3ce 100644
--- a/test/manual-test-examples/addons/p5.sound/Filter_LowPass/sketch.js
+++ b/test/manual-test-examples/addons/p5.sound/Filter_LowPass/sketch.js
@@ -1,8 +1,8 @@
/**
* Example: Apply a p5.LowPass filter to a p5.SoundFile.
* Visualize the sound with FFT.
- * Map mouseX to the the filter's cutoff frequency
- * and mouseY to resonance/width of the a BandPass filter
+ * Map mouseX to the filter's cutoff frequency
+ * and mouseY to resonance/width of the BandPass filter
*/
var soundFile;
@@ -44,7 +44,7 @@ function setup() {
function draw() {
background(30);
- // Map mouseX to a the cutoff frequency for our lowpass filter
+ // Map mouseX to the cutoff frequency for our lowpass filter
filterFreq = map(mouseX, 0, width, 10, 22050);
// Map mouseY to resonance/width
filterRes = map(mouseY, 0, height, 15, 5);
diff --git a/test/unit/webgl/p5.Camera.js b/test/unit/webgl/p5.Camera.js
index b746a5053e..1047b6d4e1 100644
--- a/test/unit/webgl/p5.Camera.js
+++ b/test/unit/webgl/p5.Camera.js
@@ -277,6 +277,61 @@ suite('p5.Camera', function() {
assert.strictEqual(myCam.upY, orig.uy, 'up Y pos changed');
assert.strictEqual(myCam.upZ, orig.uz, 'up Z pos changed');
});
+
+ suite('Camera Tilt and Up Vector', function() {
+ test('Tilt() correctly updates the up vector', function() {
+ var orig = getVals(myCam); // Store original camera values
+
+ // Apply tilt to the camera
+ myCam.tilt(30); // Tilt by 30 degrees
+
+ // Compute expected up vector (normalized)
+ let forward = myp5.createVector(
+ myCam.centerX - myCam.eyeX,
+ myCam.centerY - myCam.eyeY,
+ myCam.centerZ - myCam.eyeZ
+ );
+ let up = myp5.createVector(orig.ux, orig.uy, orig.uz);
+ let right = p5.Vector.cross(forward, up);
+ let expectedUp = p5.Vector.cross(right, forward).normalize();
+
+ // Verify that the up vector has changed
+ assert.notStrictEqual(myCam.upX, orig.ux, 'upX should be updated');
+ assert.notStrictEqual(myCam.upY, orig.uy, 'upY should be updated');
+ assert.notStrictEqual(myCam.upZ, orig.uz, 'upZ should be updated');
+
+ // Verify up vector matches expected values within a small margin of error
+ assert.closeTo(myCam.upX, expectedUp.x, 0.001, 'upX mismatch');
+ assert.closeTo(myCam.upY, expectedUp.y, 0.001, 'upY mismatch');
+ assert.closeTo(myCam.upZ, expectedUp.z, 0.001, 'upZ mismatch');
+ });
+
+ test('Tilt() with negative angle correctly updates the up vector', function() {
+ var orig = getVals(myCam); // Store original camera values
+
+ myCam.tilt(-30); // Tilt by -30 degrees
+
+ // Compute expected up vector (normalized)
+ let forward = myp5.createVector(
+ myCam.centerX - myCam.eyeX,
+ myCam.centerY - myCam.eyeY,
+ myCam.centerZ - myCam.eyeZ
+ );
+ let up = myp5.createVector(orig.ux, orig.uy, orig.uz);
+ let right = p5.Vector.cross(forward, up);
+ let expectedUp = p5.Vector.cross(right, forward).normalize();
+
+ // Verify that the up vector has changed
+ assert.notStrictEqual(myCam.upX, orig.ux, 'upX should be updated');
+ assert.notStrictEqual(myCam.upY, orig.uy, 'upY should be updated');
+ assert.notStrictEqual(myCam.upZ, orig.uz, 'upZ should be updated');
+
+ // Verify up vector matches expected values within a small margin of error
+ assert.closeTo(myCam.upX, expectedUp.x, 0.001, 'upX mismatch');
+ assert.closeTo(myCam.upY, expectedUp.y, 0.001, 'upY mismatch');
+ assert.closeTo(myCam.upZ, expectedUp.z, 0.001, 'upZ mismatch');
+ });
+ });
});
suite('Rotation with angleMode(DEGREES)', function() {